WPF GroupBox

In yesterday’s discussion on RadioButtons, I mentioned it would be a good idea to give a visual cue to the users that certain buttons were associated with each other. The GroupBox is one such way of doing that.

Let’s go back to the RadioButton example from yesterday. You’d think all that’s needed is to surround our sets of radio buttons with the <GroupBox> tags. Unfortunately, the GroupBox can only have one child in it’s content, hence the need to insert a StackPanel, Grid, or other container control.

  <StackPanel>

    <GroupBox>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </GroupBox>

    <GroupBox>

      <StackPanel>

        <RadioButton GroupName=Two IsChecked=False>Option 3</RadioButton>

        <RadioButton GroupName=Two IsChecked=True>Option 4</RadioButton>

      </StackPanel>

    </GroupBox>

  </StackPanel>

Produces

wpf046

If you look carefully, you can see thin lines surrounding each set of buttons. You can go further and add headers to the GroupBox frame.

  <GroupBox Header=Group One>

Adds a header to the first box.

wpf047

You can even go further, and add true content to the header area. Here we’ll add a button.

  <StackPanel>

    <GroupBox Header=Group One>

      <StackPanel>

        <RadioButton GroupName=One IsChecked=True>Option 1</RadioButton>

        <RadioButton GroupName=One IsChecked=False>Option 2</RadioButton>

      </StackPanel>

    </GroupBox>

    <GroupBox>

      <GroupBox.Header>

        <Button>Group Two</Button>

      </GroupBox.Header>

      <StackPanel>

        <RadioButton GroupName=Two IsChecked=False>Option 3</RadioButton>

        <RadioButton GroupName=Two IsChecked=True>Option 4</RadioButton>

      </StackPanel>

    </GroupBox>

  </StackPanel>

Gives us

wpf048

Using a GroupBox can be a simple but visually appealing way to organize your visual elements.

Advertisements