TOC

This article is currently in the process of being translated into Vietnamese (~39% done).

Misc. controls:

The GroupBox control

The GroupBox control will allow you to visually group a set of controls together. This could obviously be done using one of the many panels as well, but the GroupBox adds a special type of header and border, which has historically been used a lot within in the Windows operating system. Here's a screenshot of how it might look when you use the GroupBox control:

Notice the border around the controls, with the text "GroupBox Sample" placed inside the border line - this is how a GroupBox looks and acts. Using a GroupBox is as simple as adding the tag to your Window and writing something relevant in the Header property:

<GroupBox Header="GroupBox Sample">

</GroupBox>

The GroupBox can only contain a single child element, but that's no problem - just make this one control a Panel, and you are free to add multiple controls to the panel, e.g. to create a dialog like the one displayed above. Here's the full XAML code listing for my example dialog:

<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">
    <Grid>
<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 with custom Header

Header của một GroupBox thường chỉ là ký tự bình thường không thể có định dạng. Nếu bạn muốn làm cho nó lạ hơn một chút, cũng có cách thực hiện được. Trong WPF framework, bạn có thể thay thế ký tự bằng một hoặc nhiều control (điều khiển) khác. Do đó bạn có thể thêm TexBlock và thay đổi định dạng, như màu của ký tự. Bạn cũng có thể thêm hình ảnh như tôi đã làm trong ví dụ kế tiếp:

Bây giờ header có một hình ảnh và ký tự với chữ đậm. Việc nầy đã được thực hiện một cách dễ dàng:

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

Notice how I have simply replaced the Header property with a GroupBox.Header tag, which then hosts a StackPanel to contain an Image and a TextBlock - with that in place, you have full control of how the Header should look!

Summary

Có thể sử dụng GroupBox của WPF để tạo nhóm (grouping) các control (điều khiển) có liên quan một cách dễ dàng, tạo nên một giao diện mà ta thường nhìn thấy ở hệ điều hành Microsoft Windows.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!