如何完成Expander模板？

Question

在我尝试学习更多关于WPF的出价时，我一直在寻找一些控件的样式，我希望有人能帮助我做一些动画。

我一直在尝试做的是使用一个Expander，让它动态地展开/折叠，并在鼠标悬停时自动执行此操作。

我已经找到了太多的网站分别说明这些技术，但我正在努力将它们结合起来，并希望有人能帮助我完成。目前我不能让动画工作，也不确定为什么。

Animation

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，以便它获得您想要的“折叠”效果。当然，问题是扩展器按钮没有正确对齐，在视觉上我肯定这不是你想要的，但你所要做的就是从Microsoft Expander Style and Templates page中抓取扩展器模板并覆盖你需要的特定部分。

如果你仍然有问题，请在这里发表后续文章，我会亲自为你尝试一下。