Xamarin.Forms VisualStateManager Support
Xamarin.Forms 3.0.0からVisualStateManager、およびVisualStateが追加されます。
VisualStateManager.GoToState()を呼ぶと対応するVisualStateのSetterが適用される機能です。
これにより、Viewの状態に対応する見た目を宣言的に扱うことが可能となります。
基本的な使い方
基本的な使い方を見てみましょう。入力された文字数に応じてEntryの背景色を変える、新規パスワード入力欄風のサンプルです。
<?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="VisualStateManagerSample.BasicSample"> <StackLayout VerticalOptions="Center" Padding="20"> <Label Text="enter new password" /> <Entry x:Name="_entry" IsPassword="true"> <VisualStateManager.VisualStateGroups> <VisualStateGroupList> <VisualStateGroup x:Name="LengthStates"> <VisualState x:Name="None" /> <VisualState x:Name="Short"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Red" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Medium"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Yellow" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Long"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Green" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </VisualStateManager.VisualStateGroups> </Entry> </StackLayout> </ContentPage>
VisualStateManager.VisualStateGroupsAttachedPropertyを通じてVisualStateをセットします。
VisualStateGroupsはStyleからセットすることが可能なので、VisualStateを含めてViewの規定のスタイルを作ることができます。
using System; using System.Collections.Generic; using Xamarin.Forms; namespace VisualStateManagerSample { [Xamarin.Forms.Xaml.XamlCompilation(Xamarin.Forms.Xaml.XamlCompilationOptions.Compile)] public partial class BasicSample : ContentPage { public BasicSample() { InitializeComponent(); VisualStateManager.GoToState(_entry, "None"); _entry.TextChanged += (s, e) => { if (string.IsNullOrEmpty(_entry.Text)) { VisualStateManager.GoToState(_entry, "None"); return; } var length = _entry.Text.Length; if (length <= 4) { VisualStateManager.GoToState(_entry, "Short"); return; } if (4 < length && length < 8) { VisualStateManager.GoToState(_entry, "Medium"); return; } if (length >= 8) { VisualStateManager.GoToState(_entry, "Long"); return; } }; } } }
コードビハインドではEntryのテキストが更新されるたびに、VisualStateManager.GoToState()で長さに応じたVisualStateに遷移しています。
同じViusalStateに遷移した場合はSetter適用がスキップされるため、パフォーマンスを気にして厳密に管理する必要はありません。
このサンプル実行結果はこんな感じ。
VisualStateGroup
VisualStateはVisualStateGroupにまとめられた中で排他的に遷移します。
<VisualStateGroupList> <VisualStateGroup x:Name="Gourp1"> <VisualState x:Name="On" /> <VisualState x:Name="Off" /> </VisualStateGroup> <VisualStateGroup x:Name="Gourp2"> <VisualState x:Name="None" /> <VisualState x:Name="Hightlited" /> </VisualStateGroup> </VisualStateGroupList>
上のようにVisualStateが設定されたViewに対して次の順にGoToSatateを実行した場合...
VisualStateManager.GoToState(view, "On")VisualStateManager.GoToState(view, "Highlited")VisualStateManager.GoToState(view, "Off")
結果は次のようになります。
VisualStateManager.GoToState(view, "On")- Group1/OnのSetterが適用される。
- Group2のSetterは何も適用されない。
VisualStateManager.GoToState(view, "Highlited")- Group2/HightlitedのSetterが適用される。
- Group1/OnのSetterは解除されない。
VisualStateManager.GoToState(view, "Off")- Group1/OnのSetterが解除される。
- Group1/OffのSetterが適用される。
- Group2/HightlitedのSetterは解除されず、適用されたまま。
「Setterが適用されていない初期状態に戻す」ということがしたい場合は、Setterを持たないVisualStateを用意しておくと良いです。
Style、Trigger、VisualStateの比較
Xamarin.FormsにはSetterクラスの集まりによってVisualElementのプロパティを方法として、StyleやTriggerが以前から存在します。
これらとVisualStateにはどのような違いがあるでしょう。
(便宜上Setterの塊をカタカナ表記でスタイル呼ぶことにします)
Style
- 特定のクラスに対して規定のスタイルを設定できる。
- 他のStyleを引き継ぐことができる。(
BasedOn)
Trigger
- イベントの発火やプロパティの変化を契機にVisualElementのプロパティをセットする。
- EnterActoins、ExitActionsを実行できる。
VisualState
- プロパティの設定値をVisualStateという纏まった単位で管理できる。
- VisualStateを変更する判定処理とVisualStateによって変更されるスタイルが分離できる。
状態遷移の判定処理とスタイルの分離がVisualStateの大きな特徴と言えるでしょう。
例えば独自のViewを定義する場合、取りうるVisualStateの名前と条件を公開しておけば、利用者は自分のアプリに合ったスタイルを自由に設定することができます。
規定のVisualState
実は、全てのViewは暗黙的にNomal、Disabled、Focusedの3つのVisualStateに遷移します。
それぞれのVisualStateへ遷移するタイミングは以下の通り。
- Nomal
VisualStateManager.VisualStateGroupsAttachedPropertyが更新されたとき。- Viewの
IsEnabledプロパティがtrueに変更されたとき。 - Viewの
IsFocusedプロパティがfalseに変更されたとき。
- Disabled
- Viewの
IsEnabledプロパティがfalseに変更されたとき。
- Viewの
- Focused
- Viewの
IsFocusedプロパティがtrueに変更されたとき。
- Viewの
(フォーカス中にIsEnabled = falseしたらマズいような……、最終的にDisabledになるのかNormalになるのか、Rendereの実装に依存する？)
本当にVisualStateが変更されているか確かめてみしょう。
こんな感じのXAMLを書きます、自分ではVisualStateManager.GoToState()しません。
<?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:local="clr-namespace:VisualStateManagerSample" x:Class="VisualStateManagerSample.CommonStatesSamplePage"> <ContentPage.Resources> <!-- Normal <-> Disabled 確認用 for Image --> <Style TargetType="Image" x:Key="StatusIconStyle"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="Source" Value="{local:ImageResource VisualStateManagerSample.Images.online.png}"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Disabled"> <VisualState.Setters> <Setter Property="Source" Value="{local:ImageResource VisualStateManagerSample.Images.offline.png}"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> <!-- Normal <-> Disabled 確認用 for Label --> <Style TargetType="Label" x:Key="StatusCaptionStyle"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="TextColor" Value="Green"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Disabled"> <VisualState.Setters> <Setter Property="TextColor" Value="Gray"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> <!-- Normal <-> Focused 確認用 for Entry --> <Style TargetType="Entry" x:Key="EntryStyle"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Green" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Focused"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Orange" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ContentPage.Resources> <StackLayout Padding="20" Spacing="30"> <Label Text="CommonStates Sample" /> <!-- SwitchでImageとLabelのIsEnabledを切り替える --> <Grid ColumnSpacing="20"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Style="{DynamicResource StatusIconStyle}" HeightRequest="60" WidthRequest="60" IsEnabled="{Binding IsToggled, Source={x:Reference _onlineSwitch}}" /> <Label Grid.Row="0" Grid.Column="1" Style="{DynamicResource StatusCaptionStyle}" Text="@ticktackmobile" VerticalTextAlignment="End" IsEnabled="{Binding IsToggled, Source={x:Reference _onlineSwitch}}" /> <Switch x:Name="_onlineSwitch" Grid.Row="1" Grid.Column="1" IsToggled="true" /> </Grid> <Entry x:Name="_entry" Style="{DynamicResource EntryStyle}" Placeholder="IsFocused: true = Orange, false = Green" /> </StackLayout> </ContentPage>
local:ImageResourceはEmbeddedResourceから画像を読み込む
ためのXAMLマークアップ拡張です。(Guideに載ってるやつ)
実行結果がこちら。
Xamarin.FormsのVisualStateManagerで規定のVisualStateを確認するサンプル。 pic.twitter.com/ZJ6saTlTp8
— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) March 22, 2018
Xamarin.Forms 3.0.0-pre2ではバグでIsFocusedを変更したときのVisualStateが逆になってます。(修正取り込み済み)
意図しないVisualStateの遷移を防ぐためNomal、Disabled、Focusedを使用しないのが無難ですかねー。
