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.-
Related
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
Can merged resource dictionaries access resources from App.xaml? The goal is to split the style to have it more readable.
This is what I'm looking for, but doesn't work in that way:
App.xaml in UWP project
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles\DefaultButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<!-- other custom styles, definitions, ThemeDictionaries, ... -->
<Color x:Key="Primary">#dfdfdf</Color>
</Application.Resources>
DefaultButtonStyle.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppName.UWP.Styles">
<!-- some definitions -->
<Style TargetType="Button" x:Key="DefaultButtonStyle">
<!-- my styles -->
<Setter Property="Background" Value="{StaticResource Primary}" />
</Style>
</ResourceDictionary>
The app crashes with
Cannot find a Resource with the Name/Key Primary
I could put everything in one big style.xaml, or copy the needed values in each xaml file, but aren't there other options? Could a merged dictionary include another merged dictionary? Or something like that?
I have used separated dictionaries and have tried to keep them in order of usage. In my application I have:
ColorsAndBrushes.xaml
SizesAndLayout.xaml
DefaultStyles.xaml
NamedStyles.xaml
Where ColorsAndBrushes looks something like:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.App.Styles">
<!-- Colors -->
<Color x:Key="Color_Banner">#FF333232</Color>
<!--overridden from themeresource-->
<Color x:Key="SystemChromeDisabledLowColor">#FFA8A49F</Color>
<Color x:Key="SystemAccentColor">#FF2877CF</Color>
<!-- /Colors -->
<!-- Brushes -->
<SolidColorBrush x:Key="Brush_Banner" Color="{StaticResource Color_Banner}" />
<!-- /Brushes -->
</ResourceDictionary>
SizesAndLayout:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.App.Styles">
<!-- Padding -->
<Thickness x:Key="Padding_Button">24,4</Thickness>
<Thickness x:Key="Padding_Dialog">10</Thickness>
<Thickness x:Key="Padding_Content">20</Thickness>
<!-- /Padding -->
<!-- Fonts -->
<FontFamily x:Key="Font_DefaultFamily">Segoe UI</FontFamily>
<FontWeight x:Key="Font_DefaultWeight">SemiLight</FontWeight>
<FontWeight x:Key="Font_NormalWeight">Normal</FontWeight>
<FontWeight x:Key="Font_BoldWeight">Semibold</FontWeight>
<x:Double x:Key="ContentControlFontSizeSmall">11</x:Double>
<x:Double x:Key="Font_NormalSize">20</x:Double>
<x:Double x:Key="Font_H1Size">36</x:Double>
<x:Double x:Key="Font_H2Size">28</x:Double>
<!-- /Fonts -->
</ResourceDictionary>
DefaultStyles (apply to all of type - these use resources from other 2):
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.App.Styles">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ColorsAndBrushes.xaml" />
<ResourceDictionary Source="SizesAndLayout.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource Font_DefaultFamily}" />
<Setter Property="FontWeight" Value="{StaticResource Font_DefaultWeight}" />
<Setter Property="FontSize" Value="{StaticResource Font_NormalSize}" />
<Setter Property="TextWrapping" Value="WrapWholeWords" />
</Style>
</ResourceDictionary>
and NamedStyles are overrides of the default:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.App.Styles">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ColorsAndBrushes.xaml" />
<ResourceDictionary Source="SizesAndLayout.xaml" />
<ResourceDictionary Source="DefaultStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="FontStyle_H1" TargetType="TextBlock" BasedOn="{StaticResource FontStyle_Default}">
<Setter Property="FontSize" Value="{StaticResource Font_H1Size}" />
<Setter Property="Foreground" Value="{StaticResource Brush_DarkBlue}" />
<Setter Property="Margin" Value="{StaticResource Margin_TitleFont}" />
</Style>
</ResourceDictionary>
And finally, in the App.xaml:
<Application
x:Class="MyApp.App.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.App"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/ColorsAndBrushes.xaml" />
<ResourceDictionary Source="Styles/SizesAndLayout.xaml" />
<ResourceDictionary Source="Styles/DefaultStyles.xaml" />
<ResourceDictionary Source="Styles/NamedStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
It works for me and keeps the XAML files smaller by using the smaller scoped files. However, I will say there are times that Visual Studio will give me a bunch of squigglies complaining that it can't figure out the namespace... but only when the file is open.
I have also experienced that, while at runtime, the order of the declaration of static resources does not matter, at times, the designer within Visual Studio will not render the styles if they aren't in a top-down format.
Good luck!
Try this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles\DefaultButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- other custom styles, definitions, ThemeDictionaries, ... -->
<Color x:Key="Primary">#dfdfdf</Color>
</ResourceDictionary>
</Application.Resources>
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>
I want use a external file to customize styles on my app, but it does not working. I am following this step-by-step but when I execute the project exception falls into:
A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.ni.dll
My XAML code:
app.xaml:
<Application.Resources>
<local:LocalizedStrings xmlns:local="clr-namespace:App1" x:Key="LocalizedStrings"/>
<ResourceDictionary x:Key="myDict">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Resources.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBox" x:Key="MyTextBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="Foreground" Value="Red"/>
</Style>
</ResourceDictionary>
Try moving your local resource declarations inside the ResourceDictionary that you're creating and assigning to the Application.Resources property:
<Application.Resources>
<ResourceDictionary x:Key="myDict">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:LocalizedStrings xmlns:local="clr-namespace:App1" x:Key="LocalizedStrings"/>
<!-- other resources in here -->
</ResourceDictionary>
</Application.Resources>
I need to separate application styles to several xaml files.
But I also need to define some shared values like
<x:Double x:Key="SharedValue">100</x:Double>
in single file for use this value in styles defined in other files.
For instance:
<Style x:Name="SomeStyle" TargetType="TextBox">
<Setter Property="Width" Value="{StaticResource SharedValue}"/>
</Style>
and in another resource dictionary file:
<Style x:Name="AnotherStyle" TargetType="Button">
<Setter Property="Height" Value="{StaticResource SharedValue}"/>
</Style>
But when I try to define merged resource dictionary in App.xaml file
<Application.Resources>
<ResourceDictionary >
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="DefinedValues.xaml"/>
<ResourceDictionary Source="Styles1.xaml"/>
<ResourceDictionary Source="Styles2.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I get this runtime exception:"Message = "Cannot find a Resource with the Name/Key SharedValue"
Can you tell me is it posible to do this and what I'm doing wrong?
Thanks.
Using merged dictionaries can get a bit tricky if you have dependencies between other merged dictionaries.
When you have multiple application-scope resources the order of the declare is important. They are resolved in the inverse order of the declare, so in your case you should have the order.
<Application.Resources>
<ResourceDictionary >
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles1.xaml"/>
<ResourceDictionary Source="Styles2.xaml"/>
<ResourceDictionary Source="DefinedValues.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Also, you may need to reference the other ResourceDictionary in Styles1.xaml. This worked for me in Styles1.xaml.
<ResourceDictionary "...">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SharedValues.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Name="AnotherStyle"
TargetType="Button">
<Setter Property="Height"
Value="{StaticResource SharedValue}" />
</Style>
</ResourceDictionary>