1) Global Styles
Open app.xaml file, define the resource dictionary as below.
<Application.Resources>
<ResourceDictionary>
</ResourceDictionary>
</Application.Resources>
The following code example shows a Style declared at the application level.
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
Add the style to button control as StaticResource below
<Button Text="Hello Xamarin!!!" Style="{StaticResource buttonStyle}"></Button>
Since each platform has a unique fontfamily, for example Segoe for Windows Phone and UWP, and the same font family is not available in Xamarin
forms, hence this platform specific font family should be rendered as a custom
font as below.
Download the Segoe font files (.ttf) and add them to UWP project as below.
Now, add these font’s as platform type arguments in app.xaml file of PCL project
and apply for a Label
<OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP.ttf#Segoe WP" x:Key="PageTitleRegularFont"/>
<OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Semibold.ttf#Segoe WP" x:Key="PageTitleSemiBoldFont"/>
<OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Bold.ttf#Segoe WP" x:Key="PageTitleBoldFont"/>
<OnPlatform x:TypeArguments="x:String" WinPhone="/Assets/Fonts/SegoeWP-Semilight.ttf#Segoe WP" x:Key="PageTitleSemiLightFont"/>
<Style x:Key="labelStyle" TargetType="Label" >
<Setter Property="FontSize" Value="20"></Setter>
<Setter Property="FontFamily" Value="{StaticResource PageTitleBoldFont}"></Setter>
</Style>
Style can be inherited by setting BasedOn property to an existing style
<Style x:Key="labelBasedOnStyle" TargetType="Label" BasedOn="{StaticResource labelStyle}" >
<Setter Property="TextColor" Value="Teal" />
</Style>
In Xamarin Forms, we have 6 dynamic styles known as device styles.
• BodyStyle
• CaptionStyle
• ListItemDetailTextStyle
• ListItemTextStyle
• SubtitleStyle
• TitleStyle
We can directly apply these styles to a Label as below.
<Label Text="Title style"
Style="{DynamicResource TitleStyle}" />
<Label Text="Subtitle text style"
Style="{DynamicResource SubtitleTextStyle}" />
<Label Text="Body style"
Style="{DynamicResource BodyStyle}" />
<Label Text="Caption style"
Style="{DynamicResource CaptionStyle}" />
<Label Text="List item detail text style"
Style="{DynamicResource ListItemDetailTextStyle}" />
<Label Text="List item text style"
Style="{DynamicResource ListItemTextStyle}" />
2) Triggers
Xamarin Forms support 4 types of triggers and these triggers were introduced in Xamarin.Forms
1.3 version. Ensure to update your Xamarin forms package to a latest version.
• Property Trigger – executed when a property on a control is set to a particular
value.
For example, if you want to set the BackgroundColor property when the property
IsFocused is True
<Entry Placeholder="enter name">
<Entry.Triggers>
<Trigger TargetType="Entry"
Property="IsFocused" Value="True">
<Setter
Property="BackgroundColor"
Value="Yellow" />
</Trigger>
</Entry.Triggers>
</Entry>
• Data Trigger – same as the property trigger but uses data binding.
For example, if you want disable the button when the entry’s Length property
is 0.
<Entry x:Name="emailAddress" Text="" Placeholder="email
address"/>
<Button Text="Send">
<Button.Triggers>
<DataTrigger TargetType="Button"
Binding="{Binding Source={x:Reference emailAddress},
Path=Text.Length}"
Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Button.Triggers>
</Button>
• Event Trigger – occurs when an event occurs on the control.
In the above Property Trigger example, we saw how to change the background color
of an Entry element based on the IsFocused property entirely in XAML. Alternatively,
we can use an Event Trigger to execute an action written in C# based on the TextChanged
event of an entry to perform some basic validation.
Every action that we define has to inherit from TriggerAction<T> where
T is the element to which a trigger is attached. When a trigger is fired, the
Invoke method will be called.
public class NumericValidationTriggerAction : TriggerAction<Entry>
{
protected override void Invoke(Entry entry)
{
double result;
bool isValid = Double.TryParse(entry.Text, out result);
entry.BackgroundColor =
isValid ? Color.Default : Color.Red;
}
}
<Entry>
<Entry.Triggers>
<EventTrigger Event="TextChanged">
<local:NumericValidationTriggerAction></local:NumericValidationTriggerAction>
</EventTrigger>
</Entry.Triggers>
</Entry>
• Multi Trigger – allows multiple trigger conditions to be set before an action occurs.
A MultiTrigger looks like a Trigger or DataTrigger except there can be more
than one condition. All the conditions must be true before the Setters are triggered.
<Button Text="Multi Trigger">
<Button.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition
Binding="{Binding Source={x:Reference emailAddress},
Path=Text.Length}"
Value="0" />
<BindingCondition
Binding="{Binding Source={x:Reference phone},
Path=Text.Length}"
Value="0" />
</MultiTrigger.Conditions>
<Setter Property="IsEnabled" Value="False" />
</MultiTrigger>
</Button.Triggers>
</Button>
Result of UI with styles and trigeers as below
Download the working sample