Xamarin.FormsでStyleを指定,使用する
コントロールに個別に背景色や文字の大きさ,サイズなど様々な見た目の指定をすることができる.
<Label BackgroundColor="LightBlue" FontSize="Large" HorizontalOptions="CenterAndExpand" Text="Label1" TextColor="LightPink" VerticalOptions="CenterAndExpand" />
しかし,すべてのコントロールにこのような見た目を指定するのは大変手間がかかり,統一することが難しい.
それらの見た目(Style
)を一度記述しておき,それを使い回すことができる.
StyleはResourceDictionary
に記述する.
例えば,ContentPage
内のすべてのLabelを同じ見た目にしたい場合は以下のようにする.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="XFStylePractice.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <ContentPage.Resources> <ResourceDictionary> <Style TargetType="Label"> <Setter Property="BackgroundColor" Value="LightBlue" /> <Setter Property="FontSize" Value="Large" /> <Setter Property="HorizontalOptions" Value="CenterAndExpand" /> <Setter Property="VerticalOptions" Value="CenterAndExpand" /> <Setter Property="TextColor" Value="LightPink" /> </Style> <Label Text="Label1" /> <Label Text="Label2" /> <Label Text="Label3" /> <Label Text="Label4" /> <Label Text="Label5" /> </StackLayout> </ContentPage>
このように見た目の定義は一箇所だけで,Labelの見た目を統一できる.
見た目を変更するときも,一箇所だけで済む.
Styleに名前をつけて利用する
上の例ではコントロール(LabelとかButtonとか)単位で一括で見た目を指定したけれど,例えばLabelでも見出しで使われる場合と,本文で使われる場合ではStyleが異なるので,コントロール一括指定では困る.
このような場合,Styleの定義に名前をつけて,コントロール側ではその名前を使ってスタイルを適用することができる.
Style要素にx:Key
を使って名前(ここではlabelStyle
とつけた)をつけ,Label側で以下のように指定する.
<Label Text="Label1" Style="{StaticResource labelStyle}" />
以下のようにするとStyleを指定したLabelだけ見た目が変わる.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="XFStylePractice.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <ContentPage.Resources> <ResourceDictionary> <Style x:Key="labelStyle" TargetType="Label"> <Setter Property="BackgroundColor" Value="LightBlue" /> <Setter Property="FontSize" Value="Large" /> <Setter Property="HorizontalOptions" Value="CenterAndExpand" /> <Setter Property="VerticalOptions" Value="CenterAndExpand" /> <Setter Property="TextColor" Value="LightPink" /> </Style> </ResourceDictionary> </ContentPage.Resources> <StackLayout> <Label Text="Label1" Style="{StaticResource labelStyle}" /> <Label Text="Label2" /> <Label Text="Label3" /> <Label Text="Label4" /> <Label Text="Label5" /> </StackLayout> </ContentPage>
Styleのスコープ
Styleはそれを定義した要素の内側で有効です.
また,以下のようにContentPageでの定義さて,そのContentPageの中のStackLayoutでも定義されるといったStyleが入れ子になっている場合,内側のStyleが適用されます.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="XFStylePractice.MainPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <ContentPage.Resources> <ResourceDictionary> <Style TargetType="Label"> <Setter Property="BackgroundColor" Value="LightBlue" /> <Setter Property="FontSize" Value="Large" /> <Setter Property="HorizontalOptions" Value="CenterAndExpand" /> <Setter Property="VerticalOptions" Value="CenterAndExpand" /> <Setter Property="TextColor" Value="LightPink" /> </Style> </ResourceDictionary> </ContentPage.Resources> <StackLayout> <StackLayout.Resources> <ResourceDictionary> <Style TargetType="Label"> <Setter Property="BackgroundColor" Value="Yellow" /> <Setter Property="HorizontalOptions" Value="CenterAndExpand" /> <Setter Property="VerticalOptions" Value="CenterAndExpand" /> <Setter Property="TextColor" Value="Red" /> </Style> </ResourceDictionary> </StackLayout.Resources> <Label Text="Label1" /> <Label Text="Label2" /> <Label Text="Label3" /> <Label Text="Label4" /> <Label Text="Label5" /> </StackLayout> </ContentPage>