We Keep Coding

Fluent AcrylicBrush does not switch between Light, Dark, theme etc. UWP

Defined Light theme (<AcrylicBrush TintColor="Red"/>), Dark, (<AcrylicBrush TintColor="Orange"/>) in App.xaml. Per this post, Changing UWP project's Target Version from 1803 to 1809 disables NavigationView's Acrylic texture - why?, I added the following to ShellPage.xaml. The expected behavior when I toggle between Light and Dark theme is that the app NavigationView control will have an AcrylicBrush tint that toggles between Red and Orange. In the definition below, actual behavior is it stays Orange.
ShellPage.xaml:
<Page.Resources>
<StaticResource x:Key="NavigationViewExpandedPaneBackground"
ResourceKey="MyAcrylicBrush"/>
</Page.Resources>
App.xaml:
<Application
x:Class="TEST.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="Green"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Green"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewTopPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Green"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Green"
TintOpacity="0.8" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="Orange"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Orange"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewTopPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Orange"
TintOpacity="0.8" />
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Orange"
TintOpacity="0.8" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="Red"
TintOpacity="1"/>
<AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Red"
TintOpacity="1" />
<AcrylicBrush x:Key="NavigationViewTopPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Red"
TintOpacity="1" />
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
BackgroundSource="HostBackdrop"
TintColor="Red"
TintOpacity="1"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

You can directly give the Key(NavigationViewExpandedPaneBackGround) to your AcrylicBrush. So it will change your navigation view background.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAccentColorDark1}" FallbackColor="{ThemeResource SystemAccentColorDark1}" TintOpacity="0.80"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemAltHighColor}" FallbackColor="#333333" TintOpacity="0.50"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
Hope this solves your problem.

If you use StaticResource, it will keep the brush it from the first evaluation. However, you should not have to provide the resource on ShellPage at all and what you have in App.xaml should be enough - you have a brush called NavigationViewExpandedPaneBackground there and this brush should automatically override the NavigationPane default (the linked question talked specifically about the case when the resource's name is different from the built-in one). Moreover, it should work according to the current theme as it is part of theme dictionaries.
Try deleting the <StaticResource> element from ShellPage to see if it solves the problem.
I tested this change and it works properly.
Light theme
Dark theme

WPF style not applying at runtime (but works in designer)

I have this code in WPF window:
<Window.Resources>
<Style x:Key="MahappsStyle">
<Style.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Style.Resources>
</Style>
</Window.Resources>
The idea is to enable external styles in dictionary for single elements in my application. For example, it should work by applying style "MahappsStyle" to element called "HamburgerMenu":
<mahapps:HamburgerMenu x:Name="hamburgerMenu" Style="{StaticResource MahappsStyle}"
DisplayMode="CompactOverlay">
</mahapps:HamburgerMenu>
But this approach seems to be working only in designer, but not at runtime. What am I missing? Is there any other way to set MergedDictionaries to a single element?
UPDATE. Found the way to do that. First need to create Mahapps.xaml in application with following content:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:Promt.Desktop">
<ResourceDictionary.MergedDictionaries >
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
And then it is possible to apply to single element by:
<mahapps:HamburgerMenu>
<mahapps:HamburgerMenu.Resources>
<ResourceDictionary Source="pack://application:,,,/Promt.Desktop;component/Styles/Mahapps.xaml"/>
</mahapps:HamburgerMenu.Resources>
</mahapps:HamburgerMenu>
I'm really disappointed that ResourceDictionary can't hold x:key property. If anyone knows another approach - please post it.
UPDATE2. Even better solution from Evk (based on Laith answer).

Laith answer is close but not completely there, you need to do it this way:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary x:Key="MahappsResources">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ResourceDictionary>
</Window.Resources>
And then you can indeed reference by key:
<mahapps:HamburgerMenu Resources="{StaticResource MahappsResources}" />
You need to add one more ResourceDictionary definition because otherwise it treats your MahappsResources as Window.Resources (so analog to Window.Resources = new ResourceDictionary() ...) and setting key on it indeed makes no sense. When you add one more ResourceDictionary - now you are indeed adding your MahappsResources to Window.Resources dictionary, with given key, and so can reference it by that key.

Can you check if this works:
<Window.Resources>
<ResourceDictionary x:Key="MahappsResources">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
and your controls can reference it using the key:
<mahapps:HamburgerMenu Resources="{StaticResource MahappsResources}" />

The attachable property 'MergedDictionaries' was not found in type 'ResourceDictionary'

<Application x:Class="mahaapswpf.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.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</Application.Resources>
</Application>
I'm trying to use a MahApps.Metro Framework and I'm supposed to include this in my App.xaml, but I get "Nested properties are not supported: ResourceDictionaries.MergedDictionaries" error and "The attachable property "MergedDictionaries" was not found in type "ResourceDictionary".
I've tried everything but still can't fix this. Any idea? Thanks.

You're missing the tag that actually creates a ResourceDictionary instance:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
...
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

mahapps:The attachable property 'Flyouts' was not found in type 'MetroWindow'

i m very new in wpf. i want to have a flyout window like application (right side) window in windows8. use nuget to add mahapps(http://mahapps.com) to my project and add resources to application but when add a flyout to window i get this error:
The attachable property 'Flyouts' was not found in type 'MetroWindow'
my xaml code is:
<controls:MetroWindow x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow"
Height="600"
Width="800" WindowState="Maximized">
<Window.Resources>
<ResourceDictionary>
<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/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout Header="Flyout" Position="Right" Width="200">
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
<!-- some content -->
in cs file there is not any special thing. how could i fix this error?

Try removing the "MetroWindow.Flyout" ...
<controls:FlyoutsControl>
<controls:Flyout Position="Bottom">
// .. some controls ..
</controls:Flyout>
</controls:FlyoutsControl>

Load control style from separate file in wpf

I have the following style added to my Windows.Resources
<Window.Resources>
...
<!--A Style that extends the previous TextBlock Style-->
<!--This is a "named style" with an x:Key of TitleText-->
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock"
x:Key="TitleText">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#90DDDD" />
<GradientStop Offset="1.0" Color="#5BFFFF" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
...
</Window.Resources>
I have a lot of those styles in my xaml code and I would like to save each component style to an extra file (not an external file).. for example all the styles related to TextBlocks should be in a file called TextBlockStyles.xaml
How would I do this in wpf?
How do I link the style in my project ?
Thanks in advance

You use merged resource dictionaries
In you app.xaml you would use
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/Your.Assembly.Name;component/TextBlockStyles.xaml"/>
... other dictionaries here
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
or directly into a UserControl would be
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/Your.Assembly.Name;component/TextBlockStyles.xaml"/>
... other dictionaries here
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
You can shorten Source="..." to just Source="TextBlockStyles.xaml" if the file is in the same assembly and in the root of the project, or alternatively Source="Styles\TextBlockStyles.xaml" if you put the resource dictionary into the folder Styles.

Use case: you have a user control called MyView.xaml with a button. You want to style the button with an external XAML file.
In MyView.xaml:
<User Control ...namespaces...>
<UserControl.Resources>
<ResourceDictionary>
...converters...
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
...the rest of the control...
</UserControl>
In MyButton.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MSDNSample">
<Style x:Key="FooButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Pink" />
</Style>
</ResourceDictionary>
Back to MyView.xaml ("the rest of the control"):
<Button Style="{StaticResource FooButton}">
Hello World
</Button>

In Solution Explorer Right Click on your Project Select Add After that click on Resource Dictionary...
Choose name and add to your project.
Open App.xaml
Add This Code in Application Tag
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="YourStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In YourStyle.xaml :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:APPNAME">
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Pink" />
</Style>
</ResourceDictionary>

you are looking for the dynamic resources. well the best way is to load and marge the dictionary in the resources. application or either on control page.
here is a good sample for it.
http://blogs.msdn.com/b/wpfsdk/archive/2007/06/08/defining-and-using-shared-resources-in-a-custom-control-library.aspx
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
this.Resources.MergedDictionaries.Add(Smyresourcedictionary);

Simply, go to your Window (example: MaindWindow.xaml) where you want to include the resource from the outer file and use MergedDictionaries principle to refer to that file:
<Window x:Class="UseMergedResource.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"
mc:Ignorable="d"
Title="MainWindow"
Height="600"
Width="600">
<Window.Resources>
<!-- DECLARING MERGED DICTIONARY -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source='Merged/BrushResources.xaml' />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<!---------------------------------->
</Window.Resources>
<StackPanel>
<Rectangle Width='200'
Height='100'
Fill='{StaticResource PrimaryBrush}' /> <!-- USAGE HERE -->
</StackPanel>
</Window>
From above Merged/BrushResources.xaml is the location of the resource file, which is located under the folder called Merged.
Now if you are wondering what should be the declaration syntax in the outer file, check this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Location for application brushes -->
<SolidColorBrush x:Key='BorderBrush'
Color='Orange' />
<SolidColorBrush x:Key='HighLightBrush'
Color='LightBlue' />
<SolidColorBrush x:Key='PrimaryBrush'
Color='Pink' />
<SolidColorBrush x:Key='AccentBrush'
Color='Yellow' />
</ResourceDictionary>
If you want to make the resource available through all application (visible in all your windows) then declare in the App.xaml resources section.