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

而不是使用渲染變換，使用佈局轉換。