Kontrolka GroupBox

Kontrolka GroupBox pozwala na wizualne zgrupowanie zestawu kontrolek w logiczną całość. Oczywiście można to również uzyskać za pomocą paneli, ale GroupBox ma dedykowany tytuł i obramowanie oraz jest kontrolką, która w przeszłości była często używana w systemie operacyjnym Windows. Zobacz na poniższym zrzucie ekranu, jak kontrolka GroupBox może wyglądać:

Zwróć uwagę na obramowanie dookoła kontrolki oraz na tytuł "GroupBox Sample", który jest umieszczony wewnątrz tego obramowania - w ten sposób GroupBox wygląda i funkcjonuje. W celu użycia tej kontrolki wystarczy po prostu dodać odpowiedni znacznik do kodu swojego okna, wpisując jakiś tytuł do parametru Header:

<GroupBox Header="GroupBox Sample">

</GroupBox>

GroupBox może zawierać tylko jeden podrzędny element, ale to nie jest problem - wstaw kontrolkę typu Panel, do której dodasz wiele swoich kontrolek - tak jak w powyższym przykładzie, gdzie zostało utworzone okno dialogowe do dodawania nowego użytkownika. Poniżej znajduje się pełny kod XAML do tego przykładu:

<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 z niestandardowym nagłówkiem

Domyślnie tytuł kontrolki GroupBox jest zwykłym, niesformatowanym tekstem, ale być może chciałbyś go potraktować z większą fantazją? Nie ma problemu, ponieważ tak jak prawie wszystko we frameworku WPF, możesz podmienić ten tekst jedną lub wieloma innymi kontrolkami. Możesz zatem dodać kontrolkę TextBlock, a następnie zmienić jej formatowanie, na przykład kolor tekstu. Możesz nawet dodać swój obrazek, jeśli chcesz, tak jak to zrobiłem w poniższym przykładzie:

Teraz mamy obrazek i pogrubiony tekst w tytule kontrolki i jest to takie łatwe do zrobienia:

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

Zauważ, jak łatwo podmieniliśmy parametr Header znacznikiem GroupBox.Header, który zawiera StackPanel z obrazkiem i kontrolką TextBlock - dzięki temu masz pełną kontrolę, jak tytuł będzie wyglądał!

Podsumowanie

Kontrolka GroupBox łatwo zgrupuje powiązane ze sobą inne kontrolki, szczególnie pasując przy tym wizualnie do wyglądu systemu operacyjnego Windows.