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

Question

我在ItemsControl内放置了一个WPF Expander控件，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

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