How to customize Acrylic brush - xaml

I want to paint Stack Panel surface using Acrylic brush.
<StackPanel Background="{ThemeResource SystemControlAcrylicElementBrush}"></StackPanel>
It works for me but there is a problem when I want to change Tint color and opacity. There is a following code to change it:
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="#FFFF0000"
TintOpacity="0.8"
FallbackColor="#FF7F0000"/>
</ResourceDictionary>
I don't know where should I place it and rename brush for this?
<StackPanel Background="{ThemeResource **MyAcrylicBrush**}"></StackPanel>
Thanks for help.
P.S. You need Windows Insider SDK and system build 16190 or higher


You can create a ResourceDictionary, for example called "ThemeDictionary.xaml" and put the code you have for your AcrylicBrush in there.
Then in your App.xaml you can reference your ResourceDictionary like so:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ThemesDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>


Method 1:
Add ResourceDictionary.ThemeDictionaries in Application.Resources
In App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FF7F0000"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="MyAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FFFF7F7F"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Method 2:
As #jsmyth886 answered
Add a separate ResourceDictionary file and place your ResourceDictionary.ThemeDictionaries code
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FF7F0000"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="MyAcrylicBrush" Color="{ThemeResource SystemColorWindowColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush" BackgroundSource="HostBackdrop" TintColor="#FFFF0000" TintOpacity="0.8" FallbackColor="#FFFF7F7F"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
You MergedDictionaries in App.xaml to Merged your ResourceDictionary file
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
For more Info: ResourceDictionary and XAML resource references, XAML for Windows 10 Controls - Styling

Related

UWP override default brush globally

I'm trying to override some default SolidColorBrush for my whole app:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="{ThemeResource SystemAccentColorLight2}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="{ThemeResource SystemAccentColorDark1}"/>
<SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="{ThemeResource SystemAccentColorDark2}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<ResourceDictionary>
</Application.Resources>
When I add these specific SolidColorBrush to my ThemeDictionary in App.xaml (I have more resources placed there) it has no effect.
However, when I place this ThemeDictionary in the Application.Resources of a Page with a ListView it does have an effect.
What is the problem here, and how can I solve it?

How use the styles merged?

How do I use merged styles? I am merging in application file then I want to use it on another screen, but I don't find the style, what is my wrong?
<?xml version="1.0" encoding="UTF-8"?>
<ResourceDictionary xmlns=...
x:Class="CodeFabric.ExpenseTracker.Mobile.Forms.Styles.EntryStyle">
<Style x:Key="highlightedLabel" TargetType="Label">
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="LightGreen" />
</Style>
</ResourceDictionary>
I am merging here: until here all is working fine
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary MergedWith="local:EntryStyle"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
but when I am using the style here, the style isn't found. Why?
<Label Style="{StaticResource highlightedLabel}" Text="I'm Highlighted" />

The 'MergedWith' property is obsolete now, see https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.resourcedictionary.mergedwith?view=xamarin-forms
Basically, you can use merged dictionaries with a standalone resource file like this:
<Application ...
xmlns:local="clr-namespace:ResourceDictionaryDemo">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<local:MyResourceDictionary />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
...
</Application>
More usage please refer to official doc
Hope it helps.

Try this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<local:EntryStyle />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
hope this helps.-

How can I define a theme in a UWP Library?

I'm creating a UWP library that contains custom controls and I want to define a dark and light theme for my controls. I understand that we can add a theme resource dictionary to the App.xaml. We can specify a dark/light theme there and set the requested theme property. But since I am making a library, I don't have an App.xaml in my project. Is it possbile for me to define a theme within the library project? How?

You can create a resource dictionary file in Microsoft Visual Studio by using the Add > New Item… > Resource Dictionary option from the Project menu. Then we can define the ThemeDictionaries in the ResourceDictionary file.
For example:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibrary1">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="CustomColor" Color="Orange" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="CustomColor" Color="Blue" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="CustomColor" Color="Green" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
To use that dictionary, we can merge it with control’s dictionary:
<UserControl
x:Class="ClassLibrary1.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibrary1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Rectangle Fill="{ThemeResource CustomColor}" Width="500" Height="500"></Rectangle>
</Grid>
</UserControl>
If you want to specify a dark/light theme, you can set RequestedTheme in the Control.

Linking ThemeDictionaries in Library Project

I created 2 ResourceDictionary/theme files in Themes folder named Light.xaml and Dark.xaml.
Added SolidColorBrush with name BgColor in both files :
<SolidColorBrush x:Name="BgColor" Color="Silver" /> // in Light.xaml
<SolidColorBrush x:Name="BgColor" Color="WhiteSmoke" /> // in Dark.xaml
In Application type project, I can add below XAML code in App.xaml so I can reference this resource in my UserControl :
<Application>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark" Source="Themes/Dark.xaml" />
<ResourceDictionary x:Key="Light" Source="Themes/Light.xaml"/>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Since this is Library Project, there's no App.xaml on my project.
So how to link this ThemeDictionaries so I can use it in my UserControl in Library Project ?

So how to link this ThemeDictionaries so I can use it in my UserControl?
You can reference the resource dictionary in your App.xaml like below:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark" Source="ms-appx:///MyThemeLibrary/Themes/Dark.xaml"/>
<ResourceDictionary x:Key="Light" Source="ms-appx:///MyThemeLibrary/Themes/Light.xaml"/>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
MyThemeLibrary is the reference name of your class library. After that you can use the theme that you defined in Dark.xaml and Light.xaml like below:
<UserControl
...
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="{ThemeResource BgColor}">
</Grid>
</UserControl>

UWP, App.Xaml: Override default brushes

If I need to override a color in a brush, I would set it into App.xaml like this:
<Application.Resources>
...
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="#A7A9AC" />
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Black" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
...
</Application.Resources>
The editor underlines <ResourceDictionary> saying: "Each dictionary entry must have an associated key".
How can solve this?

I solved the problem, thanks to #Alan Yao - MSFT.
Maybe you have more things there?, I had something else, written into the ResourceDictionary. By making ResourceDictionary parent of everything inside Application.Resources, I solved the problem.

The ResourceDictionary has to be placed inside application resources:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="#A7A9AC" />
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Black" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>