locked
Animation Trigger based on a value parameter RRS feed

  • Question

  • Hi guys, I need your help. I want to do the following thing: when I click  a button, it shows/hide a panel into the window depending on a custom boolean variable (i.e. panelVisible), using Triggers. How can I achieve it? I tried creating a Trigger for the button click event, but I don't know how to say to Blend that it must see the actual value of "panelVisible" in order to animate using the "FadeIn" storyboard or the "FadeOut".

    Any hints?

    Thanks in advance

    Paolo

     

    Thursday, March 10, 2011 3:27 PM

All replies

  • Hi!

    check out DataTriggers. With them, you can fire an animation based on a property value.

    In this piece of code, I defined two triggers:

    • In the first one, if PanelVisible property value is true, it triggers FadeIn storyboard.
    • In the second one, if PanelVisible property value is false, it triggers FadeOut storyboard

    <UserControl.Resources>
    	<Storyboard x:Name="FadeIn">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel">
    			<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<Storyboard x:Name="FadeOut">
    		<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
    	</Storyboard>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White">
    	<i:Interaction.Triggers>
      	<ei:DataTrigger Binding="{Binding PanelVisible}" Value="True" Comparison="Equal">
      		<ei:ControlStoryboardAction Storyboard="{StaticResource FadeIn}"/>
      	</ei:DataTrigger>
    		<ei:DataTrigger Binding="{Binding PanelVisible}" Value="False" Comparison="Equal">
      		<ei:ControlStoryboardAction Storyboard="{StaticResource FadeOut}"/>
      	</ei:DataTrigger>
    	</i:Interaction.Triggers>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="Press" Command="{Binding ChangePanelVisibility}"/>
          
        <StackPanel x:Name="stackPanel" Grid.Column="1" Background="Red" Opacity="0"/>
      </Grid>
    </Grid>
    

    In the code behind of the user control, it must be a property called PanelVisible that you should change on button's command execute:

    public partial class MainPage : UserControl
    {
      public MainPage()
      {
    	// Required to initialize variables
    	InitializeComponent();
    
    	DataContext = new ViewModel();
      }
    
    }
    
    public class ViewModel : GalaSoft.MvvmLight.ViewModelBase
    {
      #region MEMBERS
    
      private bool _panelVisible;
    
      #endregion
    
      #region PROPERTIES
    
      public bool PanelVisible
      {
        get
        {
          return _panelVisible;
        }
        set
        {
          _panelVisible = value;
          RaisePropertyChanged("PanelVisible");
        }
      }
    
      #endregion
    
      #region COMMANDS
    
      public ICommand ChangePanelVisibility { get; set; }
    
      #endregion
    
      #region CONSTRUCTORS
    
      public ViewModel()
      {
        ChangePanelVisibility = new GalaSoft.MvvmLight.Command.RelayCommand(Execute);
      }
    
      #endregion
    
      #region METHODS
    
      private void Execute()
      {
        PanelVisible = !PanelVisible;
      }
    
      #endregion
    }
    
    

     

    In this example, I used MVVMLight, a framework to get started in the MVVM pattern. You can find more info here .

    Hope it helps!


    Sergio Garrido. Mi Blog
    Thursday, March 10, 2011 7:05 PM