使用MVVM在WP8 App上設置文本塊/按鈕可見性

Question

我是MVVM的新手，並且正在WP8應用程序上工作，我希望能夠根據敲擊這些按鈕之一的時間來設置按鈕和文本塊的可見性。 這是我的觀點，試圖更好地解釋我的問題； （ http://i.imgur.com/JvrxBkh.png-無法在此聲譽上發布圖像）。

當用戶點擊“進入睡眠”按鈕時，我希望計數器文本塊和“我醒來”按鈕可見，而“進入睡眠”按鈕可以折疊。 然后，一旦按下“我醒了”按鈕，它將以另一種方式起作用。依此類推。如果我不使用MVVM，則只需在按鈕事件中設置“可見性”值，但是我仍然堅持使用MVVM模式時，請執行此操作。

我四處查看並遇到了使用轉換器的解決方案，例如使用BooleanToVisibilityConverter類和bool屬性，然后通過綁定到ViewModel的bool值設置可見性，並將可見性的轉換器值設置為StaticResource BooleanToVisibilityConverter。 但這對我不起作用。 然后我的計數器文本塊已經具有ViewModel的綁定，因此我需要對該文本塊進行某種形式的多重綁定嗎？

希望我已經向自己解釋了。 似乎這應該是一個簡單的任務，也許我只是在想什么。

使用一些代碼片段進行編輯

我指的是View組件；

<BooleanToVisibilityConverter x:Key="boolToVis" />

<TextBlock 
Grid.Row="2"
Text="{Binding Counter}"
FontSize="50"
TextWrapping="Wrap"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="{Binding VisibilityControl, Converter={StaticResource boolToVis}}"/>

<Button 
Grid.Row="3"
Width="230"
Height="70"
Content="I'm awake"
BorderThickness="0"
Background="Gray"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding AwakeButtonCommand}"
Visibility="{Binding VisibilityControl, Converter={StaticResource boolToVis}}""/>

<Button 
Grid.Row="3"
Width="230"
Height="70"
Content="Going to sleep"
BorderThickness="0"
Background="Gray"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center" 
Command="{Binding SleepButtonCommand}"
Visibility="{Binding VisibilityControl, Converter={StaticResource boolToVis}}"/>

然后在ViewModel中，VisibilityControl是公正的；

private bool _visibilityControl;
public bool VisibilityControl
{
    if (_visibilityControl != value)
        _visibilityControl = value;

    OnPropertyChanged("VisibilityControl");
}

我有兩個按鈕，例如（我將張貼一個按鈕）；

public ICommand AwakeButtonCommand
{
    get
    {
        return _awakeButtonCommand
            ?? (_awakeButtonCommand = new Resources.ActionCommand(() =>
        {
              VisibilityControl = true;
        }));
    }
}

顯然，它不起作用。 我認為讓我投擲的是因為我希望在按下一個按鈕等操作時發生幾處更改。這使我失望。

Answer 1

我沒有做任何Windows Phone開發，但這是在WPF中完成的一種方法，該方法也可能適用於WP。

首先，您的ViewModel將具有幾個布爾屬性，指示哪個狀態是活動的（一個是另一個的鏡像）：

public bool IsAwake
{
    get
    {
        return _isAwake;
    }
    set
    {
        if (_isAwake != value)
        {
            _isAwake = value;
            // raise PropertyChanged event for *both* IsAwake and IsAsleep
        }
    }
}
bool _isAwake;

public bool IsAsleep
{
    get
    {
        return !_isAwake;
    }
}

然后，您的View將包含UI的兩個部分（處於睡眠狀態和喚醒狀態），但通過將其Visibility屬性綁定到ViewModel的以下布爾屬性，可以在這兩個部分之間進行切換：

<StackPanel>
    <StackPanel x:Name="AwakePart"
        Visibility="{Binding IsAwake, Converter={StaticResource btvc}}">
        ... "Going to sleep" button here ...
    </StackPanel>
    <StackPanel x:Name="AsleepPart"
        Visibility="{Binding IsAsleep, Converter={StaticResource btvc}}">
        ... Elapsed time text block and "I'm awake" button here ...
    </StackPanel>
</StackPanel>

您還將在XAML資源中的某個地方需要一個BooleanToVisibilityConverter實例：

<... .Resources>
    <BooleanToVisibilityConverter x:Key="btvc" />
</... .Resources>

在此示例中，我使用了兩個布爾屬性，因為它使XAML變得更容易了，但是您也可以使用DataTrigger （假設它們在Windows Phone中具有），在這種情況下，您只需要一個布爾屬性。 然后，您將編寫觸發器以切換兩個部分的Visibility屬性：

<DataTrigger Binding="{Binding IsAwake}" Value="True">
    <Setter TargetName="AwakePart" Property="Visibility" Value="Visible" />
    <Setter TargetName="AsleepPart" Property="Visibility" Value="Hidden" />
</DataTrigger>

為此，您首先需要在XAML中將“ AwakePart”可見性顯式設置為Hidden ，並確保在ViewModel中，默認情況下IsAwake屬性為false。 您還需要刪除可見性屬性上的綁定（因為這些綁定現在將通過觸發器進行設置）。