1

I'm hiding/showing a stackpanel with an animation using a Togglebutton defining this animation as follows:

<StackPanel Orientation="Horizontal">
<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" >
    <ToggleButton.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Checked">
            <BeginStoryboard>
                <Storyboard x:Name="HideGrid">
                    <DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="0" To="520" Duration="0:0:0.3">
                        <DoubleAnimation.EasingFunction>
                            <PowerEase EasingMode="EaseIn"></PowerEase>
                         </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
            <BeginStoryboard>
                <Storyboard x:Name="ShowGrid">
                    <DoubleAnimation Storyboard.TargetName="stackPanelName" Storyboard.TargetProperty="Height" From="520" To="0" Duration="0:0:0.3">
                        <DoubleAnimation.EasingFunction>
                            <PowerEase EasingMode="EaseIn"></PowerEase>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </ToggleButton.Triggers>
</ToggleButton>
<TextBlock Margin="4">Show/Hide</TextBlock>
</StackPanel>

This is the stackpanel to which Storyboard.TargetName="stackPanelName" is referencing:

<StackPanel x:Name="stackPanelName">
    <StackPanel Orientation="Horizontal" Margin="8">
        <TextBlock Width="160">Name</TextBlock>
        <TextBox Width="148" Margin="0,0,16,0" Text="{Binding Name}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="8">
        <TextBlock Width="160">Surname</TextBlock>
        <TextBox  Width="148" Margin="0,0,16,0" Text="{Binding  Surname}"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="8">
        <TextBlock Width="160">Phone number</TextBlock>
        <TextBox  Width="148" Margin="0,0,16,0" Text="{Binding PhoneNumber}"/>
    </StackPanel>                   
</StackPanel>

This works perfectly, but i have to use this kind of togglebutton in several places and i'd like not to put <ToggleButton.Triggers>...</ToggleButton.Triggers> again and again for each togglebutton i have to use.

So i'm trying to define a template in a style...something like this:

<Style TargetType="{x:Type ToggleButton}" x:Key="tgButtonStyle1">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ToggleButton">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="2" Background="{TemplateBinding Background}" Storyboard.TargetName="{TemplateBinding Name}">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard>
                        <Storyboard x:Name="HideStackPanel">                                        
                            <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="0" To="320" Duration="0:0:0.3">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="5"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard x:Name="ShowStackPanel">                              
                            <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" Storyboard.TargetProperty="Height" From="320" To="0" Duration="0:0:0.3">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="6"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

And then:

<ToggleButton Width="48" Height="24" Margin="0,0,0,4" HorizontalAlignment="Left" FontFamily="Marlett" Content="6" Style="{Binding tgButtonStyle1}" Storyboard.TargetName="stackPanelName">

The key here is that in the trigger at <DoubleAnimation Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}" ....> i'm using a templatebinding thinking that it would "catch" the value specified at <ToggleButton.... Storyboard.TargetName="stackPanelName" .../>. But it has no effect at all, no animation.

What am i doing wrong? Is there something left to do?

Thanks.

dem
  • 11
  • 1
  • Do you get any errors in the output window when you press the `ToggleButton`? – XAMlMAX Sep 14 '17 at 10:18
  • I've looked at the output window and... yes, i've got this error: System.Windows.Data Error: 40 : BindingExpression path error: 'tgButtonStyle1' property not found on 'object' ''ContactInfoParamsVM' (HashCode=6049320)'. BindingExpression:Path=tgButtonStyle1; DataItem='ContactInfoParamsVM' (HashCode=6049320); target element is 'ToggleButton' (Name=''); target property is 'Style' (type 'Style') I've changed the Style at ToggleButton to `Style="{StaticResource tgButtonStyle1}"` and then i get a XamlParseException. I'm going to look into that. Thanks – dem Sep 14 '17 at 13:05
  • I've deleted from the style `Storyboard.TargetName="{TemplateBinding Storyboard.TargetName}"`and then there is no exception, so the problem is just there as i feared. – dem Sep 14 '17 at 13:10
  • Have you tried placing a converter in that binding and see what value is being passed? – XAMlMAX Sep 14 '17 at 13:12
  • I tried but got still the same exception. Looking deeper into the exception i saw at InnerException: "Cannot freeze this Storyboard timeline tree for use across threads templatebinding". Researching on google for this [it seems that there cannot be any binding in a template](https://stackoverflow.com/a/1669802/5789543) So i have to change my strategy. – dem Sep 15 '17 at 11:29

0 Answers0