WPF-如何将 Expander 图标放置在其页眉的中央？

Question

请看下面的代码：

<Window x:Class="WpfTest.Test2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Test2" Height="300" Width="400">
    <Grid>
        <DockPanel LastChildFill="true">
            <Expander DockPanel.Dock="Left" Header="" Background="#E2FFD6"
                      HorizontalAlignment="Left" VerticalAlignment="Stretch"
                      ExpandDirection="Left" IsExpanded="True" Height="Auto">
                <StackPanel>
                    <Button Content=" open some tabs and show a messagebox "/>
                    <Button Content="do something else"/>
                </StackPanel>
            </Expander>
            <TabControl HorizontalAlignment="Stretch">
                <!-- some tabs here -->
            </TabControl>
        </DockPanel>
    </Grid>
</Window>

结果是：

如图所示，这看起来不太好，我想将扩展器图标移到页眉的中央。我怎样才能做到这一点？我尝试更改 HeaderTemplate，但并未影响图标位置。

Answer 1

此行为在模板中进行了硬编码。当我们 edit a copy:

Rightclick your element in the designer window (not in the Xaml-Code), then "Edit Template..." and "Edit a Copy..."

我们在ExpanderLeftHeaderStyle

中找到相关代码

<Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Padding="{TemplateBinding Padding}">
                    <Grid Background="Transparent" SnapsToDevicePixels="False">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="19"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid>
                            <Grid.LayoutTransform>
                                ...
                            </Grid.LayoutTransform>
                            <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
                            <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
                        </Grid>
                        <ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

RowDefinitions 决定图标的位置（= 内部网格），因此我们需要相应地更改它们以及内部 Grid 和 ContentPresenter 的行分配：

<Border Padding="{TemplateBinding Padding}">
    <Grid Background="Transparent" SnapsToDevicePixels="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="19"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <Grid.LayoutTransform>
                ...
            </Grid.LayoutTransform>
            <Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
            <Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
        </Grid>
        <ContentPresenter Grid.Row="2" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
    </Grid>
</Border>

WPF-如何将 Expander 图标放置在其页眉的中央？

WPF- How to place the Expander icon at the center of its header?

c#

wpf

expander