Custom flat checkbox in WPF
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
Thanks!