WPF中的基本动画:如何在展开时为网格设置动画

时间:2012-09-03 01:53:12

标签: c# wpf mvvm storyboard

我在WPF应用程序中使用MVVm。我目前正在玩动画网格,以便当用户选择组合框中的特定项目时,我希望我的网格在展开时进行动画制作。我在View Model中有一个属性,我想绑定它来触发网格中的动画。我们如何在MVVM中执行此操作?到目前为止,我最近找到了一个使用

的解决方案
EventTrigger RoutedEvent ="SampleGridEventName"

有没有办法使用其他触发器绑定到我的ViewModel中的属性?像

这样的东西
Trigger BlahBlah ="{Binding ExpandGrid}"

1 个答案:

答案 0 :(得分:1)

是。 Style具有DataTrigger,它还具有EnterActions属性。动画存储在资源中。这就是诀窍。

<UserControl x:Class="TriggerSpike.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
    <DoubleAnimation x:Key="SearchAnimation" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:4"/>
    <DoubleAnimation x:Key="StopSearchAnimation" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:4"/>
</UserControl.Resources>
<StackPanel>
    <TextBlock Name="progressWheel" TextAlignment="Center" Opacity="0">
        <TextBlock.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsBusy}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <StaticResource ResourceKey="SearchAnimation"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                   <StaticResource ResourceKey="StopSearchAnimation"/> 
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
        Searching
    </TextBlock>
    <Label Content="Here your search query"/>
    <TextBox Text="{Binding SearchClause}"/>
    <Button Click="Button_Click">Search!</Button>
    <TextBlock Text="{Binding Result}"/>
</StackPanel>
</UserControl>