Best practice to pipe WPF animation trigger from one ControlTemplate element to another

Question

After reading several SO posts (here, here, and here) I still can't find any way to solve my problem... Basically, I redefined Button layout, and packed it up in a style. The new Button ControlTemplate contains a Rectangle I want to animate on Button click. Which TargetProperty do I have to use in my animation? Following is what I done :

UserControl x:Class="OfficeTourismeBrantome.Views.MainMenuView"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="800" d:DesignWidth="300">
<UserControl.Resources>
    <Style x:Key="MenuItemButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="35" />
        <Setter Property="FontFamily" Value="Segoe" />
        <Setter Property="Foreground" Value="#FFEBEDEA" />
        <!--<Setter Property="Height" Value="{Binding MenuLayout.MenuItemSize.Height}" />-->
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">                        
                        <Canvas HorizontalAlignment="Stretch">
                            <ContentPresenter Canvas.Left="{Binding MenuLayout.MenuItemLeftMargin}" HorizontalAlignment="Center"                                                  
                                          VerticalAlignment="Center"/>
                        <Rectangle
                            Name="test"
                            Width="0"
                            Height="3"
                            Fill="Aqua"/>
                    </Canvas>                            
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                <!-- Which targetProperty should I use to animate ControlTemplate Rectangle ?-->
                                From="0.0" 
                                To="10.0" 
                                Duration="0:0:2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>                    
            </EventTrigger>
        </Style.Triggers>
    </Style>        
</UserControl.Resources>
<ItemsControl Name="menuButtonContainer" ItemsSource="{Binding Items}" Margin="{Binding MenuLayout.MenuMargin}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>        
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button 
                Style="{StaticResource ResourceKey=MenuItemButtonStyle}" 
                Margin="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.MenuLayout.MenuItemMargin}"                    
                Height="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.MenuLayout.MenuItemSize.Height}"
                Content="{Binding Text}"
                Command="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.ChangeThemeCommand}"
                CommandParameter="{Binding Id}"
                />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I may be wrong in my implementation, still trying to understand WPF subtilities... What's the best way to achieve my goal?

Many thanks for your answers !

"*Which TargetProperty do I have to use in my animation?*" that depends on what kind of animation you want to achieve — har07, Feb 20 '14 at 10:28

franssu · Accepted Answer · 2014-02-20T13:14:53.373

0

Which target property you want to animate is the question you have to ask yourself ! Do you want to change the rectangle's Width ? Its Opacity ? ...

Best practice... I don't know, but that's one way to do it :

<ControlTemplate TargetType="Button">
[...]
   <ControlTemplate.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
             <BeginStoryboard>
                 <Storyboard TargetName="test" TargetProperty="Width">
                    <DoubleAnimation From="0.0" To="10.0" Duration="0:0:2" />
                  </Storyboard>
             </BeginStoryboard>
          </EventTrigger.Actions>
      </EventTrigger>
   </ControlTemplate.Triggers>

edited Feb 20 '14 at 13:14

answered Feb 20 '14 at 09:48

franssu

2,422
1
20
29

Sorry, I want to animate width ;). But over the property itself, it's the best practice I'm looking for. How can I access to the rectangle inside the ControlTemplate. Thanks ! – nbonniot Feb 20 '14 at 11:10
Thanks again franssu. Works perfect ! I feel a bit lost sometimes with WPF endless nesting capabilities. So all was about the place to put the animation. Cheers ! – nbonniot Feb 20 '14 at 14:03

Best practice to pipe WPF animation trigger from one ControlTemplate element to another

1 Answers1