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>