Export (0) Print
Expand All

CheckBox Styles and Templates

Silverlight

This topic discusses the default ControlTemplate for the CheckBox control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

The CheckBox control does not have any named parts.

The following table lists the visual states for the CheckBox control.

VisualState Name

VisualStateGroup Name

Description

Normal

CommonStates

The default state.

MouseOver

CommonStates

The mouse pointer is positioned over the control.

Pressed

CommonStates

The control is pressed.

Disabled

CommonStates

The control is disabled.

Focused

FocusStates

IsFocused is true.

Unfocused

FocusStates

IsFocused is false.

Checked

CheckStates

IsChecked is true.

Unchecked

CheckStates

IsChecked is false.

Indeterminate

CheckStates

IsThreeState is true, and IsChecked is null.

Valid

ValidationStates

The control is valid.

InvalidUnfocused

ValidationStates

The control is not valid and does not have focus.

InvalidFocused

ValidationStates

The control is not valid and has focus.

The following shows the XML namespace mapping that you have to specify when you work with styles and templates.

<!-- XML Namespace mapping. -->
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
NoteNote:

The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping.

The following XAML shows the default style and template for the CheckBox control.


<Style TargetType="CheckBox">
      <Setter Property="Background" Value="#FF448DCA"/>
      <Setter Property="Foreground" Value="#FF000000"/>
      <Setter Property="HorizontalContentAlignment" Value="Left"/>
      <Setter Property="VerticalContentAlignment" Value="Top"/>
      <Setter Property="Padding" Value="4,1,0,0"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="BorderBrush">
          <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FFA3AEB9" Offset="0"/>
                  <GradientStop Color="#FF8399A9" Offset="0.375"/>
                  <GradientStop Color="#FF718597" Offset="0.375"/>
                  <GradientStop Color="#FF617584" Offset="1"/>
              </LinearGradientBrush>
          </Setter.Value>
      </Setter>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="CheckBox">
                  <Grid>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="16"/>
                          <ColumnDefinition Width="*"/>
                      </Grid.ColumnDefinitions>
                      <vsm:VisualStateManager.VisualStateGroups>
                          <vsm:VisualStateGroup x:Name="CommonStates">
                              <vsm:VisualState x:Name="Normal"/>
                              <vsm:VisualState x:Name="MouseOver">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                      <DoubleAnimation Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#7FFFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#CCFFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#F2FFFFFF"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Pressed">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                      <DoubleAnimation Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#6BFFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#C6FFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#EAFFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#F4FFFFFF"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Duration="0" To="#FF6DBDD1"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="0" To="#FF6DBDD1"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="0" To="#FF6DBDD1"/>
                                      <ColorAnimation Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Duration="0" To="#FF6DBDD1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Disabled">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To=".55"/>
                                      <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="0.55"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="CheckStates">
                              <vsm:VisualState x:Name="Checked">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unchecked"/>
                              <vsm:VisualState x:Name="Indeterminate">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To="1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="FocusStates">
                              <vsm:VisualState x:Name="Focused">
                                  <Storyboard>
                                      <DoubleAnimation Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="Unfocused" />
                          </vsm:VisualStateGroup>
                          <vsm:VisualStateGroup x:Name="ValidationStates">
                              <vsm:VisualState x:Name="Valid"/>
                              <vsm:VisualState x:Name="InvalidUnfocused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                              <vsm:VisualState x:Name="InvalidFocused">
                                  <Storyboard>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <Visibility>Visible</Visibility>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                          <DiscreteObjectKeyFrame KeyTime="0" >
                                              <DiscreteObjectKeyFrame.Value>
                                                  <sys:Boolean>True</sys:Boolean>
                                              </DiscreteObjectKeyFrame.Value>
                                          </DiscreteObjectKeyFrame>
                                      </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                              </vsm:VisualState>
                          </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                          <Rectangle x:Name="Background" Width="14" Height="14" RadiusX="1" RadiusY="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="#FFFFFFFF" Margin="1"/>
                          <Rectangle x:Name="BackgroundOverlay" Fill="#FFC4DBEE" Opacity="0" Width="14" Height="14" RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1" Stroke="#00000000"/>
                          <Rectangle x:Name="BoxMiddleBackground" Width="10" Height="10" RadiusX="1" RadiusY="1" Fill="{TemplateBinding Background}" Stroke="#00000000" StrokeThickness="1"/>
                          <Rectangle x:Name="BoxMiddle" Width="10" Height="10" RadiusX="1" RadiusY="1" StrokeThickness="1" >
                              <Rectangle.Stroke>
                                  <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                                      <GradientStop Color="#FFFFFFFF" Offset="1"/>
                                      <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                      <GradientStop Color="#FFFFFFFF" Offset="0.375"/>
                                      <GradientStop Color="#FFFFFFFF" Offset="0.375"/>
                                  </LinearGradientBrush>
                              </Rectangle.Stroke>
                              <Rectangle.Fill>
                                  <LinearGradientBrush StartPoint="0.62,0.15" EndPoint="0.64,0.88">
                                      <GradientStop Color="#FFFFFFFF" Offset="0.013" />
                                      <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                      <GradientStop Color="#EAFFFFFF" Offset="0.603" />
                                      <GradientStop Color="#D8FFFFFF" Offset="1" />
                                  </LinearGradientBrush>
                              </Rectangle.Fill>
                          </Rectangle>
                          <Rectangle x:Name="BoxMiddleLine" Width="10" Height="10" RadiusX="1" RadiusY="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" Opacity=".2"/>
                          <Path x:Name="CheckIcon" Margin="1,1,0,1.5" Fill="#FF333333" Stretch="Fill" Opacity="0" Width="10.5" Height="10" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028,595.74304 110.21724,593.60419 C112.00967,591.35822 114.89314,591.42316 114.89314,591.42316 C114.89314,591.42316 112.67844,593.42645 111.93174,594.44464 C110.7449,596.06293 107.15683,604.13837 107.15683,604.13837 z" FlowDirection="LeftToRight"/>
                          <Rectangle x:Name="IndeterminateIcon" Height="2" Fill="#FF333333" Opacity="0" Width="6"/>
                          <Rectangle x:Name="DisabledVisualElement" RadiusX="1" RadiusY="1" Width="14" Height="14" Opacity="0" Fill="#FFFFFFFF"/>
                          <Rectangle x:Name="ContentFocusVisualElement" RadiusX="2" RadiusY="2" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" Width="16" Height="16" />

                          <Border x:Name="ValidationErrorElement" Margin="1" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed"
                                  ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                              <ToolTipService.ToolTip>
                                  <ToolTip x:Name="validationTooltip" 
                                       Template="{StaticResource ValidationToolTipTemplate}"
                                       DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                                       Placement="Right" 
                                       PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                      <ToolTip.Triggers>
                                          <EventTrigger RoutedEvent="Canvas.Loaded">
                                              <EventTrigger.Actions>
                                                  <BeginStoryboard>
                                                      <Storyboard>
                                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                              <DiscreteObjectKeyFrame KeyTime="0" >
                                                                  <DiscreteObjectKeyFrame.Value>
                                                                      <sys:Boolean>true</sys:Boolean>
                                                                  </DiscreteObjectKeyFrame.Value>
                                                              </DiscreteObjectKeyFrame>
                                                          </ObjectAnimationUsingKeyFrames>
                                                      </Storyboard>
                                                  </BeginStoryboard>
                                              </EventTrigger.Actions>
                                          </EventTrigger>
                                      </ToolTip.Triggers>
                                  </ToolTip>
                              </ToolTipService.ToolTip>
                              <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                                  <Path Margin="0,3,0,0" Data="M 1,0 L5,0 A 2,2 90 0 1 7,2 L7,6 z" Fill="#FFDC000C"/>
                                  <Path Margin="0,3,0,0" Data="M 0,0 L2,0 L 7,5 L7,7" Fill="#ffffff"/>
                              </Grid>
                          </Border>

                      </Grid>
                      <ContentPresenter
                              Grid.Column="1"
                              x:Name="contentPresenter"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Margin="{TemplateBinding Padding}"/>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>


The default ControlTemplate for CheckBox references the ControlTemplate for ValidationTooltip. The following XAML shows the ControlTemplate for ValidationTooltip that you must specify when you work with the CheckBox control template:


<ControlTemplate x:Key="ValidationToolTipTemplate">
      <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
          <Grid.RenderTransform>
              <TranslateTransform x:Name="xform" X="-25"/>
          </Grid.RenderTransform>
          <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup Name="OpenStates">
                  <vsm:VisualStateGroup.Transitions>
                      <vsm:VisualTransition GeneratedDuration="0"/>
                      <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                          <Storyboard>
                              <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                  <DoubleAnimation.EasingFunction>
                                      <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                  </DoubleAnimation.EasingFunction>
                              </DoubleAnimation>
                              <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                          </Storyboard>
                      </vsm:VisualTransition>
                  </vsm:VisualStateGroup.Transitions>
                  <vsm:VisualState x:Name="Closed">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
                  <vsm:VisualState x:Name="Open">
                      <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
                          <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                      </Storyboard>
                  </vsm:VisualState>
              </vsm:VisualStateGroup>
          </vsm:VisualStateManager.VisualStateGroups>

          <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
          <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
          <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
          <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>

          <Border Background="#FFDC000C" CornerRadius="2"/>
          <Border CornerRadius="2">
              <TextBlock 
                  UseLayoutRounding="false" 
                  Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
          </Border>
      </Grid>
  </ControlTemplate>


Community Additions

ADD
Show:
© 2014 Microsoft