Mike Hillberg's Blog on Wpf (.Net and Silverlight)

Here, the light gray italicized boxes are un-checked, and the un-italicized black letters with a gray background are checked.  (So before capturing this screenshot, I had checked the read-only and archive bits on the “readme.txt” file.)   This image doesn’t show it, but there’s also a tooltip for each CheckBox that shows the full name of the attribute.

Here’s the ControlTemplate for the CheckBox:

<ControlTemplate TargetType="CheckBox">

  <Border BorderThickness="{TemplateBinding BorderThickness}"

          BorderBrush="Gray" Background="LightGray" Padding="2"

          Name="_border" >

    <Grid Margin="1">

      <TextBlock Text="{TemplateBinding Content}"

                 FontStyle="Italic"

                 Foreground="LightGray"/>

      <TextBlock Text="{TemplateBinding Content}"

                 Name="_checkedTextBlock" />

    </Grid>

  </Border>

  <ControlTemplate.Triggers>

    <Trigger Property="IsChecked" Value="False">

      <Setter TargetName="_checkedTextBlock"

              Property="Opacity" Value="0" />

      <Setter TargetName="_border"

              Property="Background" Value="Transparent" />

    </Trigger>

  </ControlTemplate.Triggers>

</ControlTemplate>

The interesting thing here is that I created two TextBlocks to show the content of the CheckBox (e.g. the “R” for the read-only attribute CheckBox).  The first one shows the content in “unchecked” form, and the second one shows it in “checked” form.  The Trigger then picks which one shows up.  I had started with a single TextBlock, and had the Trigger set the FontStyle and Foreground.  The problem with this is that the italicized text is slightly wider than the normal text, and that caused the checkboxes to jiggle a little bit when you click on them.  There’s probably other ways to solve this, but a simple solution was to have both TextBlocks there and taking up space in layout, and then let the Trigger decide which one wins for render.

And here’s a full template with sample usage, again with some of the more interesting parts highlighted.  (I changed the trigger so that instead of a Setter to update the Background when IsChecked changes, it animates the change.)

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Grid>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="Auto" />

    </Grid.ColumnDefinitions>

    <Grid.Resources>

      <!-- Implicit style to be applied to all CheckBoxs in this Window

           (this sets the new template) -->

      <Style TargetType="CheckBox">

        <Setter Property="BorderThickness" Value="1,0,0,0" />

        <Setter Property="Template">

          <Setter.Value>

            <ControlTemplate TargetType="CheckBox">

              <Border BorderThickness="{TemplateBinding BorderThickness}"

                      BorderBrush="Gray" Background="LightGray" Padding="2"

                      Name="_border" >

                <Grid Margin="1">

                  <TextBlock Text="{TemplateBinding Content}"

                             FontStyle="Italic"

                             Foreground="LightGray"/>

                  <TextBlock Text="{TemplateBinding Content}"

                             Name="_checkedTextBlock" />

                </Grid>

              </Border>

              <ControlTemplate.Triggers>