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

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

以下の動作環境にて確認済み
  • Visual Studio 2019 Community
  • Android 9.0.99
  • .NETStandard.Library 2.0.3
  • Prism.Unity.Forms 7.1.0.431

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のスタイル
  • 外部定義が可能。
  • 外部定義する場合、『App.xaml』を利用する。
  • 『App.xaml』に定義したスタイルを利用するには『Style=”{StaticResource (定義名)}』を使う。

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

以上です。

スポンサーリンク