WPF Expander control - Transformed Header width issue

Question

I have a WPF Expander control palced inside an ItemsControl with ExpandDirection set to Right. Also I have customized the Header Control (ToggleButton) to get the following look and feel. enter image description here

I wanted the header content to be placed vertically from bottom to top. So I applied RenderTransform property to the ToggleButton and this is what I got: enter image description here

The height of the header should be same as that of Data Grid. So I set the width of the toggle button to be as the height of the Data Grid.

Right now the width of the toggle button will be the height (as I have rotated the toggle button), there by leaving a big gap between the two Expanders when they are in Collapsed mode. enter image description here

NOTE: The portion bordered with rose color is the actual width of the Expander. How should I reduce the width of the header without compromising the requirement

Edit : Adding XAML style

<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>

ShayD ShayD · Accepted Answer · 2014-10-30T06:18:09

2

votes

Instead of using a render transform, use a layout transform.

WPF Expander control - Transformed Header width issue

1 Answers