Xarmarin.Forms XAML Basics Part 2, Essential XAML Syntax

Xamarin.Forms에서의 XAML 사용이 궁금해서 아래 링크를 보며 대충 필요한 것만 정리함.
https://developer.xamarin.com/guides/xamarin-forms/xaml/

Part 2. Essential XAML Syntax

: https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/essential_xaml_syntax/

Property Elements

: https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/essential_xaml_syntax/#Property_Elements

아래 둘은 동일한 설정임.

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="Large"
       TextColor="Aqua" />

<Label Text="Hello, XAML!"
       VerticalOptions="Center"
       FontAttributes="Bold"
       FontSize="Large">
  <Label.TextColor>
    Aqua
  </Label.TextColor>
</Label>

Label은 object element, Text, VerticalOptions, FontAttributes, FontSize들은 property attributes 임. 아래 XAML의 TextColor는 property element임.

하지만 아래 처럼 property element은 지나치게 긴 value를 간단하게 나타내기 어려울 때 사용할 수 있음.

<?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="XamlSamples.GridDemoPage"
             Title="Grid Demo Page"
             Padding="0, 20, 0, 0">

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    ...

  </Grid>
</ContentPage>

플랫폼 별로 ContentPage의 padding이 다른 경우가 있어 이를 위해 OnPlatform<T> generic class를 사용하는데 이를 XAML에서도 표현할 수 있다.

OnPlatform tag를 사용하는데 단 OnPlatform class는 generic class이므로 type을 지정해주어야 한다. 이를 위해 padding property의 type인 Thickness를 x:TypeArguments로 지정해 줘야한다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
      <OnPlatform.iOS>
        0, 20, 0, 0
      </OnPlatform.iOS>
      <OnPlatform.Android>
        0, 0, 0, 0
      </OnPlatform.Android>
      <OnPlatform.WinPhone>
        0, 0, 0, 0
      </OnPlatform.WinPhone>
    </OnPlatform>
  </ContentPage.Padding>

  ...

</ContentPage>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 20, 0, 0" />
  </ContentPage.Padding>

  ...

</ContentPage>

Attached Properties
: https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/essential_xaml_syntax/#Attached_Properties

Grid의 child들이 자신들의 grid 위치를 정하기 위해 grid attributes(Grid.Row, Grid.Column등)의 속성을 사용할 수 있는데 이를 attached properties라 한다.

<?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="XamlSamples.GridDemoPage"
             Title="Grid Demo Page">

  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness"
                iOS="0, 20, 0, 0" />
  </ContentPage.Padding>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="100" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    <Label Text="Autosized cell"
           Grid.Row="0" Grid.Column="0"
           TextColor="White"
           BackgroundColor="Blue" />

    <BoxView Color="Silver"
             HeightRequest="0"
             Grid.Row="0" Grid.Column="1" />

    <BoxView Color="Teal"
             Grid.Row="1" Grid.Column="0" />
    <Label Text="Leftover space"

           Grid.Row="1" Grid.Column="1"
           TextColor="Purple"
           BackgroundColor="Aqua"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center" />

    <Label Text="Span two rows (or more if you want)"
           Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"
           TextColor="Yellow"
           BackgroundColor="Blue"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center" />

    <Label Text="Span two columns"
           Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
           TextColor="Blue"
           BackgroundColor="Yellow"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center" />

    <Label Text="Fixed 100x100"
           Grid.Row="2" Grid.Column="2"
           TextColor="Aqua"
           BackgroundColor="Red"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center" />

  </Grid>
</ContentPage>

Content Properties
: https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/essential_xaml_syntax/#Content_Properties


ContentPage의 Content property나 Layout들의 Children property는 아래와 같이 XAML에 서 사용할 수 있지만 일반적으로 생략하고 사용하고 있다. 이는 유일하게 사용되는 property는 ContentProperty class attribute로 지정하고 있어서 명시적으로 해당 property를 사용하지 않아도 자동으로 지정된다.

[Xamarin.Forms.ContentProperty("Content")]
public class ContentPage : Page

[Xamarin.Forms.ContentProperty("Children")]
public abstract class Layout<T> : Layout ...

Xamarin.Forms에서 사용되는 ContentProperty attribute들은 다음과 같다.

ELEMENT	CONTENT PROPERTY
ContentPage	Content
ContentView	Content
Frame	Content
Label	Text
Layout<T>	Children
ScrollView	Content
ViewCell	View