概要
https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.0/3.0.0/
上記ページの内容をベースに簡単にまとめました
FlexLayout
新たに追加されたレイアウト
CSS Flexible Box Layout Module(一般にflex layout, flex-boxと呼ばれる)を基に作成
様々な画面サイズに対応することを優先したい場合に向いている
UIの階層を浅く保ちやすいためパフォーマンスの良い(動作がサクサクの)画面が作りやすい
上下・左右方向にレイアウトできる点に関してはStackLayoutと似ている
子要素の並べ方に多くのオプションがあり、例えば1行/1列に並べるには要素数が多すぎるような場合にWrapプロパティをFlexWrap.Wrapにすることで子要素をラップ表示(端に達したところで折り返して表示)できる点などが特徴
FlexLayoutはLayout<View>の派生で、ChildrenプロパティとしてIList<View>を持つ
参考:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout
ResourceDictionaryの改善
ResourceDictionaryのインスタンスが自動生成されるようになったためタグを明示的に書く必要がなくなった
複数のResourceDictionaryを読み込む場合にタグが不要となり、ResourceDictionaryに新たに追加されたSourceプロパティでXAMLファイル名を指定したものを列挙するだけで同様のことが可能となった
この方法ではSourceで指定したResourceDictionaryクラスがインスタンス化されることはなくXAMLファイルを参照するのみとなり、従来必要であったコードビハインドファイル(.xaml.cs)が不要となる
同様にx:Class属性も不要となる
参考:https://docs.microsoft.com/en-US/xamarin/xamarin-forms/xaml/resource-dictionaries
Right to Left対応
iOS:9以上、Android:API17以上である必要がある
右から左に表記する言語への対応がより簡単になる
FlowDirectionプロパティがレイアウト及びテキスト関連のコントロールに追加された
FlowDirectionプロパティはFlowDirection列挙型のLeftToRight, RightToLeft, MatchParentから指定
FlowDirectionプロパティのデフォルト値は親要素のない要素はLeftToRight、親要素のある要素はMatchParentとなるため、全体を一気に変更したい場合はPageか最上位のレイアウトのFlowDirectionのみ変更すればよい
FlowDirectionをRightToLeftにすればUI要素が右寄せになり、文字の方向やコントロールの並び順が右側からとなる
実行時にFlowDirectionを変更するのは負荷が大きいので避けるべき
端末の言語や地域設定に応じたFlowDirectionを取得したい場合はDevice.FlowDirectionを参照する
参考:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/right-to-left
スタイルシート
StyleをCSSで指定できる
内部的には従来のXAML+C#での整形用のAPIと同じものを呼び出しているだけなので、従来の方法と全く別物というわけではない
別のCSSファイルからStyleSheetに読み込むか、各ページのResourcesでCSSを定義する
スタイルシートはルールのリストからなる
ルールは1つ以上のセレクタと1つの宣言ブロックからなる
宣言ブロックは中括弧"{}"内に書かれる宣言のリストからなる
宣言は"プロパティ:値"で表される
宣言ブロックが複数の宣言を含む場合、セミコロン";"で各宣言を分割する
スタイルシートはコンパイル時ではなく実行時に解析される
現在のところ、XAMLで指定可能な全てのスタイルがCSSで使用可能なわけではないが、CSSは従来のXAMLでのスタイル指定とも組み合わせて使用可能なので基本的にCSSで指定して未対応部分のみ従来の方法を用いるといったことも可能
参考:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/index
Visual State Manager(VSM)対応
コードからUIの見た目を変化させる手段を提供する
コントロールが複数の状態を持つことへの対応
XAMLまたはC#内で宣言する
多くのアプリはXAMLでUIを定義しているので、XAML内にVSMがUIの見た目にどう影響を与えるのかを示す記述を加えることとなる場合が多い
例えばButtonなら使用不可・押されている・フォーカスが当たっている、などのvisual stateによってそれぞれ別の見た目を持っている
各状態は互いに排他的(同時に複数の状態が成立することはない)
状態は文字列で表される
Xamarin.FormsのVSMによってCommonStatesというvisual state groupが定義されており、"Normal", "Disabled", "Focused"の3つのvisual stateを含む
CommonStatesはVisualElement(View,Pageの基底)から派生した全クラスでサポートされている
CommonStatesの代わりに独自のvisual state groupやvisual stateの作成が可能
参考:https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager