Связать анимацию с объектом ViewModel

Question

У меня есть анимация с флип-картой, которая отлично работает. С одной стороны, она имеет кнопку, при нажатии, запускает анимацию «FlipOpen»:

<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 и I попытались использовать DataTriggers:

а) определить стиль:

<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> 

б) применять его как для грид-контейнеров, которые содержат переднюю и заднюю:

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

с) не запустить анимацию на кнопку мыши, но связать команду, которая переключает логическое значение с кнопкой :

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

Однако это приводит к исключению ("раскадровка-структура в стиле не может иметь Имя_целевого_объекта. Удалите Имя_целевого_объект ").

Что я здесь делаю неправильно? Как я могу связать эти анимации в логическое свойство в моем ViewModel?

Спасибо за любую помощь!

Answer 1

Я также нашел решение ... это далеко от совершенства на стороне анимации (как я не использую ключевые кадры и просто масштабировать х свойство и в то же время), но это должно дать вам идею:

Стиль:

<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

• определить Interaction-триггера:

  <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