如何获得视图元素淡入/淡出基础上的ViewModel财产的价值？ [英] How to get View element to fade in/out based on value of ViewModel property?
问题描述
在查看和视图模型显示以下两个按钮中列出：
- 当你点击显示工具栏后，在工具栏的在 变淡
- 当你点击隐藏工具栏后，在工具栏的淡出
但是，下面的事情不工作：
- 当应用程序加载和OnPropertyChanged（PageToolBarVisible）被解雇，如果该值的假，然后在工具栏显示，尽管这一事实（这是为什么？）
- 当应用程序加载和OnPropertyChanged（PageToolBarVisible）被解雇，如果该值真正，然后在工具栏确实如此的淡入的，但是，这是不是应该发生的上加载的，但只有当pressing按钮明确地改变了，所以我改变构造函数来做到这一点：_pageToolBarVisible =真，但随后的工具栏仍然仍然变淡在即使在 OnPropertyChanged 从未叫（这是为什么？）
查看：
＆LT;窗口x：类=TestAnim334.Views.MainView
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
的xmlns：C =CLR的命名空间：TestAnim334.Commands
标题=主窗口HEIGHT =400WIDTH =800＆GT; ＆LT; Window.Resources＆GT;
＆LT;风格X：键=PageToolBarStyle的TargetType =边框＆GT;
＆LT; Style.Triggers＆GT;
＆LT; DataTrigger绑定={结合PageToolBarVisible}VALUE =真正的＆GT; ＆LT; DataTrigger.EnterActions＆GT;
＆LT; BeginStoryboard＆GT;
＆LT;情节提要＆GT;
＆LT; DoubleAnimation是
Storyboard.TargetProperty =透明度
从=0.0
为了=1.0
持续时间=0：0：1/＆GT;
＆LT; /故事板＆GT;
＆LT; / BeginStoryboard＆GT;
＆LT; /DataTrigger.EnterActions> ＆LT; DataTrigger.ExitActions＆GT;
＆LT; BeginStoryboard＆GT;
＆LT;情节提要＆GT;
＆LT; DoubleAnimation是
Storyboard.TargetProperty =透明度
从=1.0
为了=0.0
持续时间=0：0：1/＆GT;
＆LT; /故事板＆GT;
＆LT; / BeginStoryboard＆GT;
＆LT; /DataTrigger.ExitActions> ＆LT; / DataTrigger＆GT; ＆LT;触发属性=透明度VALUE =0＆GT;
＆LT; setter属性=能见度VALUE =折叠/＆GT;
＆LT; /触发＆GT; ＆LT; /Style.Triggers>
＆LT; /样式和GT; ＆LT; /Window.Resources>
＆LT; DockPanel中LastChildFill =FALSE＆GT; ＆LT; StackPanel的DockPanel.Dock =顶部
保证金=10＆GT; ＆LT; TextBlock的文本=这是页面的内容。/＆GT;
＆LT; TextBlock的文本=视图模型属性是：/＆GT;
＆LT; TextBlock的文本={结合PageToolBarVisible}/＆GT;
＆LT;按钮内容=隐藏工具栏
宽度=150
命令={结合HideToolBarCommand}
的HorizontalAlignment =左/＆GT;
＆LT;按钮内容=显示工具栏
宽度=150
命令={结合ShowToolBarCommand}
的HorizontalAlignment =左/＆GT; ＆LT; / StackPanel的＆GT; ＆LT;边框样式={StaticResource的PageToolBarStyle}
HEIGHT =40
DockPanel.Dock =底背景=＃DDDCornerRadius =5＆GT;
＆LT; TextBlock的字号=24文本=这是工具栏文本/＆GT;
＆LT; /边框＆GT; ＆LT; / DockPanel中＆GT;
＆LT; /窗GT;
视图模型：
使用System.Windows.Input;
使用TestAnim334.Commands;命名空间TestAnim334.ViewModels
{
公共类MainViewModel：ViewModelBase
{ ＃地区ViewModelProperty：PageToolBarVisible
私人字符串_pageToolBarVisible;
公共字符串PageToolBarVisible
{
得到
{
返回_pageToolBarVisible;
} 组
{
_pageToolBarVisible =价值;
OnPropertyChanged（PageToolBarVisible）;
}
}
#endregion ＃地区DelegateCommand：HideToolBar
私人DelegateCommand hideToolBarCommand; 公众的ICommand HideToolBarCommand
{
得到
{
如果（hideToolBarCommand == NULL）
{
hideToolBarCommand =新DelegateCommand（HideToolBar，CanHideToolBar）;
}
返回hideToolBarCommand;
}
} 私人无效HideToolBar（）
{
PageToolBarVisible =假;
} 私人布尔CanHideToolBar（）
{
返回PageToolBarVisible ==真;
}
#endregion ＃地区DelegateCommand：ShowToolBar
私人DelegateCommand showToolBarCommand; 公众的ICommand ShowToolBarCommand
{
得到
{
如果（showToolBarCommand == NULL）
{
showToolBarCommand =新DelegateCommand（ShowToolBar，CanShowToolBar）;
}
返回showToolBarCommand;
}
} 私人无效ShowToolBar（）
{
PageToolBarVisible =真;
} 私人布尔CanShowToolBar（）
{
返回PageToolBarVisible ==假;
}
#endregion 公共MainViewModel（）
{
PageToolBarVisible =假;
} }
}
好回答你的问题的两个部分：
-
为什么当PageToolBarVisible在加载工具栏上的假炒鱿鱼还表示：
你唯一的隐藏与动画工具栏上的ExitActions，这是不被击中。逻辑流程这样如果（PageToolBarVisible ==真）
生成EnterActions如果（PageToolBarVisible变为假）
生成ExitActions如果（PageToolBarVisible开始为假）
什么都不做如果（PageToolBarVisible开始为假，并设置为false）
什么都不做
结论，因为PageToolBarVisible不是从true更改为False ...动画不运行。
解决方案：
考虑具有处理您PageToolBarVisible财产假的情况下第二个DataTrigger。或者你可以在属性设置为True，然后假打你ExitActions（虽然我不知道这是否会A）工作或B）是一个很好的解决方案）
-
为什么要设置支持字段的属性仍然运行加载时的动画效果：
我相信这里发生了什么，是当应用程序加载，绑定是检查属性的值，如果你设置了支持字段就应该从找上得到这个值PageToolBarVisible。
所以，这并不是说你是触发OnPropertyChanged，它是绑定是获取值时，您的应用程序加载
解决方案：
要么重新考虑你的周围如何结合触发，从而动画你的逻辑。或者你可以用绑定模式玩，说实话，我不认为有一个能够满足您正在寻找条件的方式，但是我可能是错的。
The View and ViewModel listed below show two buttons:
- when you click Show ToolBar, the toolbar fades in
- when you click Hide ToolBar, the toolbar fades out
However, the following things don't work:
- when the application is loaded and OnPropertyChanged("PageToolBarVisible") is fired, if the value is false then the Toolbar shows in spite of that fact (why is that?)
- when the application is loaded and OnPropertyChanged("PageToolBarVisible") is fired, if the value is true then the toolbar does indeed fade in, however, this is not supposed to happen on loading but only when explicitly changed by pressing the buttons, so I change the constructor to do this: _pageToolBarVisible = "true", but then the toolbar still still fades in even though the OnPropertyChanged was never called (why is that?)
View:
<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>
ViewModel:
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";
}
}
}
Ok to answer the two parts of your question:
Why when PageToolBarVisible is fired as "False" at loading the toolbar still shows: Your only hiding the toolbar with the animation in the "ExitActions", which aren't being hit. The logic flows as such.
if(PageToolBarVisible == true) Run EnterActions
if(PageToolBarVisible changes to false) Run ExitActions
if(PageToolBarVisible starts as false) Do nothing
if(PageToolBarVisible starts as false and is set to false) Do nothing
Conclusion, because the PageToolBarVisible is not changing from True to False ... the animation doesn't run.
Solution:
Consider having a second DataTrigger that handles the False case for your PageToolBarVisible property. Or you can set the Property to True and then False to hit your ExitActions (though I'm not sure if this would A) work or B) be a good solution)
Why setting the backing field for the Property still runs the animation when loaded:
I believe what is happening here, is that when the application loads, the Binding is checking the value of the property, if you've set the value of the backing field then it should be getting this from the "Get" on "PageToolBarVisible".
So it's not that you're triggering the OnPropertyChanged, it's that the Binding is getting the value when your app is loading
Solution:
Either rethink your logic around how your binding to the trigger and thus the animation. Or you can play with the Binding Modes, to be honest I don't think there's a mode that would satisfy the conditions you're looking for, however I might be wrong.
这篇关于如何获得视图元素淡入/淡出基础上的ViewModel财产的价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
