【Xamarin】XAMLのスタイルを別ファイルに定義する

以前に簡単なログインページのサンプルコードをご紹介しました。

今回は前回のコードで重複していたスタイル定義をスッキリまとめていきたいと思います。

Before

再掲しておきます。

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="Sample.Views.LoginPage"
             Title="{Binding Title}">

    <StackLayout Orientation="Vertical"
                 VerticalOptions="Center"
                 HorizontalOptions="Center">

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

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

            <Label Grid.Row="0"
                   Grid.Column="0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"
                   Text="ユーザID"/>

            <Entry Grid.Row="0"
                   Grid.Column="1"
                   VerticalOptions="Center"
                   HorizontalOptions="Start"
                   Placeholder="ユーザID"/>

            <Label Grid.Row="1"
                   Grid.Column="0"
                   VerticalTextAlignment="Center"
                   HorizontalTextAlignment="End"
                   Text="パスワード"/>

            <Entry Grid.Row="1"
                   Grid.Column="1"
                   VerticalOptions="Center"
                   HorizontalOptions="Start"
                   Placeholder="パスワード"
                   IsPassword="True"/>
        </Grid>

        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">

            <Button Text="新規登録"
                    Command="{Binding RegisterButtonClicked}"/>

            <Button Text="ログイン"
                    Command="{Binding LoginButtonClicked}"/>

        </StackLayout>

    </StackLayout>
  
</ContentPage>

LabelとEntryでそれぞれスタイルが重複しています。

スタイルの外部定義

Xamarin開発においてスタイルを外部定義するには『App.xaml』を利用します。

早速、変更後の『App.xaml』をば。

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
             x:Class="Sample.App">
	<Application.Resources>

		<!-- Application resource dictionary -->

        <!-- ログインページのラベル要素のスタイル -->
        <Style x:Key="LoginPageLabel" TargetType="Label">
            <Setter Property="VerticalTextAlignment" Value="Center"/>
            <Setter Property="HorizontalTextAlignment" Value="End"/>
        </Style>

        <!-- ログインページのエントリ要素のスタイル -->
        <Style x:Key="LoginPageEntry" TargetType="Entry">
            <Setter Property="VerticalOptions" Value="Center"/>
            <Setter Property="HorizontalOptions" Value="Start"/>
        </Style>
        

	</Application.Resources>
</prism:PrismApplication>

After

『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"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="Sample.Views.LoginPage"
             Title="{Binding Title}">

    <StackLayout Orientation="Vertical"
                 VerticalOptions="Center"
                 HorizontalOptions="Center">

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

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

            <Label Grid.Row="0"
                   Grid.Column="0"
                   Style="{StaticResource LoginPageLabel}"
                   Text="ユーザID"/>

            <Entry Grid.Row="0"
                   Grid.Column="1"
                   Style="{StaticResource LoginPageEntry}"
                   Placeholder="ユーザID"/>

            <Label Grid.Row="1"
                   Grid.Column="0"
                   Style="{StaticResource LoginPageLabel}"
                   Text="パスワード"/>

            <Entry Grid.Row="1"
                   Grid.Column="1"
                   Style="{StaticResource LoginPageEntry}"
                   Placeholder="パスワード"
                   IsPassword="True"/>
        </Grid>

        <StackLayout Orientation="Horizontal"
                     HorizontalOptions="Center"
                     VerticalOptions="Center">

            <Button Text="新規登録"
                    Command="{Binding RegisterButtonClicked}"/>

            <Button Text="ログイン"
                    Command="{Binding LoginButtonClicked}"/>

        </StackLayout>

    </StackLayout>
  
</ContentPage>

実装後の見え方に関しては省略します。

まとめ

可読性は若干落ちるものの、XAMLファイルのステップ数が減ってくれるのはありがたいですね。

以上です。