Dark CheckBox Style

In diesem Beitrag soll ein einfacher Style für das WPF-Steuerelement CheckBox vorgestellt werden. Dabei wurde ein dunkles Farbschema gewählt, welches ideal zu dunklen Fensterhintergründen passt. Der Style verhilft den Checkboxen zu folgendem Aussehen:

darkcheckboxstyle

Der dazugehörige XAML-Code sieht folgendermaßen aus:


<Style TargetType="CheckBox">
	<Setter Property="SnapsToDevicePixels" Value="true"/>
	<Setter Property="OverridesDefaultStyle" Value="true"/>
	<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
	<Setter Property="Foreground" Value="White"/>
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="CheckBox">
				<BulletDecorator Background="Transparent">
					<BulletDecorator.Bullet>
						<Border x:Name="Border" Width="15" Height="15" CornerRadius="2" Background="#FF1B1B1B" BorderThickness="0">
							<Path Width="9" Height="9" x:Name="CheckMark" SnapsToDevicePixels="False" Stroke="#FF0077C9" StrokeThickness="2" Data="M 0 4 L 3 8 8 0" />
						</Border>
					</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 8 L 8 0" />
					</Trigger>
					<Trigger Property="IsMouseOver" Value="true">
						<Setter TargetName="Border" Property="Background" Value="#FF131313" />
					</Trigger>
					<Trigger Property="IsEnabled" Value="false">
						<Setter TargetName="CheckMark" Property="Stroke" Value="#FF6C6C6C"/>
						<Setter Property="Foreground" Value="Gray"/>
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

 

Wer mehr über Styles in WPF und deren Einbindung erfahren möchte, kann sich hier ausführlich darüber informieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.