ResourceDictionary: System.InvalidCastException - xaml

I get an Exception throw and I cant figure out why. My guess is that Im overlooking something simple. The Exception gets thrown in ResourceSharingPage.xaml.g.cs
this is my xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BookCodedotNet2.ResourceSharingPage">
<ContentPage.Resources>
<ResourceDictionary>
<x:String x:Key="fontSize">Large</x:String>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Button Text=" Carpe diem ">
<Button.FontSize>
<StaticResourceExtension Key="fontSize"/>
</Button.FontSize>
</Button>
</StackLayout>
</ContentPage>
If I remove
<Button.FontSize>
<StaticResourceExtension Key="fontSize"/>
</Button.FontSize>
I can build the app.

In the resources, try something like below. Use double value instead of string as FontSize is a double.
<ResourceDictionary>
<x:Double x:Key="fontSize">35</x:Double>
</ResourceDictionary>

You've defined the resource of type x:String. FontSize doesn't accept values of type String. It only accepts values of type Double or NamedSize. As you mentioned in the comment to Abdul Gani's answer, you should be defining NamedSize.
You are better off using the Style tag and setting the style of your Label that way. Follow SushiHangover's answer over here if you want to use Style instead.

You can use NamedSize in resource dictionary in this way:
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="fontSize" TargetType="Button">
<Setter Property="FontSize" Value="Large" />
</Style>
<Color x:Key="NormalTextColor">Blue</Color>
<Style x:Key="MediumBoldText" TargetType="Button">
<Setter Property="FontSize" Value="Large" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Button Text=" Carpe diem " Style="{StaticResource fontSize}"> </Button>
<Button Text="Test"
TextColor="{StaticResource NormalTextColor}"
Style="{StaticResource MediumBoldText}" />
</StackLayout>

Related

xamarin image button svg with text (size svg)

I want to make a button, image button svg with text.
In xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
mc:Ignorable="d"
x:Class="loginUI.L202">
<StackLayout VerticalOptions="Center" Spacing="50">
<StackLayout.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
</Style>
<Style TargetType="Image">
<Setter Property="WidthRequest" Value="50"/>
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Button Text=" test" BackgroundColor="Wheat" BorderRadius="20" TextColor="red">
<Button.Image>
<OnPlatform x:TypeArguments="FileImageSource" Android="home.svg" iOS="home.svg"/>
</Button.Image>
</Button>
</StackLayout>
How to set the size (WidthRequest | HeightRequest) for home.svg? TargetType="Image" does not work.
Or
There is a way to insert into the button like ?
<Button> <Path Data="M185.255 512c-76.201 ....." /> </Button>
Why use Button if you can use ImageButton?
<ImageButton Source="img.xml" WidthRequest="100" HeightRequest="100" />
But, if you want to use Button, then:
<Button ImageSource="img.xml" WidthRequest="100" HeightRequest="100" />
Why .xml?
Because you need to convert your .svg file in a Vector to use as ImageSource of your Button. Use this link to convert, then, add it on your drawable folder.

How do I reference a static resource inside a resource dictionary? [duplicate]

My main resources look like this:
<?xml version="1.0" encoding="utf-8"?>
<Application xmlns:converters="clr-namespace:Japanese"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Japanese.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary Source="/Resources/DetailRes.xaml" />
I have this resource file:
<?xml version="1.0" encoding="UTF-8" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Japanese.DetailRes">
<Style x:Key="DetailLabel" TargetType="Label">
<Setter Property="FontSize">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS" Value="35" />
<On Platform="Android" Value="35" />
</OnPlatform>
</Setter.Value>
</Setter>
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="LineBreakMode" Value="WordWrap" />
<Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>
</ResourceDictionary>
In XAML I access it like this:
<t:BaseFrameButtonTemplate xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:t="clr-namespace:Japanese.Templates"
xmlns:local="clr-namespace:Japanese;assembly=Japanese"
x:Class="Japanese.Templates.RoundButtonText" x:Name="this" >
<Label Text="{Binding Text, Source={x:Reference this}}"
Style="{StaticResource DetailRes}"
x:Name="Label" />
</t:BaseFrameButtonTemplate>
I would like to access this in C# but do not know how to do it. I tried this but it does not find the resource:
Label.Style = (Style)Application.Current.Resources["DetailRes"];
You can use the TryGetValue to obtain a single from your ResourceDictionary:
if (Application.Current.Resources.TryGetValue("DetailLabel", out object style))
{
someLabel.Style = (Style)style;
}

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"/>

In Xamarin XAML, how do I set a Constraint on a RelativeLayout using a Style?

I am struggling to work out the XAML syntax to apply constraints to a RelativeLayout using a Style.
The first piece of Xamarin XAML below shows a pair of nested RelativeLayout elements used to construct a simple layout (the inner element simply puts a margin around an area to which I can add other content). This version of the code builds and runs fine on iOS and Android.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Page1">
<RelativeLayout BackgroundColor="Gray">
<RelativeLayout BackgroundColor="Maroon"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.9,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.9,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.05,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.05,Constant=0}">
<BoxView Color="Yellow"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"/>
</RelativeLayout>
</RelativeLayout>
</ContentPage>
What I would like to do it use the same layout on multiple pages, so I want to put the RelativeLayout constraints into a Style. This second piece of code does not parse or run, but I hope it shows what I am trying to achieve. If I can get the right syntax for this, the idea is that the Style can then be moved out into a shared file, so I can easily re-use it across multiple instances of ContentPage.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Page2">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="LayoutStyle" TargetType="RelativeLayout">
<Setter Property="BackgroundColor" Value="Maroon"/>
<Setter Property="HeightConstraint">
<Setter.Value>"Type=RelativeToParent,Property=Height,Factor=0.9,Constant=0"</Setter.Value>
</Setter>
<Setter Property="WidthConstraint">
<Setter.Value>"Type=RelativeToParent,Property=Width,Factor=0.9,Constant=0"</Setter.Value>
</Setter>
<Setter Property="YConstraint">
<Setter.Value>"Type=RelativeToParent,Property=Height,Factor=0.05,Constant=0</Setter.Value>
</Setter>
<Setter Property="XConstraint">
<Setter.Value>"Type=RelativeToParent,Property=Width,Factor=0.05,Constant=0</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<RelativeLayout BackgroundColor="Gray">
<RelativeLayout Style="LayoutStyle">
<BoxView Color="Yellow"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"/>
</RelativeLayout>
</RelativeLayout>
</ContentPage>
Please can anyone help me out with the syntax for doing this?
This is a link to a complete example (which obviously requires Xamarin to be installed and needs the nuget packages to be restored): XAML Layout Example
Try this:
<ResourceDictionary>
<Style x:Key="LayoutStyle" TargetType="RelativeLayout">
<Setter Property="BackgroundColor" Value="Maroon"/>
<Setter Property="RelativeLayout.HeightConstraint" Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.9,Constant=0}"/>
<Setter Property="RelativeLayout.WidthConstraint" Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.9,Constant=0}"/>
<Setter Property="RelativeLayout.YConstraint" Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.05,Constant=0}"/>
<Setter Property="RelativeLayout.XConstraint" Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.05,Constant=0}"/>
</Style>
</ResourceDictionary>