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

时间:2015-01-30 15:37:51

标签: c# windows-phone-8 mvvm visibility ivalueconverter

我是MVVM的新手,我正在开发一个WP8应用程序,我希望能够根据其中一个按钮被点击时设置按钮和文本块的可见性。这是我的观点,试图更好地解释我的问题; (http://i.imgur.com/JvrxBkh.png - 无法在此声誉上发布图片。)

当用户点击“进入睡眠状态”按钮时,我希望计数器文本块和“我醒着”按钮可以通过“进入睡眠状态”按钮进行折叠。一旦按下“我醒着”按钮等,它将以另一种方式工作。如果我没有使用MVVM,我只是在按钮事件中设置Visibility值,但我坚持如何在使用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;
        }));
    }
}

显然,它不起作用。我想是什么让我失望是因为当按下一个按钮时我想要改变一些东西等等。它让我失望了。

1 个答案:

答案 0 :(得分: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”可见性为隐藏,并确保在ViewModel中默认情况下IsAwake属性为false 。您还需要删除可见性属性上的绑定(因为现在可以通过触发器设置这些绑定)。