wpf merge multiple styles into one style - wpf

I have a UserControl that consists of a listview it looks like:
<UserControl
....
<UserControl.Resources>
<Style TargetType="Thumb">
<!-- Style Content -->
</Style>
<Style TargetType="GridViewColumnHeader">
<!-- Style Content -->
</Style>
<Style TargetType="{x:Type ScrollBar}">
<!-- Style Content -->
</Style>
<Style TargetType="{x:Type ScrollViewer}">
<!-- Style Content -->
</Style>
<Style TargetType="{x:Type ListViewItem}">
<!-- Style Content -->
</Style>
</UserControl.Resources>
<ListView Name="ListView1" >
<!-- ListViewContent -->
</Style>
</UserControl>
I have 3 of those userControls where the only thing that is different between them is the styles in <UserControl.Resources>. It makes no scene to have to create multiple controls that have the same functionality just because I need a different look and feel. What I want to do now is combine all the styles in <UserControl.Resources> into one style. If I manage to group all those styles into one I would be able to remove the 3 controls and change the style as:
<ListView Style={DynamicResource style1} ...
Currently if I do
<UserControl.Resources>
<Style x:Key="style1">
<!-- Place all styles in here -->
</Style>
</UserControl.Resources>
It does not work.
Edit
Thanks to iltzortz answer I now have:
Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Grid">
<Setter Property="Background" Value="Green"></Setter>
</Style>
<SolidColorBrush x:Key="Foo" Color="Red"></SolidColorBrush>
</ResourceDictionary>
Dictionary2.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Grid">
<Setter Property="Background" Value="Black"></Setter>
</Style>
<SolidColorBrush x:Key="Foo" Color="Orange"></SolidColorBrush>
</ResourceDictionary>
MyUserControl:
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="97" d:DesignWidth="91">
<UserControl.Resources>
<ResourceDictionary Source="Dictionary1.xaml" ></ResourceDictionary>
</UserControl.Resources>
<Grid >
<Ellipse Fill="{DynamicResource Foo}" />
</Grid>
</UserControl>
And I change resource dictionaries dynamically like this: switching wpf resource dictionaries at runtime

Add a resource dictionary to your application named e.g. common.xaml
and put your common styles there
then you can reuse it with:
<UserControl.Resources>
<ResourceDictionary Source="common.xaml"/>
</UserControl.Resources>

You can create 3 resource dictionaries and merge them at runtime. In my example code I used two resource dictionaries.
Example:
Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Margin" Value="0,10,0,0" />
</Style>
</ResourceDictionary>
Dictionary2.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Margin" Value="50,50,0,0" />
</Style>
</ResourceDictionary>
In the start of application you can set default style in App.xaml file:
<Application x:Class="Example.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Dictionary1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
If you want to change style, you can merge resource dictionaries:
ResourceDictionary dict = new ResourceDictionary();
dict.Source = new Uri("\\Dictionary2.xaml", UriKind.Relative);
this.Resources.MergedDictionaries.Add(dict);
And now binding looks like this:
<Button Style="{DynamicResource btnStyle}" Content="Click me!" />
Now if you invoke code to merge resource dictionaries, button style will be automatically changed.

Related

how to create a resource based on resource dictionary in WPF

I create a resource dictionary that receives 2 parmeters : releasedImage and PressedImage :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SwitchesLibrary">
<Style TargetType="local:ImageButton" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:ImageButton">
<Grid>
<Image x:Name="PressedButton"
Source="{TemplateBinding PressedImage}" />
<Image x:Name="ReleasedButton"
Source="{TemplateBinding ReleasedImage}" />
</Grid>
</Setter.Value>
</Setter>
</Style>
In another lib, I will use several buttons with the same images. So I want to create a resource in this lib with specific PressedImage and ReleasedImage,
like this :
<UserControl x:Class="ExamplePanelLibrary.ExamplePanelControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ExamplePanelLibrary"
xmlns:SwitchesLibrary="clr-namespace:SwitchesLibrary;assembly=SwitchesLibrary"
mc:Ignorable="d"
d:DesignHeight="760" d:DesignWidth="754">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="pack://application:,,,/SwitchesLibrary;component/ImageButtonStyle.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<ImageBrush x:Key="ButtonPressed" ImageSource="Images/PushButtons/OSB_Pushed.png"/>
<ImageBrush x:Key="ButtonReleased" ImageSource="Images/PushButtons/OSB_Released.png"/>
<Style
x:Key="OSBPushButton"
TargetType="SwitchesLibrary:ImageButton"
ReleasedImage="Images/SpecificButtonReleased.png"
PressedImage="Images/SpecificButtonPressed.png"
/>
</ResourceDictionary>
Can we do something like that ?
This may work:
<Style x:Key="OSBPushButton"
TargetType="SwitchesLibrary:SpecificImageButton"
BasedOn="{StaticResource {x:Type local:ImageButton}}">
<Setter Property="ReleasedImage" Value="Images/SpecificButtonReleased.png"/>
<Setter Property="PressedImage" Value="Images/SpecificButtonPressed.png"/>
</Style>
Clemens gave the correct answer. I just want to rewrite this clearly :
<Style
x:Key="OSBPushButton"
TargetType="SwitchesLibrary:ImageButton"
BasedOn="{StaticResource {x:Type SwitchesLibrary:ImageButton}}">
<Setter Property="ReleasedImage" Value="Images/SpecificButtonReleased.png"/>
<Setter Property="PressedImage" Value="Images/SpecificButtonPressed.png"/>
</Style>
and use it like this :
<SwitchesLibrary:ImageButton x:Name="OSB_1" Style="{StaticResource OSBPushButton}"/>

Extend style without setting an x:Key attribute in the base style

I have a file MyButtonStyles.xaml which designs the WPF button. This file uses a style to set some colors and fonts:
<ResourceDictionary xmlns......>
<Style BasedOn="{StaticResource {x:Type Button}} TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="FontSize" Value="22" />
</Style>
</ResourceDictionary>
This button is used in two xaml files. One shows the button as designed in the above style. This happens automatically because the above style has the according TargetType and it does not have an x:Key attribute.
In the other xaml file I use this button as well but the style from above should be extended by another setter property. Doing this by merging the dictionaries and basing on the original style it works:
<ResourceDictionary>
<ResourceDictionary.MergedDictionary>
<ResourceDictionary Source="MyButtonStyles.xaml" />
<ResourceDictionary.MergedDictionary>
<Style BasedOn="ButtonStylesOrig" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green" />
</Style>
</ResourceDictionary>
But for this I have to add an x:Key attribute (ButtonStylesOrig) to the base style. This means that in the first xaml which uses the button the base style will not be applied any more.
Is there a possibility to extend a style without losing the global scope of it (e.g. without using x:Key)?
This works:
<Window x:Class="WpfApplication1.Window1"
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"
mc:Ignorable="d"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyButtonStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Background" Value="Green" />
</Style>
</Grid.Resources>
<Button Content="Button" />
</Grid>
</Window>
The key is not to override the resource in the same resource dictionary that you merge your base style into:
WPF Using multiple Resource Dictionaries from multiple projects
You can't combine multiple default styles of the same type a single resource scope. However, it is possible to build default styles in nested resource scopes.
Suppose you merge MyButtonStyles.xaml into the App.xaml resources. Then you can place your second style with the additional setter into Window.Resources or other deeper nested resources and it will combine the correct implicit styles.
A more localized example:
<Grid>
<Grid.Resources>
<ResourceDictionary Source="MyButtonStyles.xaml"/>
</Grid.Resources>
<Grid>
<Grid.Resources>
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green" />
</Style>
</Grid.Resources>
<Button VerticalAlignment="Top" Margin="20">Both styles</Button>
</Grid>
<Button VerticalAlignment="Center" Margin="20">ExampleDictionary style</Button>
</Grid>

Modern UI Pie Chart Doesn't Show Data

I am following all steps listed on this link,
https://modernuicharts.codeplex.com/documentation
but it gives below error and only title and subtitle show up no chart
Severity Code Description Project File Line Suppression State
Error 'ChartBase' TargetType does not match type of element
'PieChart'. MteroChartsModern c:\users\sesa388372\documents\visual
studio
2015\Projects\MteroChartsModern\MteroChartsModern\Application.xaml 9
My xaml code:
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<chart:PieChart
Style="{StaticResource MinimalChartStyle}"
ChartTitle="Minimal Pie Chart"
ChartSubTitle="Chart with fixed width and height"
SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
<chart:PieChart.Series>
<chart:ChartSeries
SeriesTitle="Errors"
DisplayMember="Category"
ValueMember="Number"
ItemsSource="{Binding Path=Errors}" />
</chart:PieChart.Series>
</chart:PieChart>
</Grid> </Window>
Application.xaml
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary >
<Style x:Key="MinimalChartStyle" TargetType="chart:ChartBase">
<Setter Property="Width" Value="500"/>
<Setter Property="Height" Value="500"/>
</Style>
</ResourceDictionary>
</Application.Resources>
The issue is caused since you are defining the Style for TargetType="chart:ChartBase" and what you are using is chart:PieChart.
Please define a style for chart:PieChart like :
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary >
<Style x:Key="MinimalChartStyle" TargetType="chart:PieChart">
<Setter Property="Width" Value="500"/>
<Setter Property="Height" Value="500"/>
</Style>
</ResourceDictionary>
</Application.Resources>

MahApps Metro setting Window Border styles from App Resources

I am trying to set Window Border styles for my MahApps Metro app. I have read the articles about how to set the different Border styles and I think I get it. However, I am trying to set the Border Style for all windows in my app to be the same (all Drop Shadow) and it doesn't seem to want to work.
I have app resources that look like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/GSDXThemes;component/GSDXDarkYellowTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
My Resource dictionary looks like this:
<!-- Merge in ResourceDictionaries defining base styles to use. This theme is based on the Metro Dark Yellow theme. -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Yellow.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
<ResourceDictionary Source="pack://application:,,,/GSDXThemes;component/GSDXControlStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
The GSDXControlStyles dictionary just sets some custom style values for my app. It is in this file that I try to set the Window Borders.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:resx="clr-namespace:GSDXThemes.Properties"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:GSDUserControls="clr-namespace:GSD.CommonGUI.UserControls;assembly=CommonGUI">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Now customize the theme for our use...mostly just changing font sizes, etc...-->
<Style TargetType="{x:Type Controls:MetroWindow}" >
<Setter Property="WindowTransitionsEnabled" Value="False" />
<Setter Property="EnableDWMDropShadow" Value="True" />
</Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource MetroLabel}">
<Setter Property="FontSize" Value="16"/>
</Style>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="FontSize" Value="16"/>
</Style>
...
All the other style settings work fine. But the first line for setting the Window Border does nothing. All my windows show with no border.
How can I get this to work so all Windows have the Drop Shadow border?
you must give your style a key to get a working solution
<Style x:Key="CustomDefaultWindowStyle"
TargetType="{x:Type Controls:MetroWindow}"
BasedOn="{StaticResource {x:Type Controls:MetroWindow}}" >
<Setter Property="WindowTransitionsEnabled" Value="False" />
<Setter Property="EnableDWMDropShadow" Value="True" />
</Style>
now use this style on all your MetroWindows
<Controls:MetroWindow x:Class="YourWindowClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:System="clr-namespace:System;assembly=mscorlib"
Title="Custom Window Style Demo"
Height="600"
Width="800"
WindowStartupLocation="CenterScreen"
Style="{DynamicResource CustomDefaultWindowStyle}">
...
</Controls:MetroWindow>
(don't be afraid of the'Invalid style target type:...' message, it's a VS bug)
hope that helps

WPF : Extend Theme's style - StackOverflowException

I want every button to have 5 points margin, in addition to Royale theme style.
Window1.xaml:
<Window x:Class="_styles.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Royale;component/themes/royale.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Margin" Value="5"/>
</Style>
</ResourceDictionary>
</Window.Resources>
<StackPanel>
<Button Content="Button A"/>
<Button Content="Button B"/>
</StackPanel>
</Window>
It compiles but I get:
An unhandled exception of type 'System.StackOverflowException' occurred in PresentationFramework.dll
public Window1() {
InitializeComponent(); // <-- getting exception here
}
There are no exception details because:
{Cannot evaluate expression because the current thread is in a stack overflow state.}
This seems to be a circular reference between your style and the one defined in PresentationFramework.Royale. A workaroud would be to place resources at different levels:
<Window x:Class="_styles.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Royale;component/themes/royale.normalcolor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Margin" Value="5"/>
</Style>
</StackPanel.Resources>
<Button Content="Button A"/>
</StackPanel>
</Window>
I would remove the BasedOn attribute - it's not necessary. Think of it this way, merging the Royale theme will apply the button theme, and you just want to change the margin - styles are additive in nature, so it will combine the Royale theme and your own button theme without specifying the BasedOn attribute - does that make sense?
Cheers!
Please see this question and my answer for another solution that doesn't require you to specify a resource dictionary in every window and allows you to resolve the BasedOn style dynamically.

Resources