Question

I have created a checkbox in WPF it works but looks really ugly the tick in the box is very jagged. I have tried to set the RenderOptions.EdgeMode to aliased but that hasn’t fixed it, am I missing something?

the code is as follows:

<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />        
        <Setter Property="Foreground" Value="{StaticResource FGBrush}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Grid Width="12" Height="12" MinHeight="{DynamicResource ResourceKey=MinimumIteractSizeDips}"
                                        MinWidth="{DynamicResource ResourceKey=MinimumIteractSizeDips}" 
                                  SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased">

                                <Border x:Name="Border" 
                                        BitmapEffect="{StaticResource DropShadow}"
                                        MinHeight="{DynamicResource ResourceKey=MinimumIteractSizeDips}"
                                        MinWidth="{DynamicResource ResourceKey=MinimumIteractSizeDips}"
                                        CornerRadius="0" 
                                        Background="{StaticResource GreyGradientBrush}"
                                        BorderThickness="1"
                                        BorderBrush="{StaticResource NormalBorderBrush}" RenderOptions.EdgeMode="Aliased">

                                    <!--<Path Stretch="Fill"
                                              Margin="3"
                                                x:Name="CheckMark"
                                    SnapsToDevicePixels="False" 
                                    Stroke="{StaticResource GlyphBrush}"
                                    StrokeThickness="3"
                                    Fill="{DynamicResource GlyphBrush}"
                                          RenderOptions.EdgeMode="Aliased"
                                    Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z" />-->


                                    <Path Stretch="Fill"
                                              Margin="3"
                                                x:Name="CheckMark"
                                    SnapsToDevicePixels="False" 
                                    Stroke="{StaticResource GlyphBrush}"
                                    StrokeThickness="3"
                                    Fill="{DynamicResource GlyphBrush}"
                                          RenderOptions.EdgeMode="Aliased"
                                    Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z" />

                                </Border>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <ContentPresenter Margin="4,0,0,0"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                RecognizesAccessKey="True"/>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <!--<Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter TargetName="CheckMark" Property="Data" Value="M 0 7 L 7 0" />
                        </Trigger>-->
                        <Trigger Property="IsMouseOver" Value="true">
                            <Trigger.EnterActions>
                                <BeginStoryboard Name="HighlightAnim">
                                    <Storyboard TargetName="Border" TargetProperty="Opacity" >
                                        <DoubleAnimation To="0.5" Duration="00:00:00.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="HighlightAnim"/>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

If I had to guess I would say it has something to do with all the decimals in your Path object, or perhaps the fact it’s Stretch=Fill

This is the default CheckBox Path

<Path Visibility="Collapsed"
      Width="7"
      Height="7"
      x:Name="CheckMark"
      SnapsToDevicePixels="False"
      StrokeThickness="2"
      Data="M 0 0 L 7 7 M 0 7 L 7 0">
      <Path.Stroke>
           <SolidColorBrush Color="{DynamicResource GlyphColor}" />
      </Path.Stroke>
 </Path>

And this is your Path

<Path Stretch="Fill"
      Margin="3"
      x:Name="CheckMark"
      SnapsToDevicePixels="False" 
      Stroke="{StaticResource GlyphBrush}"
      StrokeThickness="3"
      Fill="{DynamicResource GlyphBrush}"
      RenderOptions.EdgeMode="Aliased"
      Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z" />

I would suggest altering properties one at a time to change your version to the MSDN version, and see which one fixes the issue. I am guessing it’s Path.Data, but it could be one of the other properties as well.