none
Checkbox Control Template - changing check color and size RRS feed

  • Question

  • Hi,

    By editing the template, I have enlarged the rectangle where the check mark resides.

    However, I want to have the check mark be larger, it is still showing the default size.  I also want the check to be green.

    Can somebody point me to the correct properties?


    Thanks!


    Jordan
    Friday, March 6, 2009 3:14 AM

Answers

  • The check mark is a Path in the ControlTemplate of CheckBox. So if you want to change the size of check mark and modify it color, you could edit the template of CheckBox.
    For example:
    XAML:
    <Window x:Class="_temple.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" Height="300" Width="300"
        <Grid> 
            <CheckBox Width="100" Height="50"
                <CheckBox.Template> 
                    <ControlTemplate   
                     TargetType="{x:Type CheckBox}"
                        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                Background="{TemplateBinding Background}"
                            <Grid> 
                                <!-- ContentPresenter displays content of CheckBox --> 
                                <ContentPresenter 
                    Content="{TemplateBinding Content}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Margin="{TemplateBinding Padding}" 
                    HorizontalAlignment="{TemplateBinding  
                                            HorizontalContentAlignment}" 
                    VerticalAlignment="{TemplateBinding 
                                            VerticalContentAlignment}" /> 
                                <!-- This Border displays a semi-transparent red X --> 
                                <Border> 
                                    <Border.Background> 
                                        <VisualBrush Opacity="0.5"
                                            <VisualBrush.Visual> 
                                                <Path Name="path" 
                                      Data="M 0 0 L 10 10 M 10 0 L 0 10" 
                                      Stroke="Red"  
                                      StrokeStartLineCap="Round" 
                                      StrokeEndLineCap="Round" 
                                      StrokeLineJoin="Round" /> 
                                            </VisualBrush.Visual> 
                                        </VisualBrush> 
                                    </Border.Background> 
                                </Border> 
                            </Grid> 
                        </Border> 
                        <ControlTemplate.Triggers> 
                            <Trigger Property="IsChecked" Value="True"
                                <Setter TargetName="path" 
                    Property="Data" 
                    Value="M 0 5 L 3 10 10 0" /> 
                                <Setter TargetName="path" 
                    Property="Stroke" 
                    Value="Green" /> 
                            </Trigger> 
                            <Trigger Property="IsChecked" Value="{x:Null}"
                                <Setter TargetName="path" 
                    Property="Data" 
                    Value="M 0 2.5 A 5 2.5 0 1 1 5 5  
                           L 5 8 M 5 10 L 5 10" /> 
                                <Setter TargetName="path" 
                    Property="Stroke" 
                    Value="Blue" /> 
                            </Trigger> 
                            <Trigger Property="IsEnabled" Value="False"
                                <Setter Property="Foreground"  
                    Value="{DynamicResource 
                       {x:Static SystemColors.GrayTextBrushKey}}" /> 
                            </Trigger> 
                        </ControlTemplate.Triggers> 
                    </ControlTemplate> 
                </CheckBox.Template> 
            </CheckBox> 
        </Grid> 
    </Window> 
     

    For more information about using tmplates to customize WPF controls, you can refer to this article:
    Using Templates to Customize WPF Controls
    • Proposed as answer by Tao Liang Monday, March 9, 2009 6:22 AM
    • Marked as answer by Tao Liang Tuesday, March 10, 2009 5:56 AM
    Monday, March 9, 2009 6:22 AM