We Keep Coding

How to easily allow users to update Styles used be elements in XAML (UWP)

This is for a Windows 10 UWP. I need to allow users to update values on Styles that are associated with elements used throughout the application (i.e allow users to change the font size of various textblocks, background color stackpanels etc.) .
I currently have all my Styles in a separately file.
My App.xaml is as below:
<Application
x:Class="MyTestApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Styles/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
My Styles.xaml (partial) is as below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:MyTestApp.Views"
xmlns:x1="using:System">
<Style x:Key="HeaderTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="FontSize" Value="24"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="10,4,0,0"/>
</Style>
<Style x:Key="RegularTextBlocks" TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Style>
</ResourceDictionary>
I refer to these styles on controls throughout the application using like this:
<TextBlock Style="{StaticResource HeaderTextBlocks}" />
I have created a Settings page (settings.xaml) which has textboxes for the users to update various style settings.
But I am not sure how I could bind these to the settings on the various styles on the styles.xaml file so that the styles are updated and the controls referring to the styles are updated when the user changes the value.
<TextBox Header="Font Size of Header TextBlocks" Text="{x:Bind HeaderTextBlocks.FontSize ???, Mode=TwoWay}" />
<TextBox Header="Font Size of Regular TextBlocks" Text="{x:Bind RegularTextBlocks.FontSize???, Mode=TwoWay}" />
Could someone please point me in the right direction? I am trying to do this with minimal (or no code behind) as possible.

Unfortunately this kind of user-defined styling is not easily available in UWP. You can however implement a kind of styling solution using data binding.
First step is to create a class like CustomUISettings which implements INotifyPropertyChanged and has properties like HeaderFontSize, etc.
Now on app start create an instance of this class and add it as app resource:
Application.Current.Resources["CustomUISettings"] = new CustomUISettings();
Now you can bind to the properties in this class anywhere in your code:
<TextBox FontSize="{Binding HeaderFontSize, Source={StaticResource CustomUISettings}}" />
You must use the classic {Binding} markup extension, because {x:Bind} does not support Source setting.
To modify the UI settings you can just retrieve the instance anywhere and set the properties as you see fit:
var customUISettings = (CustomUISettings)Application.Current.Resources["CustomUISettings"];
customUISettings.HeaderFontSize = 50;
You must make sure that all properties in CustomUISettings class fire the PropertyChanged event. You can see how to implement INotifyPropertyChanged interface for example here.

Setup for ResourceDictionary [duplicate]

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>

Catel: Create new DataWindowButtonStyle based on another 3rd party style

REF: Catel docs
Using Visual Studio 2013, .NET 4.5.1, Catel 4.4.
I have a DataWindow with the default Close button. I would like to style that button using the MahApps.Metro Flat Button style. If I had direct access to the DataWindow Close button (I think it's created at runtime), I'd apply the Flat Button style in the XAML, but I don't.
In the Catel docs, the comment says we should specify our own DataWindowButtonStyle. Could I get an example of creating a new DataWindowButtonStyle where I can base it on the MahApps.Metro Flat Button style?
Please let me know if you have any questions or need more information.
Thanks!
Edit: Here's what I've tried:
<catel:DataWindow.Resources>
<!-- Compile Error: A 'DynamicResourceExtension' cannot be set on the BasedOn property of type 'Style'.
<ResourceDictionary>
<Style x:Key="DataWindowButtonStyle" BasedOn="{DynamicResource MetroFlatButton}" />
</ResourceDictionary>
-->
<!-- This compiles and runs, but doesn't work.
<ResourceDictionary>
<Style x:Key="DataWindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Yellow" />
</Style>
</ResourceDictionary>
-->
<!-- This compiles and runs, but doesn't work.
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Catel.MVVM;component/themes/generic.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="DataWindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Yellow" />
</Style>
</ResourceDictionary>
-->
<!-- Compiles and runs, but doesn't work. -->
<Style x:Key="DataWindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Yellow" />
</Style>
</catel:DataWindow.Resources>

You can simply define a new DataWindowButtonStyle resource and it should be applied automatically.

The custom DataWindowButtonStyle must be defined in App.xaml application resources.
App.xaml:
<Application.Resources>
<Style x:Key="DataWindowButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="MinHeight" Value="50"/>
</Style>
</Application.Resources>
I don't know why setting background property is not working. But other properties are working.

Style inheritance based on different XAML

How to specify BasedOn tag in a style to a style defined in some other file.
Example,
Dictionary1.xaml defines
<Style x:Key="basicStyle" TargetType="TextBlock" >
<Setter Property="FontSize" Value="24"></Setter>
<Setter Property="Foreground" Value="DarkGray"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Style>
In Dictionary2.xaml i need something like
<Style x:Key="headerStyle" TargetType="TextBlock" >
<Setter Property="FontSize" Value="46"></Setter>
<Setter Property="Foreground" Value="DarkGray"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
</Style>
How to achieve this?

The easy way:
In Dictionary2.xaml define MergedDictionaries (right after the opening ResourceDictionary tag):
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Path/to/Dictionary1.xaml" />
</ResourceDictionary.MergedDictionaries>
And then
<Style x:Key="headerStyle" TargetType="TextBlock" BasedOn="{StaticResource basicStyle}" >
.....
</Style>
This will solve the issue, but as with all easy solutions there's a catch: each time you merge dictionaries you effectively create a copy of the merged dictionary. And it's recursive - if you have Dict3.xaml and Dict4.xaml that both load Dictionary2.xaml, you will have three instances of Dictionary1.xaml created. With a complex dependency structure you can get to a point that you have 19,000+ dictionary objects in memory at application start up and the memory footprint goes from 180MB to 1200MB (TrueStory™ :( ).
The solution is a SharedResourceDictionary. The implementation in the tutorial should be seen as a starting point and will probably need some level of tweaking - depending on use scenario. Google "wpf SharedResourceDictionary" for some gotchas and solutions.

Specify Style from App.Resources to Theme file

Here's a simple thing with which I am struggling with :
I have a style specified in my App.Resources
<Application.Resources>
<Style TargetType="{x:Type igDock:PaneToolWindow}">
<Setter Property="Background" Value="Red"/>
</Style>
</Application.Resources>
I would Like to move this into my theme file by trying something like this.
<SolidColorBrush x:Key="{ComponentResourceKey {x:Type DockManager:PaneToolWindow}, defaultBackground}" Color="Red" PresentationOptions:Freeze="true" />
Of course I am doing something terribly wrong here, My intention is to have all floating windows a default style.

Why use a solid color Brush? The way you had it initially would have worked fine if placed in your custom XAML file.
Just put
<Style TargetType="{x:Type igDock:PaneToolWindow}">
<Setter Property="Background" Value="Red"/>
</Style>
...in your style file.