Question

In my bid to try and learn some more about WPF I’ve been looking at some styling of controls, and I’m hoping someone can help me with some animation.

What I’ve been trying to do is to take an Expander, make it animate it’s expand/collapse and to do this automatically on mouseover.

I’ve found too websites illustrating these techniques separately but I’m struggling to combine them and hoping someone can help me finish off. At the moment I can’t get the animation working and am not sure why.

Animation
AutoExpansion

I’ve stripped down much of the animation styling to something more simple, as I don’t need the complex example for learning.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480">
    <Page.Resources>
        <Style x:Key="ExpanderHeaderFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle SnapsToDevicePixels="true" Margin="0" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">
            <Setter Property="Foreground" Value="Transparent"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="Timeline1">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:0.25" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:0.25" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="Timeline2">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.45" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:0.45" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Border x:Name="border" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                            <DockPanel>
                                <ContentPresenter FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" 
                                                        Visibility="Visible" 
                                                        Margin="{TemplateBinding Padding}" 
                                                        Focusable="False" 
                                                        x:Name="HeaderSite" 
                                                        Content="{TemplateBinding Header}" 
                                                        ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                                        ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
                                                        DockPanel.Dock="Top"/>
                                <ContentPresenter Focusable="false" 
                                                            Visibility="Collapsed" 
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                            Margin="{TemplateBinding Padding}" 
                                                            x:Name="ExpandSite" 
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                                            DockPanel.Dock="Bottom">
                                    <ContentPresenter.LayoutTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="0"/>
                                            <SkewTransform AngleX="0" AngleY="0"/>
                                            <RotateTransform Angle="0"/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </ContentPresenter.LayoutTransform>
                                </ContentPresenter>
                            </DockPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource Timeline2}"/>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="ExpandDirection" Value="Up">
                                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
                                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <Expander HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red" BorderBrush="Green" Width="100" Header="" x:Name="expander" Style="{DynamicResource ExpanderStyle1}" IsExpanded="True">
            <ListBox IsSynchronizedWithCurrentItem="True" x:Name="listBox">
                <ListBoxItem Content="ListBoxItem"/>
                <ListBoxItem Content="ListBoxItem"/>
                <ListBoxItem Content="ListBoxItem"/>
            </ListBox>
        </Expander>
    </Grid>
</Page>

Answer 1

Use a Style trigger. Here you go:

<Expander>
    <Expander.Style>
        <Style>
            <Setter Property="Background" Value="Green" />
            <Style.Triggers>
                <Trigger Property="Expander.IsMouseOver" Value="True">
                    <Setter Property="Expander.IsExpanded" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Expander.Style>
    <Rectangle Width="100" Height="100" Fill="Red" Stroke="Black" />
</Expander>