WPF扩展器控制 - 转换标头宽度问题

Question

我有一个WPF扩展控件在ItemsControl内，ExpandDirection设置为Right。此外，我还定制了标题控件（ToggleButton）以获得以下外观和感觉。

我希望标题内容从下到上垂直放置。所以我申请RenderTransform属性为ToggleButton，这是我得到了什么：

页眉的高度应该是相同的数据网格。所以我将切换按钮的宽度设置为数据网格的高度。

现在切换按钮的宽度将会是高度（因为我已经旋转了切换按钮），因此当两个Expanders处于折叠模式时，它们之间留有很大差距。

注意：与玫瑰色接壤的部分是扩展器的实际宽度。我应该如何减少头部的宽度，而不会损害要求

编辑：添加XAML风格

<Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}"> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> 
     <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}"> 
        <Border Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          CornerRadius="3" 
          SnapsToDevicePixels="true"> 
         <DockPanel> 
          <ToggleButton x:Name="HeaderSite" 
              Height="50" 
              MinHeight="0" 
              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
              Content="{TemplateBinding Header}" 
              ContentTemplate="{TemplateBinding HeaderTemplate}" 
              ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" 
              DockPanel.Dock="Top" 
              FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" 
              FontFamily="{TemplateBinding FontFamily}" 
              FontSize="{TemplateBinding FontSize}" 
              FontStretch="{TemplateBinding FontStretch}" 
              FontStyle="{TemplateBinding FontStyle}" 
              FontWeight="{TemplateBinding FontWeight}" 
              Foreground="{TemplateBinding Foreground}" 
              IsChecked="{Binding IsExpanded, 
                   Mode=TwoWay, 
                   RelativeSource={RelativeSource TemplatedParent}}" 
              Padding="{TemplateBinding Padding}" 
              RenderTransformOrigin="0.5,0.5" 
              Style="{StaticResource ExpanderDownHeaderStyle}" 
              Template="{StaticResource ExpanderButtonTemplate}"> 
           <ToggleButton.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform /> 
             <SkewTransform /> 
             <RotateTransform Angle="-90" /> 
             <TranslateTransform /> 
            </TransformGroup> 
           </ToggleButton.RenderTransform> 
          </ToggleButton> 

          <ContentPresenter x:Name="ExpandSite" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               DockPanel.Dock="Bottom" 
               Focusable="false" 
               Visibility="Collapsed" /> 
         </DockPanel> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsExpanded" Value="true"> 
          <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" /> 

         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Right"> 
          <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Right" /> 
          <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Left" /> 
          <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderRightHeaderStyle}" /> 
         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Up"> 
          <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Top" /> 
          <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Bottom" /> 
          <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderUpHeaderStyle}" /> 
         </Trigger> 
         <Trigger Property="ExpandDirection" Value="Left"> 
          <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Left" /> 
          <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Right" /> 
          <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderLeftHeaderStyle}" /> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 1

而不是使用渲染变换，使用布局转换。