Question

I’m trying to animate a user control (in WPF) using it’s visibility as a trigger. I’m not sure what I’m doing wrong, but it doesn’t seem to do anything DX (forgive me, I’m new to this).

This is what I have in my MainWindow.xaml:

<local:toolbarDiscPlayback x:Name="Main_toolbarDisc" Grid.Row="2" Visibility="Collapsed" Style="{DynamicResource toolbarStyle}"/>

And in my code behind, I have a click event that changes the visibility of the user control:

Main_toolbarDisc.Visibility = Visibility.Visible;

Which works all well and good, however it’s not animating like I (hope I) tell it to in my resource dictionary:

<Style x:Key="toolbarStyle" TargetType="{x:Type VALR:toolbarDiscPlayback}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type VALR:toolbarDiscPlayback}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True" RenderTransformOrigin="0.5,0.5">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform Y="0"/>
                        </TransformGroup>
                    </Border.RenderTransform>
                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>

        </Setter.Value>
    </Setter>

<Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                    From="150" To="0"
                    DecelerationRatio="0.5"
                    Duration="00:00:01.000"/>
                </Storyboard>
            </BeginStoryboard>
        </Trigger.EnterActions>
    </Trigger>
</Style.Triggers>

</Style>

As you’ll note, I’ve only done this for the animate-in or ‘become visible’ so far. I’m pretty positive I’m just doing something silly, or not doing it the right way.

Answer 1

That is because your RenderTransform is configured for the Border and not for your actual local:toolbarDiscPlayback

This change should suffice…

<Style x:Key="toolbarStyle"
    TargetType="{x:Type VALR:toolbarDiscPlayback}">
    <Setter Property="RenderTransform">
            <Setter.Value>
                 <TranslateTransform/>
            </Setter.Value>
    </Setter>         
    <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate 
                 TargetType="{x:Type VALR:toolbarDiscPlayback}">
             <Border BorderBrush="{TemplateBinding BorderBrush}"
                     ... >                      
                  <ContentPresenter .... />
             </Border>
         </ControlTemplate>
       <Setter.Value>
    </Setter>
    <Style.Triggers> 
        ...
    </Style.Triggers> 
 </Style>