#Xamarin #XAML

For the development of mobile application on multiple platforms (Android, iOS, UWP), Xamarin Forms will greatly reduce the effort for developer by using the shared code for user interface on all platforms. XAML stands for eXtensible Application Markup Language, which help to create user interface in Xamarin Forms. Although XAML is not strictly required by Xamarin Forms, it is highly recommended. By using XAML, we can separate the work with visual design & business logic. It is very popular with MVVM architectural pattern. While XAML define the View, it is connected to the logic through ViewModel by using data binding. There are great libraries which support this, for example: Prism.

For developer who new to XAML, as myself about 3 months ago, XAML could be confusing. I am used to the convenient of Toolbox on Visual Studio. If you want an ‘OK’ button at the bottom of a form, just get it from Toolbox and place it on the bottom of the form. The visual design can be done by basic drag & drop. To have the same result with XAML, it requires a little more work.

XAML also offers some pre-defined controls/views: Label, Button, Entry, Editor, ListView, …
For example:

<Label Text="Welcome to Xamarin Forms!" />

To arrange the controls, Xamarin Forms has some layouts: StackLayout, AbsoluteLayout, RelativeLayOut & Grid. They can be found here: https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/

 

  • StackLayout: this is most basic layout which arrange views in line horizontally or vertically.

Figure 1

Most of the time we have to use several layouts to create a visual design.

I nested several stack layouts for the [Figure 1] above:

<StackLayout BackgroundColor="Beige" Orientation="Horizontal"
             VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
             WidthRequest="250" HeightRequest="250">
    <Label Text="Item 1" VerticalOptions="Center" WidthRequest="50"/>
    <StackLayout Orientation="Vertical"
                 BackgroundColor="DarkSeaGreen"
                 WidthRequest="200" HeightRequest="250">
        <StackLayout Orientation="Vertical"
                     BackgroundColor="CadetBlue"
                     WidthRequest="200" HeightRequest="150">
            <Label Text="Item 2" HeightRequest="75"/>
            <StackLayout Orientation="Horizontal"
                         BackgroundColor="DeepSkyBlue"
                         WidthRequest="200" HeightRequest="75">
                <Label Text="Item 3" WidthRequest="100"/>
                <Label Text="Item 4" WidthRequest="100"
                       BackgroundColor="Aquamarine"/>
            </StackLayout>
        </StackLayout>
        <Label Text="Item 5" />
    </StackLayout>
</StackLayout>

 

  • Grid: This layout has more control over position of each views by divide the space to columns x rows square.

For the visual design of [Figure 1], Grid layout requires simpler XAML code. It is more intuitive also.

<Grid VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
      ColumnSpacing="0" RowSpacing="0"
      BackgroundColor="Beige"
      WidthRequest="250" HeightRequest="250">
      <Grid.RowDefinitions>
          <RowDefinition Height="75"/>
          <RowDefinition Height="75"/>
          <RowDefinition Height="100"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="50"/>
          <ColumnDefinition Width="100"/>
          <ColumnDefinition Width="100"/>
      </Grid.ColumnDefinitions>
      <Label Text="Item 1" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3"
             VerticalOptions="Center" />
      <Label Text="Item 2" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"
             BackgroundColor="CadetBlue"/>
      <Label Text="Item 3" Grid.Column="1" Grid.Row="1"
             BackgroundColor="DeepSkyBlue"/>
      <Label Text="Item 4" Grid.Column="2" Grid.Row="1"
             BackgroundColor="Aquamarine"/>
      <Label Text="Item 5" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2"
             BackgroundColor="DarkSeaGreen"/>
</Grid>

Please make use of RowSpan & ColumnSpan in Grid layout.

The more we divide the grid (more rows and more columns), the more precise we can place the elements. But it comes with the performance cost.

 

  • AbsoluteLayout: this layout gives even more control to place the elements. If our design has exact position and size of each elements, this is the best choice.

Because AbsoluteLayout displays views exactly by specified position & size. Even if we don’t have exact number, it can use relative values also.

The code for [Figure 1]:

<AbsoluteLayout VerticalOptions="CenterAndExpand" HorizontalOptions="Center"
                Padding="0,0,0,0"
                BackgroundColor="Beige"
                WidthRequest="250" HeightRequest="250">
    <Label Text="Item 1"
           AbsoluteLayout.LayoutFlags="None"
           AbsoluteLayout.LayoutBounds ="0, 0, 50, 250"
           VerticalOptions="Center" />
    <Label Text="Item 2"
           AbsoluteLayout.LayoutFlags="None"
           AbsoluteLayout.LayoutBounds ="50, 0, 200, 75"
           BackgroundColor="CadetBlue"/>
    <Label Text="Item 3"
           AbsoluteLayout.LayoutFlags="None"
           AbsoluteLayout.LayoutBounds ="50, 75, 100, 75"
           BackgroundColor="DeepSkyBlue"/>
    <Label Text="Item 4"
           AbsoluteLayout.LayoutFlags="None"
           AbsoluteLayout.LayoutBounds ="150, 75, 100, 75"
           BackgroundColor="Aquamarine"/>
    <Label Text="Item 5"
           AbsoluteLayout.LayoutFlags="None"
           AbsoluteLayout.LayoutBounds ="50, 150, 200, 100"
           BackgroundColor="DarkSeaGreen"/>
</AbsoluteLayout>

The AbsouteLayout comes with one great feature: it allows child views to overlap.

Figure 2

 

  • RelativeLayout: I never try this one. It is also advised against by some performance tips. The 3 layouts above is enough for my usage till now.

 

As I know of, a visual designer for Xamarin Forms – XAML is not available at the moment. So hand-written code is the only way. It is best to just spend some time and try out different options.

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>