Modern software trends

Custom flat checkbox in WPF

Code post

Here is the simple way to make your checkbox look nice using metro look flat and fully customized

<Style TargetType="CheckBox">
        <Setter Property="SnapsToDevicePixels" Value="False" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="BorderBrush" Value="SkyBlue" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <BulletDecorator Background="Transparent">
                        <BulletDecorator.Bullet>
                            <Border x:Name="Border"
                                    Width="20"
                                    Height="20"
                                    Background="DarkGray"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="1"
                                    ClipToBounds="True">
                                <Path x:Name="CheckMark"
                                      Width="12"
                                      Height="12"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Data="M27.903015,0L32,4.0970465 12.369019,23.728029 11.685974,24.520998 0,14.441042 3.7819824,10.054994 11.330017,16.567019z"
                                      Fill="#FF54F7FF"
                                      Stretch="Fill"
                                      Stroke="#FF54F7FF"
                                      StrokeEndLineCap="Round"
                                      StrokeStartLineCap="Round"
                                      StrokeThickness="1" />
                            </Border>
                        </BulletDecorator.Bullet>
                        <ContentPresenter Margin="4,0,0,0"
                                          HorizontalAlignment="Left"
                                          VerticalAlignment="Center"
                                          RecognizesAccessKey="True" />
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed" />
                        </Trigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="BorderBrush" Value="White" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="BorderBrush" Value="Gray" />
                            <Setter TargetName="CheckMark" Property="Stroke" Value="Gray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Post a Comment

0 Comments