Question

我有一张＆＃34;翻转卡＆＃34;风格的动画效果很好。一方面，它有一个按钮，当点击它时，触发动画＆＃34; FlipOpen＆＃34;：

<Button Content="click me" Height="130">
<Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click" >
        <BeginStoryboard  Storyboard="{StaticResource FlipOpen}">
        </BeginStoryboard>
    </EventTrigger>
</Button.Triggers>

    <Storyboard x:Key="FlipOpen">
        <DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Back"/>
        <DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Front"/>
    </Storyboard>

    <Storyboard x:Key="FlipClose">
        <DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Back"/>
        <DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Front"/>
    </Storyboard>

我想将动画绑定到我的ViewModel上的布尔属性，我试图使用DataTriggers：

a）定义一种风格：

<Style x:Key="myStyle">
<Style.Triggers>
    <DataTrigger Binding="{Binding FlipTheCard}" Value="true">
        <DataTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource FlipOpen}"/>
        </DataTrigger.EnterActions>
    </DataTrigger>
    <DataTrigger Binding="{Binding FlipTheCard}" Value="false">
        <DataTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource FlipClose}"/>
        </DataTrigger.EnterActions>
    </DataTrigger>
</Style.Triggers>

b）将它应用于包含正面和背面的网格容器：

<Grid RenderTransformOrigin="0.5,0.5" x:Name="Back" Opacity="0" Style="{StaticResource myStyle}">
...
</Grid>

c）不要在按钮点击时启动动画，但绑定一个将布尔值切换到按钮的命令：

<Button Content="click me!" Command="{Binding ToggleFlipCard}" Height="130">

然而，这导致异常（＆＃34; Style中的故事板结构不能具有TargetName。删除TargetName＆＃34;）。

我在这里做错了什么？如何将这些动画绑定到我的ViewModel上的布尔属性？

感谢您的帮助！

Answer 1

我也找到了一个解决方案......它在动画方面远非完美（因为我不使用关键帧，只是同时缩放两者的x属性）但它应该给你的想法：

<强>样式：

<Storyboard x:Key="FlipOpen">
    <DoubleAnimation Duration="0:0:0.3"
        Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
        To="0" />
</Storyboard>
<Storyboard x:Key="FlipClose">
    <DoubleAnimation Duration="0:0:0.3"
         Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
         From="0"
         To="1" />
</Storyboard>

<Style x:Key="GridStyle" TargetType="Grid">
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1" ScaleY="1" />
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="FrontGridStyle" TargetType="Grid"
        BasedOn="{StaticResource GridStyle}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding FlipTheCard}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource FlipClose}" />
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

<Style x:Key="BackGridStyle" TargetType="Grid"
    BasedOn="{StaticResource GridStyle}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding FlipTheCard}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource FlipClose}" />
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

<强>网格：

<Grid>
    <Grid Style="{StaticResource FrontGridStyle}">
        <Border Width="100"
                Height="100"
                Background="Red" />
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Command="{Binding ToggleFlipCard}"
                Content="click me!" />
    </Grid>

    <Grid Style="{StaticResource BackGridStyle}">
        <Border Width="100"
                Height="100"
                Background="Green" />
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Command="{Binding ToggleFlipCard}"
                Content="click me!" />
    </Grid>
</Grid>

Answer 2

我找到了一个解决方案.. yikes

参考Microsoft.Expression.Interactions.dll

定义交互触发器：

    <i:Interaction.Triggers>
    <ei:DataTrigger Binding="{Binding FlipToFront}" Value="true">
        <ei:ControlStoryboardAction Storyboard="{StaticResource FlipOpen}"/>
    </ei:DataTrigger>
    <ei:DataTrigger Binding="{Binding FlipToFront}" Value="false">
        <ei:ControlStoryboardAction Storyboard="{StaticResource FlipClose}"/>
    </ei:DataTrigger>
</i:Interaction.Triggers>

credits

将动画绑定到ViewModel属性

2 个答案: