I'm currently working on a Xamarin.Forms application and am specifically applying styles. I've seen examples of global styles placed in the App.xaml file of the desired platform project and was under the impression that you could reference the globally declared styles with a DynamicResourcereference such as below:
in UWP App.xaml
<Application
<Application.Resources>
<ResourceDictionary>
<Style x:Key="myLabel" TargetType="TextBlock">
<Setter Property="Foreground" Value="Purple" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Then in Login.xaml in the Portable Project
<Label Text="hey hey im purple" Style="{DynamicResource myLabel}" />
I'm under the impression that this text should be purple, however it is not. I can style the Label using a ResourceDictionary defined within the page that it is used, however I cannot use it in global.
The interesting thing is that if I declare an implicit global style, it works:
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Purple" />
</Style>
It's when I try explicit global styles with x:Key="myVariable" that it doesnt work.
tldr; global explicit styles are not working for me (but global implicit styles are working)
Any ideas Stack Community? Thanks!
You should define this in your common project's app.xaml instead of define this in UWP app.xaml.
I see that works by myself.
Related
I have a master-detail page in my project and added some content pages into it as the children. How I can change the color of the top bar of the child content page? I have added some icons on the top bar using <NavigationPage.TitleView>.
I need to change the red square background color. Already I tried the solution preferred here, but that not solves my problem.
In order to change that Navigation bar's background color for Android follow the following steps:
Go to your Android Project -> Resources -> values -> styles.xml
Open style.xaml file update colorPrimary value with your required hex color code
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#3478c9</item>
For iOS this can be controlled from App.xaml file, no need to write anything in iOS project
<Application.Resources>
<ResourceDictionary>
<!-- Styles -->
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#3478c9"/>
<Setter Property="BarTextColor" Value="White"/>
</Style>
<!-- Styles -->
</ResourceDictionary>
</Application.Resources>
I'm developing a UI library project. It contains set of pages that will be used in two different UWP app projects. The problem is that in one project, the developers uses a theme that modifies the appearance of the basic controls such as the font size of a textblock or TextBox, the margin of the ContentControls etc. In my library, I used pretty basic controls text box, combobox, date picker. It affects how the pages in the UI library that I'm working on looks. I want the pages in my library to look like a basic input form. How can I tell the UI library to not follow whatever theme the Application is using?
How can I tell the UI library to not follow whatever theme the Application is using?
You could add a 'Resource Dictionary' file in your UI library project. In the 'dictionary.xaml' file, you could define a basic style for the controls which is used in your UI library pages. Then, the controls will not be affected by the resource style in the main project.
For example, I add a 'generic.xaml' file in the UI library project and define a style for the button like the following:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibraryUI">
<Style TargetType="Button" BasedOn="{StaticResource ButtonRevealStyle}">
</Style>
</ResourceDictionary>
I have a 'BlankPage1.xaml' in the UI library.
<Page
x:Class="ClassLibraryUI.BlankPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClassLibraryUI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="generic.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Button Content="Hello UWP"></Button>
</Grid>
</Page>
In the main project, I defined a style for the button in 'App.xaml':
<Application
x:Class="AppUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppUI">
<Application.Resources>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="Background" Value="LightBlue"></Setter>
<Setter Property="Width" Value="200"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</Application.Resources>
</Application>
On the 'MainPage.xaml':
<StackPanel>
<Button Content="Navigate" Click="Button_Click"></Button>
<Frame x:Name="frame"></Frame>
</StackPanel>
In the 'MainPage.xaml.cs', I use Frame control to navigate to the 'BalnkPage1' in the UI library.
You would see the 'Navigate' button on the MainPage will use the style in 'Application.Resources', but the button on 'BlankPage1' will use the style in its own 'generic.xaml' file.
I want to set custom fonts for some controls, so if I set a font inside the only one ResourceDictionary and use it in styles then everything works just fine. But this approach is not fine for me, because I need to have font declarations in a separate dictionary then styles that are using them.
In App.xaml I have made several Resource Dictionaries
<Application ...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/ResourceAgencyDictionary.xaml"/>
<ResourceDictionary Source="Resources/ResourceCommonDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
....
</Application>
In ResourceAgencyDictionary.xaml I have MyFontFamilyNormal declaration
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontFamily x:Key="MyFontFamilyNormal">/GBAgencyCommon;component/Fonts/Fonts.zip#Gotham Book</FontFamily>
.....
</ResourceDictionary>
In ResourceCommonDictionary.xaml I want to use that font family (MyFontFamilyNormal):
<ResourceDictionary ...>
<Style x:Key="MyTextBlockValueStyle" BasedOn="{StaticResource PhoneTextBlockBase}" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MyFontFamilyNormal}"/>
....
</Style>
</ResourceDictionary>
The project compiles but I get a runtime error
System.Windows.Markup.XamlParseException occurred
_HResult=-2146233087
_message=Cannot find a Resource with the Name/Key MyFontFamilyNormal
Does anyone know how can I fix that?
Sorry guys, searched the solution a lot in Internet and just found it.
The solution was simple (I've tried it but with wrong path to file and didn't notice that it was the right direction)
so in App.xaml
<Application ...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/ResourceCommonDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
....
</Application>
the ResourceAgencyDictionary.xaml is the same
in ResourceCommonDictionary.xaml
<ResourceDictionary ...>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceAgencyDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="MyTextBlockValueStyle" BasedOn="{StaticResource PhoneTextBlockBase}" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource MyFontFamilyNormal}"/>
....
</Style>
</ResourceDictionary>
NOTE: Source="ResourceAgencyDictionary.xaml" because this file is in the same folder as ResourceCommonDictionary.xaml
In my Windows Phone 7.5 application i want to have a merged ResourceDictionary filled with DataTemplates. To achieve this, i created a file called "DataTemplates.xaml" and filled it with DataTemplates like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate x:Key="ItemTemplate">
<!-- xaml -->
</DataTemplate>
<DataTemplate x:Key="GroupHeaderTemplate">
<!-- xaml -->
</DataTemplate>
<DataTemplate x:Key="GroupItemTemplate" >
<!-- xaml -->
</DataTemplate>
</ResourceDictionary>
In page where i want to use that DataTemplates i wrote this code:
<phone:PhoneApplicationPage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/myAssemblyName;component/Resources/DataTemplates.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</phone:PhoneApplicationPage.Resources>
But, when i debug and try to navigate to the page that contains the ResourceDictionary i got a XamlParseException: Failed to assign to property 'System.Windows.ResourceDictionary.Source'
How can i do? :( Thank you!
Ok, i spent about 20 minutes to write question and after rereading it i found solution, so i answer myself: i accidentally wrote the namespace of solution instead of its assembly name! That's all, now the ResourceDictionary loads properly :)
I just want to customize the PhoneAccentColor within my application, but it doesn't seem to work.
I made App Resources looking like:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Utils/Converters.xaml"/>
<ResourceDictionary Source="Resources/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<ViewModels:ViewModelLocator x:Key="ViewModelLocator" d:IsDataSource="True" />
<Resources:ResourcesWrapper x:Key="ResWrapper" d:IsDataSource="True" />
</ResourceDictionary>
</Application.Resources>
And in the Styles.xaml I redefined the PhoneAccentColor like this:
<Color x:Key="PhoneAccentColor">#FFFF0000</Color>
But for any reason the default phone accent color is still used.
For example I'm using the PerformanceProgressBar from the toolkit which still uses the default color instead of the definied red.
Is there anything I missed?
Solved: Seems like you also have to override within the Styles.xaml.