如何使添加淡入/淡出动画的基础上的ViewModel属性值？ [英] How to make add a fade-in/fade-out animation based on ViewModel property value?

问题描述

我有一个视图模型暴露出字符串属性的 PageToolBarVisible 它可以真正或假

 私人字符串_pageToolBarVisible;
公共字符串PageToolBarVisible
{
    得到
    {
        返回_pageToolBarVisible;
    }    组
    {
        _pageToolBarVisible =价值;
        OnPropertyChanged（PageToolBarVisible）;
    }
}
 

然后在我的查看我有这样的 DataTrigger 其中的显示或隐藏相应的工具栏：

 ＆LT;风格X：键=PageToolBarStyle的TargetType =边框＆GT;
    ＆LT; Style.Triggers＆GT;
        ＆LT; D​​ataTrigger绑定={结合PageToolBarVisible}VALUE =false的＆GT;
            ＆LT; setter属性=能见度VALUE =折叠/＆GT;
        ＆LT; / DataTrigger＆GT;
    ＆LT; /Style.Triggers>
＆LT; /样式和GT;＆LT;边框样式={StaticResource的PageToolBarStyle}
    DockPanel.Dock =底填充=5 5 5 0背景=＃EEE＆GT;
    ＆LT;网格背景=＃EEE＆GT;
        ...
    ＆LT; /网格和GT;
＆LT; /边框＆GT;
 

我怎么现在的添加 动画这样：

• 当视图模型属性从变化的时真亦假在工具栏淡出


• 当视图模型属性从变化的假为真在工具栏
变淡

我想我有这样的事情添加到我的风格，但我不知道如何或在哪里：

 ＆LT; BeginStoryboard＆GT;
＆LT;情节提要＆GT;
    ＆LT; D​​oubleAnimation是
    Storyboard.TargetName =PageToolBar
    Storyboard.TargetProperty =（TextBlock.Opacity）
    从=0.0为了=1.0时长=0：0：3/＆GT;
＆LT; /故事板＆GT;
＆LT; / BeginStoryboard＆GT;
 

解决方案

您可以把您的BeginStoryboard里面DataTrigger.EnterActions

 ＆LT; D​​ataTrigger绑定={结合PageToolBarVisible}VALUE =false的＆GT;
    ＆LT; D​​ataTrigger.EnterActions＆GT;
        ＆LT; BeginStoryboard＆GT;
            ＆LT;情节提要＆GT;
                ＆LT; D​​oubleAnimation是
                Storyboard.TargetName =PageToolBar
                Storyboard.TargetProperty =（TextBlock.Opacity）
                从=0.0为了=1.0时长=0：0：3/＆GT;
            ＆LT; /故事板＆GT;
        ＆LT; / BeginStoryboard＆GT;
    ＆LT; /DataTrigger.EnterActions>    ＆LT; D​​ataTrigger.ExitActions＆GT;
        ＆LT; BeginStoryboard＆GT;
            ＆LT;情节提要＆GT;
                ＆LT; D​​oubleAnimation是
                    Storyboard.TargetName =PageToolBar
                    Storyboard.TargetProperty =（TextBlock.Opacity）
                    从=1.0为了=0.0时长=0：0：3/＆GT;
            ＆LT; /故事板＆GT;
        ＆LT; / BeginStoryboard＆GT;
    ＆LT; /DataTrigger.ExitActions>
＆LT; / DataTrigger＆GT;
 

I have a ViewModel which exposes the string property PageToolBarVisible which can be true or false:

private string _pageToolBarVisible;
public string PageToolBarVisible
{
    get
    {
        return _pageToolBarVisible;
    }

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

Then on my View I have this DataTrigger which displays or hides the toolbar accordingly:

<Style x:Key="PageToolBarStyle" TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding PageToolBarVisible}" Value="false">
            <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<Border Style="{StaticResource PageToolBarStyle}"
    DockPanel.Dock="Bottom" Padding="5 5 5 0" Background="#eee">
    <Grid Background="#eee">
        ...
    </Grid>
</Border>

How do I now add an animation so that:

• when the ViewModel Property is changed from true to false, the toolbar fades out
• when the ViewModel Property is changed from false to true, the toolbar fades in

I assume I have to add something like this to my style, but I don't know how or where:

<BeginStoryboard>
<Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="PageToolBar"
    Storyboard.TargetProperty="(TextBlock.Opacity)"
    From="0.0" To="1.0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>

解决方案

You can put the BeginStoryboard inside your DataTrigger.EnterActions

<DataTrigger Binding="{Binding PageToolBarVisible}" Value="false">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                Storyboard.TargetName="PageToolBar"
                Storyboard.TargetProperty="(TextBlock.Opacity)"
                From="0.0" To="1.0" Duration="0:0:3"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>

    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="PageToolBar"
                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                    From="1.0" To="0.0" Duration="0:0:3"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>

这篇关于如何使添加淡入/淡出动画的基础上的ViewModel属性值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！