WPF replace checkmark from original checkbox

10.2k views Asked by At

I'm trying to replace the checkmark of the standard WPF checkbox by my own checkmark (actually a Path). The checkbox should look like the standard one.

Where can I find the Microsoft xaml template of the checkbox, so I could modify it in the xaml? Or is there an more elegant way of doing this?

Note: I found already a template on MSDN ( http://msdn.microsoft.com/en-us/library/ms752319%28v=vs.110%29.aspx ), but it looks completely different.

Regards, BlackTuareg

3

There are 3 answers

6
Heena On BEST ANSWER

Step1 : Please Open New Project and Write Down Checkbox tag.

<Window x:Class="WpfApplication8.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">

<CheckBox Height="30" Width="200" Content="CheckBoxContent"></CheckBox>

</Window>

Designer View will look

enter image description here


Step 2: In Designer view ----Right click on CheckBox ->Edit Template->Edit A Copy

enter image description here

Step 3: Give name to style ->select resource window/checkobx ->okenter image description here

and Finally you can change/replace path by changing path in x:Name="markGrid"

   <Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
               ---------------------------                
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type CheckBox}">
                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">


                                <!-- Change Path here-->
                                <Grid x:Name="markGrid">
                                    <Path x:Name="optionMark" Data="F1M9.97498,1.22334L4.6983,9.09834 4.52164,9.09834 0,5.19331 1.27664,3.52165 4.255,6.08833 8.33331,1.52588E-05 9.97498,1.22334z" Fill="#FF212121" Margin="1" Opacity="0" Stretch="None"/>
                                    <Rectangle x:Name="indeterminateMark" Fill="#FF212121" Margin="2" Opacity="0"/>
                                </Grid>


                            </Border>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>                                                             
                            <Trigger Property="IsChecked" Value="True">

                              -----------------------------------------

                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}">

                             ---------------------------------------

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Upadte :

<Window.Resources>
    <Style TargetType="{x:Type CheckBox}">
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#FF707070"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="markGrid">
                                <Path x:Name="optionMark" Data="F1M9.97498,1.22334L4.6983,9.09834 4.52164,9.09834 0,5.19331 1.27664,3.52165 4.255,6.08833 8.33331,1.52588E-05 9.97498,1.22334z" Fill="#FF212121" Margin="1" Opacity="0" Stretch="None"/>
                                <Rectangle x:Name="indeterminateMark" Fill="#FF212121" Margin="2" Opacity="0"/>
                            </Grid>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="True">
                            <Setter Property="FocusVisualStyle">
                                <Setter.Value>
                                    <Style>
                                        <Setter Property="Control.Template">
                                            <Setter.Value>
                                                <ControlTemplate>
                                                    <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Padding" Value="4,-1,0,0"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFF3F9FF"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FF5593FF"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF212121"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFE6E6E6"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FFBCBCBC"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF707070"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="checkBoxBorder" Value="#FFD9ECFF"/>
                            <Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#FF3C77DD"/>
                            <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
                            <Setter Property="Fill" TargetName="indeterminateMark" Value="#FF212121"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Opacity" TargetName="optionMark" Value="0"/>
                            <Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>


<Grid>
    <CheckBox Height="40" Width="200" Content="ok"></CheckBox>
</Grid>
0
Sinatr On

The linked template is simply some random template. It's not default CheckBox template.

You can easily extract templates yourself (see here for a full source, the page is in Russian, but code with English comments):

// get all control types
Type typeControl = typeof(Control);
List<Type> myTypes = new List<Type>();
Assembly assembly = Assembly.GetAssembly(typeof(Control));
foreach (Type type in assembly.GetTypes())
{
    if (type.IsSubclassOf(typeControl) && !type.IsAbstract && type.IsPublic)
        myTypes.Add(type);
}

Then for any specific type

// Instantiate the type.
ConstructorInfo info = type.GetConstructor(System.Type.EmptyTypes);
Control control = (Control)info.Invoke(null);

// Get the template.
ControlTemplate template = control.Template;

// Get the XAML for the template.
XmlWriterSettings settings = new XmlWriterSettings();
settings.Indent = true;
StringBuilder sb = new StringBuilder();
XmlWriter writer = XmlWriter.Create(sb, settings);
XamlWriter.Save(template, writer);

// Display the template.
someControl.Text = sb.ToString();

Here is my CheckBox template:

<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate TargetType="CheckBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <BulletDecorator Background="#00FFFFFF" SnapsToDevicePixels="True">
        <BulletDecorator.Bullet>
            <mwt:BulletChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" IsChecked="{TemplateBinding ToggleButton.IsChecked}" />
        </BulletDecorator.Bullet>
        <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
    </BulletDecorator>
    <ControlTemplate.Triggers>
        <Trigger Property="ContentControl.HasContent">
            <Setter Property="FrameworkElement.FocusVisualStyle">
                <Setter.Value>
                    <Style TargetType="IFrameworkInputElement">
                        <Style.Resources>
                            <ResourceDictionary />
                        </Style.Resources>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2" Margin="14,0,0,0" SnapsToDevicePixels="True" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Control.Padding">
                <Setter.Value>
                    <Thickness>4,0,0,0</Thickness>
                </Setter.Value>
            </Setter>
            <Trigger.Value>
                <s:Boolean>True</s:Boolean>
            </Trigger.Value>
        </Trigger>
        <Trigger Property="UIElement.IsEnabled">
            <Setter Property="TextElement.Foreground">
                <Setter.Value>
                    <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                </Setter.Value>
            </Setter>
            <Trigger.Value>
                <s:Boolean>False</s:Boolean>
            </Trigger.Value>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
0
toadflakz On

There are tools that extract the original XAML templates from System.Windows.Controls but ultimately, it's down to you as Microsoft as far as I know provide that anywhere. You will need to redefine the entire CheckBox template to achieve what you want.

There are a few websites that list the reflected source code for the .NET Framework assemblies that you could try for an original "generic.xaml" file.