如何根据 ViewModel 属性的值让 View 元素淡入/淡出？

Question

下面列出的 View 和 ViewModel 显示了两个按钮：

• 当您单击显示工具栏时，工具栏淡入
• 当您单击隐藏工具栏时，工具栏淡出

但是，以下事情不起作用：

• 当加载应用程序并触发 OnPropertyChanged("PageToolBarVisible") 时，如果值为 false，尽管如此，工具栏仍会显示（为什么会这样？)
• 当加载应用程序并触发 OnPropertyChanged("PageToolBarVisible") 时，如果值为 true 则工具栏确实淡入，但是，这不是应该在加载时发生，但只有在通过按下按钮显式更改时才会发生，所以我更改构造函数来执行此操作：_pageToolBarVisible = "true"，但随后工具栏仍然仍然淡入 strong> 即使 OnPropertyChanged 从未被调用（为什么会这样？）

查看：

<Window x:Class="TestAnim334.Views.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:TestAnim334.Commands"
    Title="Main Window" Height="400" Width="800">

    <Window.Resources>
        <Style x:Key="PageToolBarStyle" TargetType="Border">
            <Style.Triggers>
                <DataTrigger Binding="{Binding PageToolBarVisible}" Value="true">

                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="0.0" 
                                    To="1.0" 
                                    Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>

                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" 
                                    To="0.0" 
                                    Duration="0:0:1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>

                </DataTrigger>

                <Trigger Property="Opacity" Value="0">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Trigger>

            </Style.Triggers>
        </Style>

    </Window.Resources>


    <DockPanel LastChildFill="False">

        <StackPanel DockPanel.Dock="Top"
                    Margin="10">

            <TextBlock Text="This is the content of the page."/>
            <TextBlock Text="The ViewModel property is:"/>
            <TextBlock Text="{Binding PageToolBarVisible}"/>
            <Button Content="Hide ToolBar" 
                    Width="150"
                    Command="{Binding HideToolBarCommand}"
                    HorizontalAlignment="Left"/>
            <Button Content="Show ToolBar" 
                    Width="150"
                    Command="{Binding ShowToolBarCommand}"
                    HorizontalAlignment="Left"/>

        </StackPanel>

        <Border Style="{StaticResource PageToolBarStyle}"
            Height="40"
            DockPanel.Dock="Bottom" Background="#ddd" CornerRadius="5">
            <TextBlock FontSize="24" Text="This is the ToolBar text"/>
        </Border>

    </DockPanel>


</Window>

视图模型：

using System.Windows.Input;
using TestAnim334.Commands;

namespace TestAnim334.ViewModels
{
    public class MainViewModel : ViewModelBase
    {

        #region ViewModelProperty: PageToolBarVisible
        private string _pageToolBarVisible;
        public string PageToolBarVisible
        {
            get
            {
                return _pageToolBarVisible;
            }

            set
            {
                _pageToolBarVisible = value;
                OnPropertyChanged("PageToolBarVisible");
            }
        }
        #endregion

        #region DelegateCommand: HideToolBar
        private DelegateCommand hideToolBarCommand;

        public ICommand HideToolBarCommand
        {
            get
            {
                if (hideToolBarCommand == null)
                {
                    hideToolBarCommand = new DelegateCommand(HideToolBar, CanHideToolBar);
                }
                return hideToolBarCommand;
            }
        }

        private void HideToolBar()
        {
            PageToolBarVisible = "false";
        }

        private bool CanHideToolBar()
        {
            return PageToolBarVisible == "true";
        }
        #endregion

        #region DelegateCommand: ShowToolBar
        private DelegateCommand showToolBarCommand;

        public ICommand ShowToolBarCommand
        {
            get
            {
                if (showToolBarCommand == null)
                {
                    showToolBarCommand = new DelegateCommand(ShowToolBar, CanShowToolBar);
                }
                return showToolBarCommand;
            }
        }

        private void ShowToolBar()
        {
            PageToolBarVisible = "true";
        }

        private bool CanShowToolBar()
        {
            return PageToolBarVisible == "false";
        }
        #endregion

        public MainViewModel()
        {
            PageToolBarVisible = "false";
        }

    }
}

Answer 1

好的，回答你问题的两个部分：

1. 为什么在加载工具栏时 PageToolBarVisible 被触发为“False”时仍然显示： 您唯一在“ExitActions”中隐藏带有动画的工具栏，没有被击中。逻辑如此流动。

   如果（PageToolBarVisible == true） 运行 EnterActions

   if(PageToolBarVisible 更改为 false) 运行 ExitActions

   if(PageToolBarVisible 开始为 false) 什么都不做

   if(PageToolBarVisible 以 false 开始并设置为 false) 什么都不做

结论，因为 PageToolBarVisible 没有从 True 变为 False ...动画没有运行。

解决方案：

考虑使用第二个 DataTrigger 来处理 PageToolBarVisible 属性的 False 情况。或者您可以将属性设置为 True，然后设置为 False 以点击您的 ExitActions（尽管我不确定这是否会 A）工作或 B）是一个好的解决方案）

1. 为什么设置属性的支持字段在加载时仍然运行动画：

   我相信这里发生的事情是，当应用程序加载时，绑定正在检查属性的值，如果您设置了支持字段的值，那么它应该从“获取”上获取它"PageToolBarVisible"。

   所以不是你触发了 OnPropertyChanged，而是当你的应用加载时 Binding 正在获取值

解决方案：

要么重新考虑如何绑定到触发器以及动画的逻辑。或者您可以使用绑定模式，老实说，我认为没有一种模式可以满足您正在寻找的条件，但是我可能错了。