how to user color from global resources? - xaml

I want to set my resources on the app.xaml and then use it in the differents views of the app, but when I set the color the app crashes u.u, could someone help me ?
app.xaml
<Application.Resources>
<ResourceDictionary>
<Color x:Key="Primary">#FFC107</Color>
</ResourceDictionary>
</Application.Resources>
use it in a StackLayout
<StackLayout Orientation="Vertical" BackgroundColor="{StaticResource Primary}">

Has you called InitializeComponent in the App.xaml.cs?

you need to use Static Resource,I find a good resource for you:
https://blog.xamarin.com/easy-app-theming-with-xamarin-forms-styles/
So you need to do the following:
1- Define a ResourceDictionary at the app-level in App.xaml
<Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MonkeyTweet.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="backgroundColor">#33302E</Color>
<Color x:Key="textColor">White</Color>
</ResourceDictionary>
</Application.Resources>
</Application>
2- Use StaticResource markup extension to reference predefined resources:
<Label Text="{Binding Text}" TextColor = "{StaticResource textColor}"/>

BackgroundColor="{DynamicResource Primary}"
its a DynamicResource, not a StaticResource.
Here's what my code looks like for example:
App.xaml has
<Color x:Key="titleColor">Green</Color>
and a page.xaml has
TextColor="{DynamicResource titleColor}"

Related

Create a controltemplate on a page other than App.xaml and how to call it from other pages

I have to create a template common to all pages, only I would like to avoid creating it in the App.xaml page, but creating it in another page makes me mistake when I call it.
This is how I called the template, the page name is Template.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard"
xmlns:viewmodels="clr-namespace:GET_SOUND.ViewModels" x:DataType="viewmodels:AppViewModel"
x:Class="GET_SOUND.Template">
<ContentPage.Resources>
<ControlTemplate x:Key="HeaderFooterTemplate">
...
</ControlTemplate>
</ContentPage.Resources>
So is the way I call it
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GET_SOUND.Views.Dashboard"
xmlns:renderers="clr-namespace:GET_SOUND.Renderers"
Shell.NavBarIsVisible="False"
ControlTemplate="{StaticResource HeaderFooterTemplate}">
When I created the template in App.xaml I called it like this and it worked without problems
If what you are looking for is to define your control template in a separate file, than you can do that with a Stand-alone resource dictionaries (follow docs instruction on how to add such file in your VS), which you merge with your App.xaml resources:
App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="TemplatesResourceDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
TemplatesResourceDictionary.xaml:
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ControlTemplate x:Key="HeaderFooterTemplate">
<Grid BackgroundColor="Red"/>
</ControlTemplate>
</ResourceDictionary>
Note
In this sample, the files TemplatesResourceDictionary.xaml and App.xaml are supposed to be located on the same folder, if it is not the case with your project structure then you have to modify the Source property accordingly.

ResourceDictionary in a separate assembly dont works. Error Invalid URI

i get this error if i try to inovke my ResourceDictionary from a Class Libary. I follow this Post but its dont works for me. I dont know what i do wrong.
Invalid URI: Invalid port specified.
My App.xaml:
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="JoinApp.App">
<Application.Resources>
<ResourceDictionary Source="pack://application:,,,/App_Libary;component/9.Resource/test.xaml"/>
</Application.Resources>
</Application>
My XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="false"
ControlTemplate="{StaticResource BaseTemplate}"
x:Class="App_Libary.Profile_Page">
<ContentView ControlTemplate="{StaticResource testcontrol}"/>
</ContentPage>
My ResourceDictionary:
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App_Libary._9.Resource.test">
<ControlTemplate x:Key="testcontrol">
<Label Text="this is a test"/>
</ControlTemplate>
</ResourceDictionary>
You could do like below:
create the ResourceDictionary xaml (remove x:Class in the root attribute),for example named mytemp.xaml:
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
>
<ControlTemplate x:Key="testcontrol">
<Label Text="this is a test"/>
</ControlTemplate>
</ResourceDictionary>
define in your App.xaml:
i get this error if i try to inovke my ResourceDictionary from a Class Libary. I follow this Post but its dont works for me. I dont know what i do wrong.
Invalid URI: Invalid port specified.
My App.xaml:
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="JoinApp.App">
<Application.Resources>
<ResourceDictionary Source="mytemp.xaml"/> // if you have sub folder could use Source="yourfolder/mytemp.xaml"
</Application.Resources>
</Application>
then use in your page.xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="false"
ControlTemplate="{StaticResource BaseTemplate}"
x:Class="App_Libary.Profile_Page">
<ContentView ControlTemplate="{StaticResource testcontrol}"/>
</ContentPage>

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>