How can WPF resources - including styles, templates, etc. - be organized, so that I can use them across Windows, Pages or even Projects. What options do I have to achieve maximum re-usability of my resources and a maintainable structure (for example one file per Template)?
For example: I am creating a WPF application and I want to use a TabControl, but I want to make major changes to it. So I could create a style in and apply it to the TabControl and TabItem. That's ok, but where can I place my resources to keep my Window XAML clear and have the style accessible from other Windows or projects as well?
I found that I can add it to App.xaml but that is only a solution for one project and allows sharing just between items of this project. Also, I think it would be better to have these templates a little separate from other code, than placing it all in some page or app.xaml?
I usually create a seperate styling project, which I reference from the projects, which I want to style. The styling project has a fixed structure like this:
For every control, I create a styling ResourceDictionary. For example for my buttons:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="PrimaryButtonStyle" TargetType="Button">
</Style>
<Style x:Key="ToolbarButton" TargetType="Button">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="3"/>
<Setter Property="Background" Value="Transparent"></Setter>
</Style>
</ResourceDictionary>
In one main ResourceDictionary, I merge all the other dictionaries, in this case in the file IncaDesign.xaml, which you can see in the picture above:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Commons.Controls;assembly=Commons">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Converter/Converter.xaml" />
<ResourceDictionary Source="Styles/Button.xaml" />
<ResourceDictionary Source="BitmapGraphics/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Default Styles -->
<Style TargetType="Button" BasedOn="{StaticResource PrimaryButtonStyle}"></Style>
</ResourceDictionary>
Notice how I defined the default styles, which are applied automatically, unless you specify otherwise. In every window or control, that you want to style, you only need to reference this one ResourceDictionary. Note the definition of the source, which is a reference to the assembly (/Commons.Styling;component...)
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Commons.Styling;component/IncaDesign.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
Default styles will be set automatically now, and if you want to access a resource explicitly, you can do this, using StaticResource.
<Viewbox Height="16" Width="16" Margin="0,0,10,0">
<ContentControl Content="{StaticResource FileIcon32}" />
</Viewbox>
This is very nice solution in my opinion, which works for very complex solutions, including modular solutions, for example built with PRISM.
A ResourceDictionary is for what you are looking.
Here is an explanation for how to use them within and across projects.
You can create a project that contains Resource Dictionaries, either in your solution or in a separate one. Your project will be a Class Library type and can then easily be .dll referenced from any other project. Here is an article describing this: Resource Dictionary Article
Related
I have resource dictionary files (MenuTemplate.xaml, ButtonTemplate.xaml, etc) that I want to use in multiple separate applications. I could add them to the applications' assemblies, but it's better if I compile these resources in one single assembly and have my applications reference it, right?
After the resource assembly is built, how can I reference it in the App.xaml of my applications? Currently I use ResourceDictionary.MergedDictionaries to merge the individual dictionary files. If I have them in an assembly, how can I reference them in xaml?
Check out the pack URI syntax. You want something like this:
<ResourceDictionary Source="pack://application:,,,/YourAssembly;component/Subfolder/YourResourceFile.xaml"/>
An example, just to make this a 15 seconds answer -
Say you have "styles.xaml" in a WPF library named "common" and you want to use it from your main application project:
Add a reference from the main project to "common" project
Your app.xaml should contain:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Common;component/styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I'm working with .NET 4.5 and couldn't get this working... I was using WPF Custom Control Library. This worked for me in the end...
<ResourceDictionary Source="/MyAssembly;component/mytheme.xaml" />
source: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/11a42336-8d87-4656-91a3-275413d3cc19
Resource-Only DLL is an option for you. But it is not required necessarily unless you want to modify resources without recompiling applications. Have just one common ResourceDictionary file is also an option. It depends how often you change resources and etc.
<ResourceDictionary Source="pack://application:,,,/
<MyAssembly>;component/<FolderStructureInAssembly>/<ResourceFile.xaml>"/>
MyAssembly - Just assembly name without extension
FolderStructureInAssembly - If your resources are in a folde, specify folder structure
When you are doing this it's better to aware of siteOfOrigin as well.
WPF supports two authorities: application:/// and siteoforigin:///.
The application:/// authority identifies application data files that
are known at compile time, including resource and content files. The
siteoforigin:/// authority identifies site of origin files. The scope
of each authority is shown in the following figure.
For UWP:
<ResourceDictionary Source="ms-appx:///##Namespace.External.Assembly##/##FOLDER##/##FILE##.xaml" />
Using XAML:
If you know the other assembly structure and want the resources in c# code, then use below code:
ResourceDictionary dictionary = new ResourceDictionary();
dictionary.Source = new Uri("pack://application:,,,/WpfControlLibrary1;Component/RD1.xaml", UriKind.Absolute);
foreach (var item in dictionary.Values)
{
//operations
}
Output: If we want to use ResourceDictionary RD1.xaml of Project WpfControlLibrary1 into StackOverflowApp project.
Structure of Projects:
Resource Dictionary:
Code Output:
PS: All ResourceDictionary Files should have Build Action as 'Resource' or 'Page'.
Using C#:
If anyone wants the solution in purely c# code then see my this
solution.
I know I will probably go to WPF hell but I like to keep it simple.
In my "external" WPF project named MyCorp.Wpf.Dll where I have a folder called assets with my resource dictionaries
MyCorp.Wpf.Dll
|- Assets
|- TextStyles.xaml
|- Colours.axml
Let's assume I have this TextStyles.xaml with the UI font styles that I need to apply because I need windows 10/ 11 style compliance
<Style x:Key="Header" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego UI Light"/>
<Setter Property="FontSize" Value="46" />
</Style>
<Style x:Key="Subheader" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego UI Light"/>
<Setter Property="FontSize" Value="32" />
</Style>
<Style x:Key="Title" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego UI SemiLight"/>
<Setter Property="FontSize" Value="24" />
</Style>
<Style x:Key="SubTitle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego UI Normal"/>
<Setter Property="FontSize" Value="20" />
</Style>
<Style x:Key="Base" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego Semibold"/>
<Setter Property="FontSize" Value="15" />
</Style>
<Style x:Key="Body" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego Normal"/>
<Setter Property="FontSize" Value="15" />
</Style>
<Style x:Key="Caption" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Sego Normal"/>
<Setter Property="FontSize" Value="12" />
</Style>
</ResourceDictionary>
These styles are in my corporate style guide and I am re-sing them al over the place
now in my brand new application I can use the corporate style DLL from an internal NuGet package feed or I link it because It happens to be in my solution using the following resource dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MyCorp.Wpf;component/Assets/TextStyles.xaml"/>
<ResourceDictionary Source="/MyCorp.Wpf;component/Assets/Styles.xaml"/>
<ResourceDictionary Source="/MyCorp.Wpf;component/Assets/Brushes.xaml"/>
<ResourceDictionary Source="/MyCorp.Wpf;component/Assets/ColorStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
I have no clue where the extra component come from, I just know I needed. then in my new application I just link it like so:
<Application x:Class="MyNew.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="ExternalResources.xaml"/>
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="VisibilityConverter"/>
</ResourceDictionary>
</Application.Resources>
</Application>
This way I have all external links in the ExternalResources.xaml where everyone understands where they came from and updating them is easy
I can then use the external resource definitions like any other in my windows, page and controls
<syncfusion:ChromelessWindow x:Class="IDPS.ChromelessWindow1"
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:IDPS"
xmlns:r="clr-namespace:IDPS.Wpf.Properties;assembly=IDPS.Wpf"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
syncfusion:SfSkinManager.Theme="{syncfusion:SkinManagerExtension ThemeName=FluentDark}"
mc:Ignorable="d"
MinHeight="450" MinWidth="800">
<Grid>
<TextBlock Text="Hello world" Style="{StaticResource Title}"/>
</Grid>
</syncfusion:ChromelessWindow>
I have a resource dictionary in a class library that has a bunch of SolidColorBrush's and Control style's. It works in the designer when i make sure that all the controls whose style i am setting are using DynamicResource's but if i switch it to use a StaticResource either the designer breaks or my application fails to run... or both.
This works
<Image Source="{Binding Image}" Style="{DynamicResource DriveImageStyle}"/>
This breaks
<Image Source="{Binding Image}" Style="{StaticResource DriveImageStyle}"/>
giving me errors such as:
XamlParseException: Provide value on
'System.Windows.Markup.StaticResourceHolder' threw an exception.
Cannot find resource named 'DriveImageStyle'
When using resources in the resource dictionaries themselves (setting the background colour of a style)
This works
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundColour}" />
This breaks
<Setter Property="Background" Value="{StaticResource ButtonBackgroundColour}" />
and gives me errors in the designer such as:
Exception thrown: 'System.Windows.Markup.XamlParseException' in
PresentationFramework.dll
Additional information: '{DependencyProperty.UnsetValue}' is not a
valid value for property 'Background'.
Can anyone give me a reason as to why it acts in this way?
Additional information
In my View's I reference the dictionary like this:
<UserControl.Resources>
<ResourceDictionary Source="pack://application:,,,/Styles;component/Resources.xaml" />
</UserControl.Resources>
And I merge them in my class library like so:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colours.xaml"/>
<ResourceDictionary Source="Buttons.xaml"/>
<ResourceDictionary Source="Controls.xaml"/>
</ResourceDictionary.MergedDictionaries>
I wish I had time to go test but I want to say this is how I did it last time I was using directly from a usercontrol. However I'd generally advise against it and just slap it over in the app.xaml of the proj or someplace more centralized unless that one view is genuinely the only one need it. Either way give this a shot instead, they can be finnicky about details.
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Styles;component/Resources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
Suppose I have App.xaml with following content:
[...]
<Application.Resources>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="BorderBrush" Value="{StaticResource Theme.CheckBox.Border}" />
<Setter Property="Foreground" Value="{StaticResource Theme.Foreground}" />
</Style>
</Application.Resources>
[...]
Now, I want to move those definitions to external assembly. This way I can reuse WPF controls and window styles across my applications. For example I could create NuGet package and install those styles in seconds.
You can create a simple classLibrary project, Define all your styles and templates etc, in separated resource dictionaries (recommended) and merge all those dictionaries into one dictionary.
To use those styles from that specific assembly just refer to it in your App.Xaml file,
The following shots should gave you a global view
I am used to create a separate ResourceDictionary for each style (for easy access), and all those resource dictionaries are merged in the ResourceLibrary.Xaml
Now to refere to that ControlLibraryAssembly (after adding a reference to it), in your app.xaml file add
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ControlLibrary;component/ResourcesDictionaries/ResourceLibrary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
You need to make resource assembly. Here you can read how you can create it:
https://msdn.microsoft.com/en-us/library/aa984332(v=vs.71).aspx
As I have multiple Windows in my application, I am looking for a solution that does not require me to set a binding on each Window.
I created a ResourceDictionary which has a style for the Window Background:
<Style TargetType="{x:Type Window}">
<Setter Property="Background" Value="AliceBlue"/>
</Style>
In my XAML, I set the ResourceDictionary:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Templates.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
There is no error, but my Window color stays white.
This appears to be caused by a combination of the order in which WPF loads/processes styles from nested ResourceDictionary, and the specifics of the Window class.
Assume MainWindow is defined as per your post. Now put the following in Templates.xaml:
<Style TargetType="{x:Type Window}">
<Setter Property="Background" Value="Red"/>
</Style>
<Style TargetType="{x:Type Window}" x:Key="myStyle">
<Setter Property="Background" Value="Green"/>
</Style>
If MainWindow has no style defined, then you will see that in the designer it appears with a red background. The designer is parsing the whole Xaml and loading the resource dictionary, and then drawing the results. The style is read before the window is drawn, and so the red background is applied.
When you run the application, the window is created before the ResourceDictionary is applied. It looks for a default style (a style with x:Key="{x:Type Window}") before the nested ResourceDictionary is processed, and finds nothing. Therefore at runtime, the window appears with default colour. (This is the behaviour described in the comments above.) Remember that the style with x:Key="{x:Type Window}" has a default value that matches the Windows style.
This is borne out if you use myStyle explicitly. If you add to your Window definition the attribute Style="{StaticResource myStyle}" you'll find that the designer fails, but you also get a run-time error, because myStyle hasn't been created at the time that the Window needs it. If you switch to Style="{DynamicResource myStyle}" then you'll see that it works as you hope, because DynamicResource will update once the ResourceDictionary has been parsed and the style included.
So, applying this, you can fix the problem in one way by adding this to your Window element: Style="{DynamicResource {x:Type Window}}" - but this is cludgy. The better solution is to include your resource dictionary in the app.xaml file, where it will be parsed before any window is opened and thus available to all:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Templates.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
The real issue here is that your Window is not really a Window: it is a class that derives from Window and will in fact be MainWindow, Window2, etc... This means that the automatic style wireup for a Window will never work in this way, and some level of manual binding will unfortunately always be required.
This is the solution I used in my application. It lets me keep all my window styles together, and requires just a couple lines after the <Window.Resources> section.
Do your Style like so:
<Style x:Key="MyWindowStyle">
<Setter Property="Window.Background" Value="AliceBlue"/>
</Style>
Then, in your Window, after </Window.Resources> include the following:
<Window.Style>
<Style BasedOn="{StaticResource MyWindowStyle}"/>
</Window.Style>
Add a new brush in your resource dictionary
<SolidColorBrush x:Key="WindowBackground" Color="AliceBlue" />
and in your WPF window simply set the required resource to the window background property
<Window x:Class="GDD.Presentation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300"
Background="{StaticResource WindowBackground}">
Some information related to problem: http://www.11011.net/archives/000692.html
Specific situation is : there is some generic textblock (key equals to type) styles declared in app.xaml which is in third party app, they used by all contentpresenters in my views ignoring my own styles.
I've found few possible solutions:
Explicitly assign all elements a style with overriden template & add resource dictionary with my styles to contentpresenter resources.
Add datatemplate for string, but there is a problem with access text detection ( may be solved by placing contentpresenter with ref to my own resources, isn't good solution because we increasing visual tree just to fix this problem)
Probably any other solutions?
P.S.: There is alot of views already exist, so first option is alot of work!
To reproduce create new wpf project and modify next files:
App.xaml add generic style:
<Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="20"/>
</Style>
</Application.Resources>
MainWindow.xaml content is:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<StackPanel>
<Button Content="Hello world">
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Access_Text"/>
<MenuItem Header="NormalText"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
<TextBlock Text="WELCOME TO BLACK MESA"/>
</StackPanel>
Add Dictionary.xaml resource dictionary and add next style inside:
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="8"/>
</Style>
Not sure where you might do it as I don't understand the structure of your App, but if you want to remove the style from the Application Resources you could do it programatically like this
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ResourceDictionary dic = App.Current.Resources;
dic[typeof (TextBlock)] = null;
}
}
Using the XAML you provided in a test WPF project this leaves me with the default font size of 12 rather than 20.