How can I dynamically connect Material icon code with prefix \u in Xamarin?
This not work:
string iconCode = "e87e";
Label label = new Label
{FontFamily = "IconMaterial", Text = $"\u{iconCode}"}
And How can I do the same thing in XAML code?
Thank you!
If you want to use the Material icon, you need to set the FontFamily first.
<ContentPage.Resources>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style x:Key="MaterialIcons" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="{DynamicResource Material}" />
<Setter Property="FontSize" Value="400" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="FontSize" Value="Large" />
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<Label x:Name="label" ></Label>
</StackLayout>
</ContentPage.Content>
And set the Text in code behind.
label.Text = "\ue87e";
Related
I am trying to convert my properties of a pancake control into a style so all my pancake controls are styled the same. This is what my XAML looks like.
<yummy:PancakeView x:Name="pvMEssage" BackgroundColor="{DynamicResource ExceptionBackground}" CornerRadius="0,0,20,20" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Padding="0,0,0,0" Margin="0,0,0,0">
<yummy:PancakeView.BackgroundGradientStops StartPoint="0,0" EndPoint="0,0">
<yummy:GradientStop Offset="0.1" Color="{DynamicResource ExceptionBackground}" />
</yummy:PancakeView.BackgroundGradientStops>
<yummy:PancakeView.Border>
<yummy:Border Color="White" Thickness="2" />
</yummy:PancakeView.Border>
I know how to use setter.value in a style but I cannot figure out how to put the backgroundgradientstops in the style.
I have this so far:
<Style x:Key="PancakeViewTop" TargetType="yummy:PancakeView">
<Setter Property="CornerRadius" Value="20,20,0,0" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="Padding" Value="0,0,0,0" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="BackgroundGradientStartPoint" Value="0,0" />
<Setter Property="BackgroundGradientEndPoint" Value="0,0" />
<Setter Property="BackgroundGradientStops">
<Setter.Value>
<yummy:GradientStop Offset="0.1" Color="{DynamicResource ExceptionBackground}" />
</Setter.Value>
</Setter>
<Setter Property="Border">
<Setter.Value>
<yummy:Border Color="White" Thickness="2" />
</Setter.Value>
</Setter>
</Style>
but I get an error on these lines
<Setter Property="BackgroundGradientStops">
<Setter.Value>
that states "The specified value cannot be assigned. The following type was expected: "GradientStopCollection"
Try with:
<Setter Property="BackgroundGradientStops">
<Setter.Value>
<pancake:GradientStopCollection>
<pancake:GradientStop Offset="0.1" Color="{DynamicResource ExceptionBackground}"/>
<pancake:GradientStop Offset="0.5" Color="{DynamicResource OtherColor}"/>
</pancake:GradientStopCollection>
</Setter.Value>
</Setter>
Also you need to specify at least 2 colors (2 GradientStop) otherwise it will throw an exception
Java.Lang.IllegalArgumentException: 'needs >= 2 number of colors'
and it does not make sens a gradient with only one color.
I'm trying to create a TitleView where the navigation title is centered in the middle of the screen. But have buttons on either or both sides.
(I recently found posts saying it was best to add buttons to the TitleView rather than ContentPage.ToolbarItem as we couldn't changes the colour of the text.)
Instead we opted for fixed width buttons / spacers, so we could have a middle label for the title which would be centered. You can see the result below, unforunetly I'm going to have to increased the size of the button for longer text. We also support several languages so the text could be longer still.
Here's the xaml
<NavigationPage.TitleView>
<StackLayout Style="{StaticResource TitleViewStackLayout}">
<Label Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Text="{tran:Translate Contact_ConfirmEmail}"
Style="{StaticResource TitleViewLabel}" />
<Button Style="{StaticResource TitleViewButton}"
HorizontalOptions="End"
Text="{tran:Translate Common_Restart}"
Command="{Binding ToolbarItemRestartCommand}"/>
</StackLayout>
</NavigationPage.TitleView>
And here's our style...
<Style x:Key="TitleViewStackLayout" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="Spacing" Value="0" />
</Style>
<Style x:Key="TitleViewLabel" TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="FontSize" Value="{DynamicResource Title}" />
</Style>
<OnPlatform x:Key="TitleViewItemMargin" x:TypeArguments="Thickness" Android="10,0,10,0" iOS="0" />
<OnPlatform x:Key="TitleViewItemWidth" x:TypeArguments="x:Double" Android="60" iOS="50" />
<Style x:Key="TitleViewButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="TitleViewSpacer" TargetType="Label">
<Setter Property="BackgroundColor" Value="{DynamicResource DarkBlue}" />
<Setter Property="TextColor" Value="{DynamicResource White}" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="{DynamicResource TitleViewItemMargin}" />
<Setter Property="WidthRequest" Value="{DynamicResource TitleViewItemWidth}" />
<Setter Property="FontSize" Value="16" />
</Style>
I did think about using a grid, I know could also add three columns all with Grid.Column="0".. but I'd then have the possibility of a long title which would overlap the buttons. We do have some long titles. I guess I would need to be able to set a max width and add LineBreakMode="TailTruncation"
Xamarin Forms - center title in a stacklayout
I did think about repeating the text but transparent to achieve equal widths, but this wouldn't cater for 2 different buttons.
As you said , it could be better to use Grid instead of StackLayout .
In your case , you could set the width of three columns as a fixed percentage value. In this way , since the Text of Label is a long value , it will never cover the right Button .
<NavigationPage.TitleView>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.6*"/>
<ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Text="Back"
MaxLines="1"
Style="{StaticResource TitleViewSpacer}"
HorizontalOptions="Start" />
<Label Grid.Column="1" Text="Email Confirm Email Confirm Email Confirm Email Confirm Email Confirm"
MaxLines="1"
LineBreakMode="TailTruncation" // you could set it or not , both are OK ,it's up to you
Style="{StaticResource TitleViewLabel}" />
<Button Grid.Column="2" Style="{StaticResource TitleViewButton}"
HorizontalOptions="EndAndExpand"
Text="Restart"
WidthRequest="80"
Command="{Binding ToolbarItemRestartCommand}"/>
</Grid>
</NavigationPage.TitleView>
so i am trying to design a little login page, based on this tutorial:
Xamarin Tutorial
My code differs a little, this is my LoginPage.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="App.ViewModels.LoginPage"
BackgroundColor="{StaticResource BackgroundColor}">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--header spacing-->
<BoxView BackgroundColor="Green" Grid.Row="0"/>
<Image Source="LoginBackground.png" Aspect="AspectFill" HeightRequest="150"/>
<Image Source="CurvedLimiter.png" VerticalOptions="End" HeightRequest="50" Aspect="Fill"/>
<!--header-->
<BoxView BackgroundColor="White" Grid.Row="1" HeightRequest="100"/>
<StackLayout Grid.Row="1">
<Entry Text="Email" x:Name="Email" Style="{StaticResource LoginEntry}"/>
<Entry IsPassword="True" Text="Password" x:Name="Password" Style="{StaticResource LoginEntry}"/>
<Button Text="Login" x:Name="btnLogin" Clicked="btnLogin_Clicked" Style="{StaticResource LoginButton}"/>
</StackLayout>
<!--login-->
<BoxView BackgroundColor="White" Grid.Row="2"/>
</Grid>
</ScrollView>
</ContentPage>
As you can see, I am using StaticRessources, which are described in my App.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App.App">
<Application.Resources>
<ResourceDictionary>
<!-- colors -->
<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>
<Color x:Key="ButtonBackgroundColor">#5992FF</Color>
<Color x:Key="BackgroundColor">#5992FF</Color>
<!--Font families-->
<OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue" Android="sans-serif" />
<OnPlatform x:Key="LightFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Light" Android="sans-serif-light" />
<OnPlatform x:Key="MediumFontFamily" x:TypeArguments="x:String" iOS="HelveticaNeue-Medium" Android="sans-serif-medium" />
<!-- Font sizes -->
<Font x:Key="BodyFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="TagTextFont" FontSize="18" FontFamily="{StaticResource RegularFontFamily}" />
<Font x:Key="StatsNumberFont" FontSize="20" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="StatsCaptionFont" FontSize="16" FontFamily="{StaticResource LightFontFamily}" />
<Font x:Key="ButtonFont" FontSize="14" FontFamily="{StaticResource MediumFontFamily}" />
<!-- Styles -->
<Style x:Key="LoginEntry" TargetType="Entry">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
</Style>
<Style x:Key="LoginButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="15"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
<Setter Property="WidthRequest" Value="200"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="ProfileNameLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ProfileTagLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource TagTextFont}" />
</Style>
<Style x:Key="StatsNumberLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsNumberFont}" />
</Style>
<Style x:Key="StatsCaptionLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Margin" Value="0,-5,0,0"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="Font" Value="{StaticResource StatsCaptionFont}" />
</Style>
<Style x:Key="MainBodyLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource BodyFont}" />
</Style>
<Style x:Key="FollowButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="HeightRequest" Value="40"/>
<Setter Property="BorderRadius" Value="20"/>
<Setter Property="Font" Value="{StaticResource ButtonFont}"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
The thing is that this worked, at least in the XAML preview. However when I wanted to compile the code, I got the following error message, which refers to the first Font x:key=... Line:
Position 19:36. No property, bindable property, or event found for
'FontSize', or mismatching type between value and property.
Why is it? Now also the XAML previewer doesn't work anymore, because the project failed to compile...
Thanks very much in advance!
You are declaring your fonts wrong.
<Style x:Key="BodyFont" TargetType="Label">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}"/>
</Style>
And do the same for rest of the fonts.
I got this error in break mode in visual studio 2015 when I was learning to make a Xamarin.Forms page.
Unhandled Exception:
Xamarin.Forms.Xaml.XamlParseException: Position 12:10. Property Resources is null or is not IEnumerable
My App.xaml code is below
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bisells.App">
<Application.Resources>
<!-- Application resource dictionary -->
<!-- colors -->
<!--<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>-->
<Color x:Key="TimelineColor">#E4B6C3</Color>
<Color x:Key="HeaderTextColor">#3C3C3C</Color>
<Color x:Key="BodyTextColor">#869EAC</Color>
<Color x:Key="TimeColor">#A64C79</Color>
<!-- font families -->
<OnPlatform
x:Key="RegularFontFamily"
x:TypeArguments="x:String"
Android="sans-serif"
iOS="HelveticaNeue" />
<OnPlatform
x:Key="LightFontFamily"
x:TypeArguments="x:String"
Android="sans-serif-light"
iOS="HelveticaNeue-Light" />
<OnPlatform
x:Key="MediumFontFamily"
x:TypeArguments="x:String"
Android="sans-serif-medium"
iOS="HelveticaNeue-Medium" />
<!-- fonts -->
<Font
x:Key="HeaderFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="30" />
<Font
x:Key="SubHeaderFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="18" />
<Font
x:Key="TitleFont"
FontFamily="{StaticResource MediumFontFamily}"
FontSize="20" />
<Font
x:Key="BodyFont"
FontFamily="{StaticResource RegularFontFamily}"
FontSize="18" />
<!-- styles -->
<Style x:Key="PageHeaderLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource HeaderFont}" />
</Style>
<Style x:Key="SubHeaderLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource SubHeaderFont}" />
</Style>
<Style x:Key="ClassTimeLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource TimeColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ClassNameLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource HeaderTextColor}" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
</Style>
<Style x:Key="ClassInstructorLabel" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource BodyTextColor}" />
<Setter Property="Font" Value="{StaticResource BodyFont}" />
</Style>
</Application.Resources>
</Application>
Also xamarin not showing where exactly the exception occuring
You forgot the ResourceDictionary tag:
<Application.Resources>
<ResourceDictionary>
<!-- Application resource dictionary -->
<!-- colors -->
<!--<Color x:Key="HeaderTextColor">#585858</Color>
<Color x:Key="BodyTextColor">#C3C3C3</Color>-->
<Color x:Key="TimelineColor">#E4B6C3</Color>
<Color x:Key="HeaderTextColor">#3C3C3C</Color>
<Color x:Key="BodyTextColor">#869EAC</Color>
<Color x:Key="TimeColor">#A64C79</Color>
</ResourceDictionary>
</Application.Resources>
Define style in App.xaml like this:
<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>
and then Use in xaml:
<Label Text="{Binding Name}" Style="{DynamicResource FontLabel}" FontSize="Medium" FontAttributes="Bold" LineBreakMode="NoWrap"/>
I have a UserControl in XAML with a couple of buttons....
When the "VideoEnable" property in my C# code change to true I want to change the color of a button.
The following code compiles but crashes and I can't find a right solution
<UserControl.Triggers>
<DataTrigger Binding="{Binding VideoEnable}" Value="true">
<Setter Property="Button.Background" Value="Green" TargetName="VideoButton" />
<Setter Property="Grid.Background" Value="Blue" TargetName="videoGrid" />
</DataTrigger>
</UserControl.Triggers>
Now i have tried with the following code, it does not crash but the background does not change :s
<UserControl.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Videos}" Value="true">
<Setter Property="Button.Background" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
public string Videos
{
get { return m_videos; }
set
{
m_videos = value;
NotifyPropertyChanged("Videos");
}
}
Ok, I found the problem...
This is my button
<Button DataContext="{Binding LensesBtn}" Margin="0,5,0,0" FontSize="14" FontWeight="Bold" Height="40" Opacity="0.8" HorizontalAlignment="Stretch" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Button.Background>#dbebf9</Button.Background>
<Button.BorderBrush>PowderBlue</Button.BorderBrush>
<Button.BorderThickness>4</Button.BorderThickness>
Lenses
</Button>
When I delete the DataContext, Style and Background properties it all works....
But i really need this properties
any tips?
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="Videos" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
this is the example you need if your code is valid.
you can also add a converter in order to check the background and other properties.