Skip to content

Instantly share code, notes, and snippets.

@warappa
Last active October 31, 2022 15:24
Show Gist options
  • Save warappa/9a8810d8cc6ee2d96eee15af037c3321 to your computer and use it in GitHub Desktop.
Save warappa/9a8810d8cc6ee2d96eee15af037c3321 to your computer and use it in GitHub Desktop.
Overriding Styles in Xaml
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!-- base colors -->
<SolidColorBrush x:Key="buttonBackground" Color="#ff00ff"></SolidColorBrush>
<!-- base button style -->
<Style x:Key="baseButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="10,10,10,10"></Setter>
<Setter Property="Background" Value="{DynamicResource buttonBackground}"></Setter>
</Style>
<!-- automatically style all buttons -->
<Style TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
</Style>
<!-- Window style -->
<Style x:Key="window">
<Style.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="buttonBackground">Aqua</SolidColorBrush>
</ResourceDictionary>
</Style.Resources>
</Style>
<!-- normal primary button style -->
<Style x:Key="primaryButton" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
<Style.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="buttonBackground">Blue</SolidColorBrush>
</ResourceDictionary>
</Style.Resources>
</Style>
<!-- normal secondary button style -->
<Style x:Key="secondaryButton" TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
<Style.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="buttonBackground">#ffaaaa</SolidColorBrush>
</ResourceDictionary>
</Style.Resources>
</Style>
<!-- warning dialog with overrides -->
<Style x:Key="warning" TargetType="StackPanel">
<Setter Property="Margin" Value="10"></Setter>
<Setter Property="Background" Value="#ee7600"></Setter>
<Style.Resources>
<ResourceDictionary>
<!-- warning primary button style -->
<Style x:Key="primaryButton" TargetType="Button" BasedOn="{StaticResource primaryButton}">
<Style.Resources>
<SolidColorBrush x:Key="buttonBackground" Color="#660033"></SolidColorBrush>
</Style.Resources>
</Style>
<Style x:Key="secondaryButton" TargetType="Button" BasedOn="{StaticResource secondaryButton}">
<Style.Resources>
<SolidColorBrush x:Key="buttonBackground" Color="#aa0099"></SolidColorBrush>
</Style.Resources>
<Setter Property="Margin" Value="10,10,10,10"></Setter>
</Style>
</ResourceDictionary>
</Style.Resources>
</Style>
</Application.Resources>
</Application>
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
Style="{DynamicResource window}"
>
<StackPanel>
<Button Content="Normal Button"/>
<Button Style="{DynamicResource primaryButton}" Content="Normal Primary Button"/>
<Button Style="{DynamicResource secondaryButton}" Content="Normal Secondary Button"/>
<StackPanel
Style="{DynamicResource warning}"
>
<StackPanel.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="buttonBackground">Green</SolidColorBrush>
</ResourceDictionary>
</StackPanel.Resources>
<TextBlock><Run Text="Warning Message"/></TextBlock>
<Button Style="{DynamicResource primaryButton}" Content="Warning Primary Button"/>
<Button Style="{DynamicResource secondaryButton}" Content="Warning Secondary Button"/>
</StackPanel>
</StackPanel>
</Window>
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
xmlns:css="clr-namespace:XamlCSS;assembly=XamlCSS"
xmlns:cssWpf="clr-namespace:XamlCSS.WPF;assembly=XamlCSS.WPF"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
>
<Window.Resources>
<css:StyleSheet x:Key="cssstyle">
<css:StyleSheet.Content><![CDATA[
/*
To use XamlCSS:
1. Install nuget XamlCSS.WPF 2.0.0-pre1 (ensure enabling preview-packages!)
2. In App-constructor call XamlCss.WPF.Css.Initialize()
3. EMPTY App.Resources!
*/
/* default styles */
Button {
Background: #ff00ff;
&.primary {
Background: Blue;
}
&.secondary {
Background: #ffaaaa;
}
}
/* default window style */
Window {
Button: {
Background: Aqua;
}
}
/* styles in a warning dialog */
.warning {
Margin: 10;
Background: #ee7600;
Button {
&.primary {
Background: Orange;
}
&.secondary {
Background: #aa0099;
}
}
}
]]>
</css:StyleSheet.Content>
</css:StyleSheet>
</Window.Resources>
<StackPanel
cssWpf:Css.StyleSheet="{DynamicResource cssstyle}">
<Button Content="Normal Button"/>
<Button cssWpf:Css.Class="primary" Content="Normal Primary Button"/>
<Button cssWpf:Css.Class="secondary" Content="Normal Secondary Button"/>
<StackPanel
cssWpf:Css.Class="warning"
>
<TextBlock><Run Text="Warning Message"/></TextBlock>
<Button cssWpf:Css.Class="primary" Content="Warning Primary Button"/>
<Button cssWpf:Css.Class="secondary" Content="Warning Secondary Button"/>
</StackPanel>
</StackPanel>
</Window>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment