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:

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!