WPF-如何將擴展器圖標放在其標題的中心？

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：

右擊你在設計窗口（不是在XAML代碼），然後 「編輯模板...」和元素「編輯複製...」

我們發現在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相關的代碼確定的圖標（=內網格）的位置，所以我們需要改變他們和內的行分配210和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>