CODEWITHSUNDEEP
c#wpfxamlgroupbox
Nodon
Nodon

Reputation: 1027

How to wrap text in GroupBox header?

How to wrap text in GroupBox header? This code doesn't work.

<GroupBox>
<GroupBox.Header>
    <TextBlock Text="qwertyuiopasdfghjklqwertyuiopasdfghjkl" TextWrapping="Wrap"/>
</GroupBox.Header>

Upvotes: 3

Views: 2360

Answers (2)

emoacht
emoacht

Reputation: 3556

While the solution to set the header's width by explicitly specifying the value or binding with another element works perfectly, delving into the default style of GroupBox, I found that making small modifications into the style will solve this issue. 

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>

<Style TargetType="{x:Type GroupBox}">
    <Setter Property="BorderBrush" Value="#D5DFE5"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6"/>
                        <!-- <ColumnDefinition Width="Auto"/> is removed because its Width="Auto" is problematic. -->
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="6"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="6"/>
                    </Grid.RowDefinitions>
                    <!-- The value of Grid.ColumnSpan is changed from 4 to 3. -->
                    <Border Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3"
                            BorderBrush="Transparent"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="4"/>
                    <!-- The value of Grid.ColumnSpan is changed from 4 to 3. -->
                    <Border Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3"
                            BorderBrush="White"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="4">
                        <Border.OpacityMask>
                            <MultiBinding Converter="{StaticResource BorderGapMaskConverter}"
                                          ConverterParameter="7">
                                <Binding ElementName="Header" Path="ActualWidth"/>
                                <Binding RelativeSource="{RelativeSource Self}" Path="ActualWidth"/>
                                <Binding RelativeSource="{RelativeSource Self}" Path="ActualHeight"/>
                            </MultiBinding>
                        </Border.OpacityMask>
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="3">
                            <Border BorderBrush="White"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="2"/>
                        </Border>
                    </Border>
                    <!-- HorizontalAlignment="Left" is added to adjust the surrounding line. -->
                    <Border x:Name="Header"
                            Grid.Column="1" Grid.Row="0" Grid.RowSpan="2"
                            HorizontalAlignment="Left"
                            Padding="3,1,3,0">
                        <ContentPresenter ContentSource="Header"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <!-- Grid.ColumnSpan="2" is removed because it is no longer necessary. -->
                    <ContentPresenter Grid.Column="1" Grid.Row="2"
                                      Margin="{TemplateBinding Padding}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The root cause of this issue is Width="Auto" of the 2nd ColumnDefinition of Grid. So remove the ColumnDefinition so that the header's Border is assigned to the original 3rd ColumnDefinition. Then add HorizontalAlignment="Left" to the header's Border. Some trivial edits of ColumnSpan. That's it.

This modified style lets WPF's layout engine determine the header's width automatically depending on actual width of GroupBox. No need to care about the width each time. As far as I know, there is no noticeable degradation from the default one.

Upvotes: 0

sujith karivelil
sujith karivelil

Reputation: 29006

In-order to get the text content wrapped,You have to specify the width, other wise the with of the textblock automatically set to the length of content in the text block.

   <TextBlock Width="150" Text="qwertyuiopasdfghjklqwertyuiopasdfghjkl" TextWrapping="Wrap"/>

Upvotes: 2

Related Questions