如何在群盒头中换行文本

为了使文本内容自动换行，您必须指定width，否则textblock的长度将自动设置为文本块中的内容长度。

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

虽然通过显式指定值或与另一个元素绑定来设置标题宽度的解决方案非常有效，但深入研究GroupBox的默认样式，我发现对样式进行小修改将解决这个问题。

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

这个问题的根本原因是Grid的第2个ColumnDefinition的Width="Auto"。因此，删除ColumnDefinition，使标题的边界被分配到原来的第3个ColumnDefinition。然后将HorizontalAlignment="Left"添加到头部的边界。对ColumnSpan进行一些简单的编辑。就是这样。

这个修改后的样式让WPF的布局引擎根据GroupBox的实际宽度自动确定标题的宽度。不需要每次都关心宽度。据我所知，与默认值相比，没有明显的降级。