WPF 入门教程GroupBox 控件

1 年前

技术社区

GroupBox 控件将允许您直观地将一组控件组合在一起。这显然也可以使用许多面板中的一个来完成，但是 GroupBox 添加了一种特殊类型的标题和边框，这在历史上在 Windows 操作系统中被大量使用。下面是使用 GroupBox 控件时它的外观的屏幕截图：

注意控件周围的边框，文本“GroupBox Sample”放置在边框线内 - 这就是 GroupBox 的外观和行为方式。使用 GroupBox 就像将标签添加到您的 Window 并在 Header 属性中写入一些相关内容一样简单：

<GroupBox Header="GroupBox Sample">
</GroupBox>

GroupBox 只能包含一个子元素，但这没问题——只需将这个控件设置为面板，您就可以自由地向面板添加多个控件，例如创建一个类似于上面显示的对话框。这是我的示例对话框的完整 XAML 代码清单：

<Window x:Class="WpfTutorialSamples.Misc_controls.GroupBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Misc_controls"
    mc:Ignorable="d"
    Title="GroupBoxSample" Height="220" Width="300">
    <GroupBox Header="GroupBox Sample" Margin="10" Padding="10">
        <StackPanel>
        <TextBlock>First name:</TextBlock>
        <TextBox />
        <TextBlock>Last name:</TextBlock>
        <TextBox />
        <Button Margin="0,20">Add User</Button>
        </StackPanel>
    </GroupBox>
    </Grid>
</Window>

带有自定义标题的 GroupBox

GroupBox 的标题通常只是普通的、未格式化的文本，但也许您想让它更花哨一些？没问题，因为就像 WPF 框架中的几乎所有内容一样，您可以只用一个或多个其他控件替换文本。因此，您只需添加一个 TextBlock 控件，然后更改格式，例如文本的颜色。如果愿意，您甚至可以添加图像，就像我在下一个示例中所做的那样：

现在 Header 有一个图像和粗体文本，这很容易做到：

<Window x:Class="WpfTutorialSamples.Misc_controls.GroupBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfTutorialSamples.Misc_controls"
    mc:Ignorable="d"
    Title="GroupBoxSample" Height="220" Width="300">
    <GroupBox Margin="10" Padding="10">
        <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
            <Image Source="/WpfTutorialSamples;component/Images/group.png" Margin="3,0" />
            <TextBlock FontWeight="Bold">GroupBox Sample</TextBlock>
        </StackPanel>
        </GroupBox.Header>
        <StackPanel>
        <TextBlock>First name:</TextBlock>
        <TextBox />
        <TextBlock>Last name:</TextBlock>
        <TextBox />
        <Button Margin="0,20">Add User</Button>
        </StackPanel>
    </GroupBox>
    </Grid>
</Window>

请注意我是如何简单地用 GroupBox.Header 标记替换 Header 属性，然后该标记托管一个 StackPanel 以包含一个 Image 和一个 TextBlock - 有了它，您就可以完全控制 Header 的外观！

默认情况下，标题与GroupBox标题保持左对齐。但是，在您的情况下，您希望保留很少的部分，而希望保留的很少部分是正确的，因此您需要覆盖groupBox标头的ControlTemplate，如此处和此处定义。

但是，您可以强制Grid to stretch horizontally，以便将按钮放置在右侧。但是，正如您在快照中看到的那样，边框线会隐藏标题内容，因此您可能会得到以下内容：

<GroupBox Margin="5" x:Name="groupBox"
          xmlns:local="clr-namespace:NamespaceOfConverter">
    <GroupBox.Resources>
        <local:SubtractionConverter x:Key="SubtractionConverter"/>
    </GroupBox.Resources>
    <GroupBox.Header>
        <Grid Width="{Binding ActualWidth, ElementName=groupBox,
                      Converter={StaticResource SubtractionConverter}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15"></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <CheckBox Grid.Column="0"/>
            <TextBlock Grid.Column="1" Margin="5,0,5,0"
                       Text="This is my groupbox"/>
            <Button Content="Click" FontSize="8" Background="Yellow"
                    HorizontalAlignment="Right" Grid.Column="2"
                    Height="16" Width="54"/>
        </Grid>
    </GroupBox.Header>
</GroupBox>

转换器

public class SubtractionConverter : IValueConverter
    public object Convert(object value, Type targetType, object parameter,
                          System.Globalization.CultureInfo culture)
        return (double)value - 25.0;
    public object ConvertBack(object value, Type targetType, object parameter,