WPF: CheckBox as GroupBox Header

August 7th, 2009 by Mel Leave a reply »

This is a followup post to the one I wrote on Enabling Controls with a CheckBox. In that post we created some XAML that would enable/disable controls in the GUI based on the IsChecked property of a checkbox.

Here’s an enhancement to that:

Checkbox as header for Groupbox

So what we’re doing is giving the controls on our dialog a nice visual grouping letting the user know that they’re associated. The GroupBox element has long existed to fulfill this need. However, with this little XAML change it also doubles as a sort of access control for the items it contains.

Here’s the XAML:

<GroupBox Padding="5" HorizontalAlignment="Stretch">
    <GroupBox.Header>
        <CheckBox x:Name="chkEnableBackup">Run Backup Sets</CheckBox>
    </GroupBox.Header>
 
    <StackPanel IsEnabled="{Binding ElementName=chkEnableBackup, Path=IsChecked}">
        <StackPanel Orientation="Horizontal">
            <Label Margin="12,0,0,0">Run backup every</Label>
            <ComboBox Width="70" SelectedIndex="0">
                <ComboBoxItem>Minute</ComboBoxItem>
                <ComboBoxItem>Hour</ComboBoxItem>
                <ComboBoxItem>Day</ComboBoxItem>
            </ComboBox>
        </StackPanel>
        <StackPanel Margin="12,10,0,0">
            <Label>Path to Backup:</Label>
            <TextBox Width="200" Margin="5,0,0,0"/>
        </StackPanel>
    </StackPanel>
</GroupBox>

So all we’ve done here is add the CheckBox to the <GroupBox.Header> element of the GroupBox. Pretty slick!

This little technique is complete UI Candy and in my opinion illustrates one of the many powerful features of WPF: the ability to customize the GUI in any way you want, down to any level!

Advertisement

9 comments

  1. Mel says:

    Yes, it is much better to bind IsEnabled on the StackPanel instead of each item. I’ve updated the post to reflect that. Thanks!

  2. miliu says:

    Thanks for sharing. Just wonder wouldn’t it be better if you move the enabling logic to the outer most stackpanel? That way, one IsEnabled is good enough, no matter how many controls you have inside the groupbox. 

  3. Mrozu says:

    Hi, thank you for great solution.
    However, wouldn’t be better to bind IsEnabled on StackPanel rather then on every control separately?
     
    Best regards

  4. OliverUv says:

    Here is a fix for the click miss problem (use Ray’s answer):
    http://stackoverflow.com/quest.....use-clicks 

  5. Dan says:

    The problem is not clicking in “certain parts” of the checkbox…  If you hover over the checkbox, it will not always realize that the mouse is over it (and turn blue), so the click goes no where… seems to happen 25%-50% of the time… you can move off of the checkbox and then back on and it will remedy…
    very strange wpf bug indeed.  I will have to find another way to do this….

  6. nino says:

    Have you noticed that if you click in certain parts of the checkbox, the click doesn’t work?
    It’s happening to me and wanted to know if this bug is only mine or WPF’s.
    Thanks

    • Mel says:

      Hey nino,

      No I haven’t experienced that. Perhaps you have another control or event handler interfering with the check. Try posting your problem and an stackoverflow.com with an excerpt of your code. Maybe they can help you 🙂

  7. Zack Pittman says:

    I was wrestling with this idea myself and was going down the route of a custom control but your article made the realization of the use of the content presenter in the header of the group box. Thanks so very much!

  8. Lee Smith says:

    Great article, just what I was looking for! Thanks!

Leave a Reply