PROWAREtech
Xamarin: Tutorial - Page 04
A guide for new Xamarin developers.
OnPlatform
OnPlatform can be used for platform specific uses.
In this example, the x:TypeArguments attribute must match the target property which is View for 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"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml">
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<Label x:Name="iosLabel"
Text="You're on an iOS device"
HorizontalOptions="Center"
VerticalOptions="Center" />
</OnPlatform.iOS>
<OnPlatform.Android>
<Label x:Name="androidLabel"
Text="You're on an Android device"
HorizontalOptions="Center"
VerticalOptions="Center" />
</OnPlatform.Android>
<OnPlatform.WinPhone>
<Label x:Name="windowsLabel"
Text="You're on a Windows device"
HorizontalOptions="Center"
VerticalOptions="Center" />
</OnPlatform.WinPhone>
</OnPlatform>
</ContentPage>
Use Device.OnPlatform() when coding in C#.
ScrollView
It is easy to create a scrolling screen using ScrollView. Not all elements are scrollable, but StackLayout is.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml">
<ScrollView>
<StackLayout>
<Label VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text=
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas." />
</StackLayout>
</ScrollView>
</ContentPage>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace HelloXamarinForms
{
public partial class MainPageXaml : ContentPage
{
public MainPageXaml()
{
InitializeComponent();
}
}
}
Platform Specific Padding
If using iOS then notice that the text in this Label overwrites the top of the screen information. This is easily fixed
using the OnPlatform element to specify a padding for the top of the screen.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ScrollView>
<StackLayout>
<Label VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text=
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec egestas imperdiet purus, sit amet aliquet sapien
gravida quis. Curabitur sed velit eu est finibus malesuada
et eu nisl. Curabitur vel sapien et massa suscipit rhoncus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas." />
</StackLayout>
</ScrollView>
</ContentPage>
Styles
If setting identical property settings on multiple elements then use styles to apply the same look to them all. In this example, ten buttons are created with identical formatting.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml"
BackgroundColor="Gray">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="btnstyle" TargetType="Button">
<Setter Property="FontSize" Value="Large" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="TextColor" Value="Navy" />
<Setter Property="BackgroundColor" Value="#CCCCCC" />
<Setter Property="BorderColor" Value="#CCCCCC" />
<Setter Property="BorderWidth" Value="0" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Button Text="Button0" Style="{StaticResource btnstyle}" />
<Button Text="Button1" Style="{StaticResource btnstyle}" />
<Button Text="Button2" Style="{StaticResource btnstyle}" />
<Button Text="Button3" Style="{StaticResource btnstyle}" />
<Button Text="Button4" Style="{StaticResource btnstyle}" />
<Button Text="Button5" Style="{StaticResource btnstyle}" />
<Button Text="Button6" Style="{StaticResource btnstyle}" />
<Button Text="Button7" Style="{StaticResource btnstyle}" />
<Button Text="Button8" Style="{StaticResource btnstyle}" />
<Button Text="Button9" Style="{StaticResource btnstyle}" />
</StackLayout>
</ScrollView>
</ContentPage>
This code shows how to use styles to set BackgroundColor of the page. It is set in one place making it easy to change later.
<?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="HelloXamarinForms.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="pageColor" TargetType="VisualElement">
<Setter Property="BackgroundColor" Value="#2686DC" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml"
Style="{StaticResource pageColor}">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="10, 20, 10, 0" Android="10, 0" />
</ContentPage.Padding>
<Label TextColor="#333399" Text="Hello Xamarin Forms!" />
</ContentPage>
A Better Way
Suppose the boss wants to change the colors throughout the application. The programmer must go to every page and modify the colors of all the elements. There is a better way by defining a class and then creating static properties returning constants.
// Constants.cs
using Xamarin.Forms;
namespace HelloXamarinForms
{
public class Constants
{
public static Color PageColor
{
get { return Color.FromHex("2686DC"); }
}
// LABEL CONSTANTS
public static Color LabelColor
{
get { return Color.Transparent; }
}
public static Color LabelTextColor
{
get { return Color.FromHex("FF4081"); }
}
public static string LabelHorizontalTextAlignment
{
get { return "Center"; }
}
public static string LabelVerticalTextAlignment
{
get { return "Center"; }
}
// BUTTON CONSTANTS
public static Color ButtonColor
{
get { return Color.FromHex("336699"); }
}
public static Color ButtonTextColor
{
get { return Color.FromHex("000099"); }
}
public static Color ButtonBorderColor
{
get { return Color.FromHex("333399"); }
}
public static double ButtonBorderWidth
{
get { return 0f; }
}
}
}
Modify the XAML to use these constants.
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HelloXamarinForms"
x:Class="HelloXamarinForms.MainPageXaml"
BackgroundColor="{x:Static local:Constants.PageColor}">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" />
</ContentPage.Padding>
<StackLayout>
<Label Text="TEST LABEL"
HorizontalTextAlignment="{x:Static local:Constants.LabelHorizontalTextAlignment}"
VerticalTextAlignment="{x:Static local:Constants.LabelVerticalTextAlignment}"
BackgroundColor="{x:Static local:Constants.LabelColor}"
TextColor="{x:Static local:Constants.LabelTextColor}" />
<Button Text="TEST BUTTON"
BorderColor="{x:Static local:Constants.ButtonBorderColor}"
BorderWidth="{x:Static local:Constants.ButtonBorderWidth}"
BackgroundColor="{x:Static local:Constants.ButtonColor}"
TextColor="{x:Static local:Constants.ButtonTextColor}" />
</StackLayout>
</ContentPage>
Comment
