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.
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;
}
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>
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"/>
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>