How to call a Style in a ResourceDictionary file in XAML? - xaml

I have a button style in a created style.xaml ResourceDictionary file.
I used this code to call it:
<Button Style="{DynamicResource exitButton}" />
But it didn't recognize the style key either using StaticResource doesn't work too. How to solve this problem?
My style code:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="exitButton" TargetType="Button">
<Setter Property="Width" Value="22"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="#FF7070"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="X"
FontSize="15"
Foreground="White"
FontWeight="Bold"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

You have to import the ResourceDictionary file in your xaml, in the Resources tags.
Something like this:
<UserControl blablabla...>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/*PROJECT_NAME*;component/*FOLDER_PATH*/style.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</USerControl.Resources>
<!-- the content -->
...
<Button Style="{StaticResource exitButton}"/>
</UserControl>

You have two options:
As HasNotifications said, embede the resource into the view that you want the style take affect
Embed the style to the application ResourceDictionary. On that case the style will be available to any view on the application
Add the following code to the App.xaml file:
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/*PROJECT_NAME*;component/*FOLDER_PATH*/style.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

Related

Can Maui configure a shadow in a line?

I´m developing an app in .net maui and i have a question i have not answered myself through browsing.
I'm trying to apply a shadow to a border and the following code works perfectly.
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
<Border.Shadow>
<Shadow
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
</Border.Shadow>
</Border>
But when i write shadow directly inside the border properties it catches the property but i don't know how to dump the [brush, offset, radius & opacity] info:
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7"
Shadow="???????????????????????????">
</Border>
You can then define and consume it as a resource (same what you did with Style property):
<ContentPage.Resources>
<ResourceDictionary>
<Shadow
x:Key="CommonShadow"
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7"
Shadow="{StaticResource CommonShadow}">
</Border>
Or integrate it in your existing style of Border
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="light-theme-border" TargetType="Border">
<Setter Property="WidthRequest" Value="20" />
<Setter Property="Shadow">
<Setter.Value>
<Shadow
Brush="red"
Opacity="1"
Radius="50"
Offset="20,20" />
</Setter.Value>
</Setter>
</Style>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
</Border>
Or integrate it in your existing style of Border as a static resource
<ContentPage.Resources>
<ResourceDictionary>
<Shadow
x:Key="CommonShadow"
Brush="red"
Offset="1,11"
Radius="20"
Opacity="0.25"/>
<Style x:Key="light-theme-border" TargetType="Border">
<Setter Property="WidthRequest" Value="20" />
<Setter Property="Shadow" Value="{StaticResource CommonShadow}"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Border
Style="{StaticResource light-theme-border}"
Grid.Column="1"
Grid.Row="3"
Grid.ColumnSpan="7">
</Border>

How to define ResourceDictionary by adding Style in Xamarin xaml {GroupStyle}

I'm trying to make something like set atribute to all labels inside a grid
I Know how to make it, just doing this:
<Grid RowSpacing="2" Padding="2,0,2,0">
<Grid.Resources>
<ResourceDictionary>
<Style BasedOn="{StaticResource Font-Awesome}" TargetType="Label"/>
</ResourceDictionary>
</Grid.Resources>
<Label Text="31 " Grid.Column="0" TextColor="#2764B5" XAlign="Start"/>
<Label Text="91 " Grid.Column="1" TextColor="#A0A1A2" XAlign="Center"/>
<Label Text="12 " Grid.Column="2" TextColor="#A0A1A2" XAlign="End"/>
</Grid>
But Its Ugly and redundant
I want to do smetthing like
<Grid RowSpacing="2" Padding="2,0,2,0" Style="{StaticResource grd-actions}">
<Label Text="31 " Grid.Column="0" TextColor="#2764B5" XAlign="Start"/>
<Label Text="91 " Grid.Column="1" TextColor="#A0A1A2" XAlign="Center"/>
<Label Text="Compartilhar " Grid.Column="2" TextColor="#A0A1A2" XAlign="End"/>
</Grid>
And On App Static Resources include the ResourceDictionary for the grid, something like:
<Style x:Key="gd-actions" TargetType="Grid">
<Setter Property="Resources">
<Setter.Value>
<ResourceDictionary>
<Style BasedOn="{StaticResource Font-Awesome}" TargetType="Label"/>
</ResourceDictionary>
</Setter.Value>
</Setter>
</Style>
I've being trying with a lot of ways but it's aways throw some kind of exception!
Can someone help-me Here?
I guess the most clean way to do this is by using Explicit Styles with Global Resources. Declare the style for that Labels in Application Resources and then in you label just add the Style Property:
Application:
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xforms_test.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="labelAquaStyle" TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="TextColor" Value="Aqua" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
And in your page:
<Grid RowSpacing="2" Padding="2,0,2,0">
<Label Grid.Column="0" Text="These labels" Style="{StaticResource labelAquaStyle}" />
<Label Grid.Column="1" Text="are demonstrating" Style="{StaticResource labelAquaStyle}" />
<Label Grid.Column="2" Text="explicit styles" Style="{StaticResource labelAquaStyle}" />
</Grid>

FontFamily defined in XAML per platform

In my Xamarin Forms project I would like to define the Form family onect per platform and the use that in the application.
So far I've hardcoded the FontFamily per controltype
<Style x:Key="TahomaBase_Label" TargetType="Label" BaseResourceKey="SubtitleStyle">
<Setter Property="FontFamily" Value="Tahoma" />
...
</Style>
Is it posible to set Fotnfamily globally in my XAML code preferable itn a OnPlatform tag?
Define a style in the App.xaml and then reference that style throughout the app. That way you can set the font once in the App.xaml using the OnPlatform tag and never have to worry about OnPlatform in all your other XAML files.
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="PlatformFontSample.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="FontFamilyName" x:TypeArguments="x:String" iOS="MarkerFelt-Thin" Android="OpenSans" WinPhone="Segoe UI" />
<Style x:Key="FontLabel" TargetType="Label">
<Setter Property="FontFamily" Value="{DynamicResource FontFamilyName}" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
And then:
<Label Text="{Binding Name}" Style="{DynamicResource FontLabel}" FontSize="Medium" FontAttributes="Bold" LineBreakMode="NoWrap"/>

Xaml Style Child Control in Universal Windows Platform (UWP)

I would like to know how to set style targetting child controls on the UWP within a style definition.
WPF seems to have 'Style.Resources' to define sub-styles but this doesn't seem the case for UWP
example in wpf : WPF - How to create a style that applies styles to child types
If you want the styles in separate sheets ( which you should. I showed the Styles in the control itself because I misread and thought that's what you wanted ) you can create a Resources folder and add different ResourceDictionaries. Personally I usually create a separate dictionary for Brushes, Styles, Templates, and Converters. Then you declare them in the ResourceDictionary.MergedDictionaries in App.xaml
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Brushes.xaml" />
<ResourceDictionary Source="/Resources/Styles.xaml" />
<ResourceDictionary Source="/Resources/Converters.xaml" />
<ResourceDictionary Source="/Resources/Templates.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
You can define Styles in the ResourceDictionary of the parent control. The Style defined in Window.Resources applies to all Rectangles because it doesn't specify a Key, so the Rectangle in the first StackPanel is yellow and small. The second StackPanel defines it's own Resources, which its children use, and they end up different colors and a larger size. There's also Style inheritance in there using BasedOn
<Window x:Class="GBTest.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"
xmlns:local="clr-GBTest"
mc:Ignorable="d"
Title="MainWindow"
Height="350"
Width="525">
<!--Default style defined in the Window Resources-->
<Window.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width"
Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="Fill"
Value="Yellow" />
</Style>
</Window.Resources>
<StackPanel>
<Rectangle />
<StackPanel>
<!--The styles defined in the resources of this StckPanel will apply to its children, overriding the default style defined in the Window Resources-->
<StackPanel.Resources>
<Style TargetType="Rectangle"
x:Key="BigStyle">
<Setter Property="Height"
Value="200" />
<Setter Property="Width"
Value="200" />
</Style>
<Style TargetType="Rectangle"
x:Key="RedStyle"
BasedOn="{StaticResource BigStyle}">
<Setter Property="Fill"
Value="Red" />
</Style>
<Style TargetType="Rectangle"
BasedOn="{StaticResource BigStyle}"
x:Key="BlueStyle">
<Setter Property="Fill"
Value="Blue" />
</Style>
</StackPanel.Resources>
<Rectangle Style="{StaticResource RedStyle}" />
<Rectangle Style="{StaticResource BlueStyle}" />
</StackPanel>
</StackPanel>

How do I prevent excessive nesting of tags in XAML?

Consider the following code where a cell's color changes depending on whatever (attributes stripped for brevity):
<UserControl>
<Grid>
<ListView>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock>
<TextBlock.Style>
<Style>
<Style.Triggers>
<Trigger>
<Setter>
<Setter.Value>
<LinearGradientBrush>
<GradientStop/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</UserControl>
Are there any advanced techniques in XAML that go beyond reducing indentation from 4 to 2 and trying to shove as much stuff as I can into the top level (UserControl's in this case) resource dictionary?
PS: I'm stuck with VS 2008.
Make use of Resources to simplify your XAML. It also makes for better reuse and organization. For example, with the above XAML you could break it apart into the following:
<UserControl>
<UserControl.Resources>
<LinearGradientBrush x:Key="MyBrush">
<GradientStop/>
</LinearGradientBrush>
<Style x:Key="ItemTextBlockStyle" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource MyBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="ItemTemplate">
<TextBlock Style="{DynamicResource ItemTextBlockStyle}"/>
</DataTemplate>
<Style x:Key="MyListViewStyle" TargetType="{x:Type ListView}">
<Setter Property="View">
<Setter.Value>
<GridView>
<GridViewColumn CellTemplate="{DynamicResource ItemTemplate}"/>
</GridView>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<ListView Style="{DynamicResource MyListViewStyle}"/>
</Grid>
</UserControl>