WPF: CheckBox as GroupBox Header

ByMel

WPF: CheckBox as GroupBox Header

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">
        </textbox></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!

About the author

Mel administrator

9 Comments so far

MelPosted on2:26 pm - May 23, 2014

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

miliuPosted on3:00 pm - May 12, 2014

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. 

MrozuPosted on4:19 am - Feb 10, 2014

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

OliverUvPosted on6:50 am - Oct 26, 2011

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

DanPosted on4:24 pm - Apr 5, 2011

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

ninoPosted on7:19 am - Jan 10, 2011

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

    MelPosted on11:59 am - Jan 10, 2011

    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 🙂

Zack PittmanPosted on11:34 am - Nov 3, 2010

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!

Lee SmithPosted on8:04 am - Mar 22, 2010

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.