Как закончить шаблон Expander?

Question

В моей попытке попробовать больше узнать о WPF я рассмотрел некоторые стили элементов управления и надеюсь, что кто-нибудь сможет мне помочь с анимацией.

То, что я пытался сделать, это взять Expander, сделать его анимированным, развернуть / свернуть и сделать это автоматически при наведении курсора мыши.

Я также нашел сайты, иллюстрирующие эти техники по отдельности, но я изо всех сил пытаюсь объединить их и надеюсь, что кто-то может помочь мне прикончить. На данный момент я не могу заставить анимацию работать и не знаю почему.

Анимация
AutoExpansion

Я сократил большинство стилей анимации до чего-то более простого, поскольку мне не нужен сложный пример для обучения.

<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

Используйте триггер стиля. Ну вот:

<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>

Answer 2

Это очень простой пример того, что вы пытаетесь сделать:

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="boolToVis" />
</Window.Resources>

<Grid>
    <Expander Name="theExpander">
        <Expander.Header>
            <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
                <TextBlock Text="Foo" />
                <TextBlock Text="Bar" Visibility="{Binding ElementName=theExpander, Path=IsExpanded, Converter={StaticResource boolToVis}}" VerticalAlignment="Top" />
                <TextBlock Text="Baz" />
            </StackPanel>
        </Expander.Header>
    </Expander>
</Grid>

Очевидно, что он не идеален, но я использую его, чтобы проиллюстрировать, как вы можете связать видимость объекта с IsExpanded, чтобы получить эффект "свертывания", который вам нужен. Проблема, конечно, в том, что кнопка расширителя не выровнена должным образом и визуально я уверен, что это не совсем то, что вам нужно, но все, что вам нужно сделать, это взять шаблон Expander со страницы стиля и шаблонов Microsoft Expander и переопределить конкретный бит, который вам нужен.

Если у вас все еще есть проблемы, опубликуйте здесь продолжение, и я сам попробую.