如何完成 Expander 模板？

Question

为了尝试更多地了解 WPF，我一直在研究一些控件样式，并且希望有人可以帮助我制作一些动画。

我一直在尝试做的是获取一个扩展器，使其具有展开/折叠的动画效果，并在鼠标悬停时自动执行此操作。

我发现网站也分别说明了这些技术，但我正在努力将它们结合起来，并希望有人可以帮助我完成。目前我无法让动画正常工作，也不知道为什么。

动画
自动扩展

I我已经将大部分动画样式简化为更简单的内容，因为我不需要复杂的示例来学习。

<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，以便它获得您想要的“折叠”效果重新之后。当然，问题是扩展器按钮没有正确对齐，从视觉上看我确信这不完全是您想要的，但您所要做的就是从 Microsoft Expander 样式和模板页面 并覆盖您指定的特定位 需要。

如果您仍然遇到问题，请在此处发布后续内容，我会亲自为您解决。