Start an animation from the VM

Mar 28, 2011 at 10:22 AM

Hello all,

I have the following XAML:

<UserControl x:Class="TestsCaliburn.Views.ShellView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Micro="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" mc:Ignorable="d" 
             Width="500" Height="500"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="GotoPageStoryboard">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ImageHost" Storyboard.TargetProperty="(Canvas.Left)">
                <SplineDoubleKeyFrame KeySpline="0.7,0,0.3,1" KeyTime="00:00:00.5000000" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <DockPanel>
        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
            <Button Content="Previous" x:Name="Previous"></Button>
            <Button Content="Next" Grid.Column="1" x:Name="Next"></Button>
        </Grid>
        <StackPanel x:Name="ImageHost" Orientation="Horizontal" Width="500">
            <ContentControl Micro:View.Model="{Binding Wizard1ViewModel}" Width="500" />
            <ContentControl Micro:View.Model="{Binding Wizard2ViewModel}" Width="500" />
            <ContentControl Micro:View.Model="{Binding Wizard3ViewModel}" Width="500" />
        </StackPanel>
    </DockPanel>
</UserControl>

How can I start the GotoPageStoryboard animation when I click on the Next and Previous buttons?

Thanks!

Mar 28, 2011 at 10:35 AM

Can't you use a DataTrigger bound to a VM property to start the animation?

<Style>
   <Style.Triggers>
      <DataTrigger Binding="{Binding Path=VM_Property_Name}" Value="VM_Property_Value">
         <DataTrigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource GotoPageStoryboard}"/>
         </DataTrigger.EnterActions>
      </DataTrigger>
   </Style.Triggers>
</Style>

I suppose you could event use the VisualStateManager to accomplish this, given that a VM property is able to describe the 'state'.

Mar 28, 2011 at 1:58 PM

Thanks, that works perfectly well