Question

如何在GroupBox标题中包装文本？这段代码不起作用。

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

Answer 1

为了包含文本内容，您必须指定width，其他方面是textblock自动设置为文本块中内容的长度。

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

Answer 2

在通过显式指定值或与其他元素绑定来设置标题宽度的解决方案完美工作时，深入研究了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>

此问题的根本原因是网格第二列定义的Width="Auto"。因此，删除ColumnDefinition，以便将标题的Border分配给原始的第3 ColumnDefinition。然后将HorizontalAlignment="Left"添加到标题的边框。 ColumnSpan的一些简单编辑。就是这样。

此修改后的样式使WPF的布局引擎可以根据GroupBox的实际宽度自动确定页眉的宽度。无需每次都关心宽度。据我所知，默认值没有明显的下降。

如何在GroupBox标题中包装文本？

2 个答案: