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

I'm new to making custom WPF controls so I'd really appreciate a little help and some explanation. Here's the situation:

I'm trying to make a custom control with the following traits:

• The control must have a content presenter.
• The control must have either a disabled/enabled visual state, or be tri-state, (unstarted/inprogress/finished)
• The control should if possible have support for an animation based on the state (enabled/disabled)

Ideally I'd like something that I can stack nicely like this, so any suggestions for how to do this would be 开发者_开发技巧appreciated.

I am using Blend 3 if anyone wants me to use VSM stuff, but I have no experience with the blend 3 extension so I'd need a little guidance and explanation if possible. Thank you all of your time!

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