首页 文章

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

提问于
浏览
0

我'm new to MVVM and I'正在研究WP8应用程序而我是我的视图,试图更好地解释我的问题; (http://i.imgur.com/JvrxBkh.png - 无法在此声誉上发布图像) .

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

我环顾四周,找到了一个使用转换器的解决方案,例如使用BooleanToVisibilityConverter类和bool属性,然后通过绑定到ViewModel的bool值并将可见性的转换器值设置为StaticResource BooleanToVisibilityConverter来设置可见性 . 但它对我来说并不像我想要的那样 . 然后我的计数器文本块已经有一个来自ViewModel的绑定,所以我需要这种文本块的某种多重绑定吗?

希望我已经解释过自己好了 . 看起来它应该是一个简单的任务,也许我只是在思考或什么 .

EDIT With some code snippets

我指的是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 回答

  • 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 . 您还需要删除可见性属性上的绑定(因为现在可以通过触发器设置这些绑定) .

相关问题