Last active
September 22, 2020 15:31
-
-
Save smailliwcs/ce474ea2790b589272bb496a359d368f to your computer and use it in GitHub Desktop.
Pixel-perfect WPF forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> | |
<Style TargetType="CheckBox"> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="{x:Type CheckBox}"> | |
<Border Padding="0,6,0,5"> | |
<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> | |
</Border> | |
<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> | |
<Style TargetType="RadioButton"> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="{x:Type RadioButton}"> | |
<Border Padding="0,6,0,5"> | |
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="Auto"/> | |
<ColumnDefinition Width="*"/> | |
</Grid.ColumnDefinitions> | |
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> | |
<Grid x:Name="markGrid" Margin="2"> | |
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" 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> | |
</Border> | |
<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="radioButtonBorder" Value="#FFF3F9FF"/> | |
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/> | |
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/> | |
</Trigger> | |
<Trigger Property="IsEnabled" Value="False"> | |
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/> | |
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/> | |
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/> | |
</Trigger> | |
<Trigger Property="IsPressed" Value="True"> | |
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/> | |
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/> | |
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/> | |
</Trigger> | |
<Trigger Property="IsChecked" Value="True"> | |
<Setter Property="Opacity" TargetName="optionMark" Value="1"/> | |
</Trigger> | |
<Trigger Property="IsChecked" Value="{x:Null}"> | |
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/> | |
</Trigger> | |
</ControlTemplate.Triggers> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
<Style TargetType="TextBox"> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="{x:Type TextBoxBase}"> | |
<Border Padding="0,2"> | |
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="2" SnapsToDevicePixels="True"> | |
<ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/> | |
</Border> | |
</Border> | |
<ControlTemplate.Triggers> | |
<Trigger Property="IsEnabled" Value="False"> | |
<Setter Property="Opacity" TargetName="border" Value="0.56"/> | |
</Trigger> | |
<Trigger Property="IsMouseOver" Value="True"> | |
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/> | |
</Trigger> | |
<Trigger Property="IsKeyboardFocused" Value="True"> | |
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/> | |
</Trigger> | |
</ControlTemplate.Triggers> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
</Application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Window x:Class="MainWindow" | |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | |
Height="300" | |
Title="Test" | |
Width="400"> | |
<StackPanel Margin="10"> | |
<Label>Test</Label> | |
<TextBox>Test</TextBox> | |
<CheckBox>Test</CheckBox> | |
<RadioButton>Test</RadioButton> | |
<StackPanel Orientation="Horizontal"> | |
<Label>Test</Label> | |
<TextBox>Test</TextBox> | |
</StackPanel> | |
<StackPanel Orientation="Horizontal"> | |
<CheckBox Margin="0,0,5,0">Test</CheckBox> | |
<TextBox>Test</TextBox> | |
</StackPanel> | |
<StackPanel Orientation="Horizontal"> | |
<CheckBox Margin="0,0,5,0">Test</CheckBox> | |
<TextBox>Test</TextBox> | |
<Label>Test</Label> | |
</StackPanel> | |
<StackPanel Orientation="Horizontal"> | |
<RadioButton Margin="0,0,5,0">Test</RadioButton> | |
<TextBox>Test</TextBox> | |
</StackPanel> | |
<StackPanel Orientation="Horizontal"> | |
<RadioButton Margin="0,0,5,0">Test</RadioButton> | |
<TextBox>Test</TextBox> | |
<Label>Test</Label> | |
</StackPanel> | |
</StackPanel> | |
</Window> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment