使用 MVVM 在 WP8 应用程序上设置 Textblock/Button 可见性

Question

我是 MVVM 的新手，我正在开发 WP8 应用程序，我希望能够根据点击其中一个按钮的时间来设置按钮和文本块的可见性。这是我的观点，试图更好地解释我的问题；（http://i.imgur.com/JvrxBkh.png - 不能 post 此声誉的图像）。

当用户点击 "Going to sleep" 按钮时，我希望计数器文本块和 "I'm awake" 按钮可见且 "Going to sleep" 按钮折叠。一旦 "I'm awake" 按钮被按下，它就会以另一种方式工作，等等。如果我没有使用 MVVM，我只是在按钮事件中设置 Visibility 值，但我不知道该怎么做这是在使用 MVVM 模式时。

我环顾四周，发现了一个使用转换器的解决方案，例如使用 BooleanToVisibilityConverter class 和 bool 属性，然后通过绑定到 ViewModel 的 bool 值来设置可见性并将可见性的转换器值设置为 StaticResource BooleanToVisibilityConverter。但这对我不起作用。然后我的计数器文本块已经从 ViewModel 绑定了，所以我需要为此文本块进行某种多重绑定吗？

希望我已经解释清楚了。看起来这应该是一个简单的任务，也许我只是想多了。

编辑一些代码片段

我指的是视图组件；

<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");
}

我有两个按钮，例如（我只 post 一个）；

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;
    }
}

然后您的视图将包含 UI 的两个部分（睡眠和清醒），但会通过将它们的 Visibility 属性绑定到您的这些布尔属性来在两个部分之间切换视图模型：

<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 —— 假设它们在 [=34= 中有那些] 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 属性默认为假。您还需要删除可见性属性的绑定（因为这些现在将通过触发器设置）。

使用 MVVM 在 WP8 应用程序上设置 Textblock/Button 可见性

Setting Textblock/Button Visibility on WP8 App using MVVM

c#

visibility

mvvm

ivalueconverter

windows-phone-8