Styling the indeterminate state of a WPF checkbox

Question

I want to style the indeterminate state of a WPF checkbox. We have a treeview control with checkboxes, and we want the indeterminate state to represent that some descendants are checked and some are unchecked.

The solution I'm seeing everywhere is to override the default control template for a checkbox and do what I need to do.

I have two problems with that:

1. I can't find the control template for a normal Aero checkbox. This one: http://msdn.microsoft.com/en-us/library/ms752319.aspx looks goofy.

2. The control template I get from Expression Blend has that BulletChrome element in it, and I can't figure out what to do with that.

So does anyone know where to get a checkbox control template that looks "normal" or is there an easier way to just style the indeterminate state by itself?

I'm sure there's an easy way I'm just overlooking... Right?

Answer 1

Try this (modified from the article that publicgk linked to)

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <Style x:Key="CheckRadioFocusVisual">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle Margin="14,0,0,0"
                       StrokeThickness="1"
                       Stroke="Black"
                       StrokeDashArray="1 2"
                       SnapsToDevicePixels="true"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Style x:Key="EmptyCheckBoxFocusVisual">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
            <Rectangle Margin="1"
                       StrokeThickness="1"
                       Stroke="Black"
                       StrokeDashArray="1 2"
                       SnapsToDevicePixels="true"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <SolidColorBrush x:Key="CheckBoxFillNormal"
                     Color="#F4F4F4"/>
    <SolidColorBrush x:Key="CheckBoxStroke"
                     Color="#8E8F8F"/>
    <Style x:Key="{x:Type CheckBox}"
         TargetType="{x:Type CheckBox}">
      <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
      <Setter Property="Background"
            Value="{StaticResource CheckBoxFillNormal}"/>
      <Setter Property="BorderBrush"
            Value="{StaticResource CheckBoxStroke}"/>
      <Setter Property="BorderThickness"
            Value="1"/>
      <Setter Property="FocusVisualStyle"
            Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type CheckBox}">
            <BulletDecorator Background="Transparent" 
                             SnapsToDevicePixels="true">
              <BulletDecorator.Bullet>
                <theme:BulletChrome Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    RenderMouseOver="{TemplateBinding IsMouseOver}"
                                    RenderPressed="{TemplateBinding IsPressed}"
                                    IsChecked="{TemplateBinding IsChecked}"/>
              </BulletDecorator.Bullet>
              <ContentPresenter Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                RecognizesAccessKey="True"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </BulletDecorator>
            <ControlTemplate.Triggers>
              <Trigger Property="IsChecked" 
                       Value="{x:Null}">
                <!-- TODO: Do Stuff Here -->
              </Trigger>
              <Trigger Property="HasContent"
                       Value="true">
                <Setter Property="FocusVisualStyle"
                        Value="{StaticResource CheckRadioFocusVisual}"/>
                <Setter Property="Padding"
                        Value="4,0,0,0"/>
              </Trigger>
              <Trigger Property="IsEnabled"
                       Value="false">
                <Setter Property="Foreground"
                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <StackPanel>
    <CheckBox IsChecked="True" Content="Checked"/>
    <CheckBox IsChecked="{x:Null}" Content="Unknown"/>
    <CheckBox IsChecked="False" Content="Not Checked"/>
  </StackPanel>
</Window>

Answer 2

Have you already tried to download the Aero Theme xaml and looked into it?
Where can I download Microsoft's standard WPF themes from?

Answer 3

You can use CheckBox styling from the classic theme located at:

• C:\Program Files (x86)\Microsoft Expression\Blend 4\SystemThemes\Wpf\classic.xaml

This implementation has a Path representing the checkbox mark called CheckMarkPath. I simply replaced this Path with a filled Rectangle to get these results: