How to create a custom control with both an enabled and disabled visual state and a content presenter.

Answer 1

Hi,

In WPF it's very easy to change the appearance and behaviour of (standard)controls. In this case you can use a checkbox as a starting point.

First make a copy of the control's template:

"img43.imageshack.us/img43/1694/36338162.png"

You will see the folowing:

"img194.imageshack.us/img194/374/89409336.png"

Now group the BulletDecorator into a Grid, move then ContentPresenter to that Grid and remove the BulletDecorator and ist children.

"img9.imageshack.us/img9/7739/74247109.png"

At this point you have a checkbox like control that only has a ContentPresenter.

Now you can use the trigger tab to set is behaviour.

"http://img43.imageshack.us/img43/3675/15279262.png"

The code:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480" mc:Ignorable="d">

<Window.Resources>
 <SolidColorBrush x:Key="CheckBoxFillNormal" Color="#F4F4F4"/>
 <SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>
 <Style x:Key="EmptyCheckBoxFocusVisual">
  <Setter Property="Control.Template">
   <Setter.Value>
    <ControlTemplate>
     <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="1" SnapsToDevicePixels="true"/>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
 <Style x:Key="CheckRadioFocusVisual">
  <Setter Property="Control.Template">
   <Setter.Value>
    <ControlTemplate>
     <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="14,0,0,0" SnapsToDevicePixels="true"/>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
 <Style x:Key="CheckBoxStyle1" 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}">
     <Grid x:Name="grid" Width="64.42" Height="15.96">
      <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="13,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
     </Grid>
     <ControlTemplate.Triggers>
      <Trigger Property="IsEnabled" Value="false">
       <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="False">
       <Setter Property="Background" TargetName="grid" Value="#FF07FF00"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="True">
       <Setter Property="Background" TargetName="grid" Value="Red"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="{x:Null}">
       <Setter Property="Background" Value="#FFFFDD00"/>
       <Setter Property="Background" TargetName="grid" Value="#FFFFF400"/>
      </Trigger>
     </ControlTemplate.Triggers>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
 <CheckBox HorizontalAlignment="Left" Margin="117,72,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True"/>
 <CheckBox HorizontalAlignment="Left" Margin="117,91.96,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True" IsChecked="{x:Null}"/>
 <CheckBox HorizontalAlignment="Left" Margin="117,111.92,0,0" Style="{DynamicResource CheckBoxStyle1}" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True" IsChecked="True"/>
 <CheckBox HorizontalAlignment="Left" Margin="209,72,0,0" VerticalAlignment="Top" Content="CheckBox" IsThreeState="True"/>
 <CheckBox HorizontalAlignment="Left" Margin="209,92.96,0,0" VerticalAlignment="Top" Content="CheckBox" IsChecked="{x:Null}" IsThreeState="True"/>
 <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top" Content="CheckBox" Margin="209,111.92,0,0" IsThreeState="True" IsChecked="True"/>
</Grid>

Was this any help to you?

Greetings, Carl