如何完成扩展器模板？答案

【问题标题】：How to finish off Expander template?如何完成扩展器模板？
【发布时间】：2011-06-17 14:22:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： wpf styles expander

【解决方案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>

【讨论】：

我可能遗漏了一些东西，但如果我尝试将它添加到模板中，它就不起作用。如果我添加到扩展器本身，我会得到“样式属性已在扩展器上设置”。
一定要放在Expander上。如果你得到“已经设置”，那么这意味着你可能有冲突。只需将您的样式业务移动到旁边的

【解决方案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 获取扩展器模板并覆盖特定位你需要。

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

【讨论】：