ASUS ZenFone 4s MAXでXamarin.Androidの実機デバッグができない場合のトラブルシューティング

ASUS ZenFoneでXamarin.Androidアプリの実機デバッグをする際、「Mono Shared Runtimeのインストールがブロックされて失敗する」というのは既知の問題があります。

Can't deploy on device (Android MarshMallow) — Xamarin Forums

ZenFone 2や3では「Auto-start Manager」アプリのブロッキングを無効化すれば良いらしいです。

ZenFone 4sでも同様の問題が発生しますが、「Auto-start Manager」アプリが無くなっているので解決手順が異なります。

1. 「モバイルマネージャー」アプリを開く。
2. 「PowerMaster」を開く。
3. 「節電オプション」を開く。
4. 「自動軌道によりアプリを自動拒否する」をオフにする。

これで OK！

Visual Studio 2017で作成したXamarin.FormsプロジェクトをVisual Studio 2015でビルドする

さて、現時点のVisual Studio 2017(ver. 15.6.5)でXamarin.Formsプロジェクトを新規作成すると結構新しくてイケイケなプロジェクトをはいてくれます。

• packages.configファイルが無い
• 共通コードが.NET Standard 2.0(またはShared project)

これをVisual Studio 2015で開くと...

プロジェクトファイルが読み込めず、ビルドできません。

理由は...

• .NET Standard、ましてや2.0なんて対応してない。
• packages.configに代わり、PackageReferenceというフォーマットが使われている。VS 2015(というかMSBuild 14では読めない)

逆マイグレーション

VS 2015でビルドできるようにするために

• .NET StandardプロジェクトをPCLプロジェクトで作りなおす。
• iOSやAndroidのcsprojファイルからPackageReference要素を削る。(参照していたパッケージをメモしておく)
• packagesフォルダの中身を削除する(だいたいslnファイルと同じ階層にあるやつ)
• 空のpackages.configファイルを追加する(必要ないかも)
• PackageReferenceで参照していたパッケージをNuGetパッケージマネージャで追加しなおす。
• アセンブリの参照方法が変わって通らなくなったコードが出た場合は修正する。

まとめ

特別な理由がない限りVS 2015を投げ捨てましょう。そろそろ限界です。

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を実行した場合...

1. VisualStateManager.GoToState(view, "On")
2. VisualStateManager.GoToState(view, "Highlited")
3. VisualStateManager.GoToState(view, "Off")

結果は次のようになります。

1. VisualStateManager.GoToState(view, "On")
   • Group1/OnのSetterが適用される。
   • Group2のSetterは何も適用されない。
2. VisualStateManager.GoToState(view, "Highlited")
   • Group2/HightlitedのSetterが適用される。
   • Group1/OnのSetterは解除されない。
3. 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.VisualStateGroups AttachedPropertyが更新されたとき。
  • ViewのIsEnabledプロパティがtrueに変更されたとき。
  • ViewのIsFocusedプロパティがfalseに変更されたとき。
• Disabled
  • ViewのIsEnabledプロパティがfalseに変更されたとき。
• Focused
  • ViewのIsFocusedプロパティがtrueに変更されたとき。

(フォーカス中に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が逆になってます。(修正取り込み済み)

ticktack.hatenablog.jp

意図しないVisualStateの遷移を防ぐためNomal、Disabled、Focusedを使用しないのが無難ですかねー。

Xamarin.Formsにコントリビュートしよう

先日、Xamarin.FormsのVisualSateManagerの解説を書いている途中で、バグを見つけて修正PRを投げました。 せっかくなのでどんな感じだったのか共有します。レッツ貢献！

Xamarin.FormsのVisualStateManagerで規定のVisualStateを確認するサンプル。 pic.twitter.com/ZJ6saTlTp8

— ざまりん.ふぉーむずのソースコード読むマン🚲 (@ticktackmobile) March 22, 2018

「Entryの色が逆じゃね？」と思ったアナタ、鋭い！！Xamarin.Formsのバグです！

— ざまりん.ふぉーむずのソースコード読むマン🚲 (@ticktackmobile) March 22, 2018

この件。

概要

• バグを見つける
• ソースコードの問題個所を確認する
• Reproductionを用意する
• Issueを登録する
• Pull Requestする
• 自動テストがコケる
• 取り込まれる

バグを見つける

Xamarin.Forms 3.0.0-pre2を使って、暗黙的に変化するVisualStateのサンプルコードを書いていたところVisualElement.IsFocusedが変化したときの挙動がおかしい事に気づきました。

ソースコードの問題個所を確認する

条件演算時が逆になってます。修正も簡単なのでバグ報告と一緒に修正PRも投げることにしました。

// 実際のコード
VisualStateManager.GoToState(element, isFocused
    ? VisualStateManager.CommonStates.Normal
    : VisualStateManager.CommonStates.Focused);

// 正しくはこう
//VisualStateManager.GoToState(element, isFocused
// ? VisualStateManager.CommonStates.Focused
// : VisualStateManager.CommonStates.Normal);

Reproductionを用意する

バグ報告にあたってReproduction、つまり最小の再現環境を用意します。 バグ報告者、Reproductionは義務です。え、Reproductionが無い？ZAPZAPZAP!次のバグ報告者はきっとうまくやってくれるでしょう。

もともとサンプルコードを書いていたところだったので、関係ないところを削ってGitHub置いておきます。

Issueを登録する

Xamarin.FormsのリポジトリにはIsuue登録のテンプレートがあります。

### Description

説明を書きます。

### Steps to Reproduce

再現手順を書きます。

1. 
2. 
3. 

### Expected Behavior

期待する動作を書きます。

### Actual Behavior

実際の動作(バグ挙動)を書きます。

### Basic Information

バグが発生する環境のバージョンなどを書きます。関係ないのは削ってもOK。

- Version with issue:
- Last known good version:
- IDE:
- Platform Target Frameworks: 
  - iOS:  
  - Android: 
  - UWP:  
- Android Support Library Version:
- Nuget Packages:
- Affected Devices:

### Screenshots

見た目に関する問題の場合はスクリーンショットがあると良い。

### Reproduction Link

最小の再現環境へのリンクを張ります。

実際に登録したIssueがコチラ

バグが報告されると中の人がTriageというGitHubのProjectsに乗せて行程管理するみたい。 「Ready For Work」にあるやつは修正PR受付中かな？

Pull Requestする

Pull Requestにもテンプレートがあります。

### Description of Change ###

変更内容の説明を書きます。

### Bugs Fixed ###

修正するIssueの番号を書きます。

### API Changes ###

Publicなクラスやメソッドが増えたり減ったりシグネチャが変わったりする場合は列挙します。何も無い場合はNoneで。

### Behavioral Changes ###

挙動が変わる場合は列挙します。何も無い場合はNoneで。

### PR Checklist ###

PRするときにやることリスト。

- [ ] Has tests (if omitted, state reason in description)
- [ ] Rebased on top of master at time of PR
- [ ] Changes adhere to coding standard
- [ ] Consolidate commits as makes sense

(「Checklistは自己申告なのか？」とか「あからさまにbool逆だっただけなのにテストいるのか？」と悩んだ結果、とりあえず未チェックのままPRしたら結局そのままマージされてしまった。)

実際のPull Requestがコチラ

masterリポジトリ充てにPRしたところ、リリース用ブランチ(3.0.0)宛てに変えてくれと言われる。分岐点までresetしてから3.0.0ブランチの先頭にrebaseし、GitHubの機能で宛先を3.0.0ブランチに変更。

自動テストがコケる

気が付いたら自動ビルドが走っていて(中の人が手動でキックするっぽい？)、数十分後に自動テストが走っていました。 次の日、「UITestxxxxが失敗した」とコメントがついてました。

取り込まれる

件のUITestを確認すると私の修正とは関係なく(そりゃそうだ)、typo修正が不完全でAutomatonId不一致で失敗しているだけでした。 その旨を返答すると数時間後にマージされました。(見返すと英文間違っててヤバイ)

反省

• 一行程度の修正でも横着せずにブランチを切る。
  • rebaseが面倒になった。
• CheckListは自分でチェックしていい。
• 雰囲気英文は見直す。

おまけ

• CONTRIBUTING.md
  • バグ報告・修正、機能改善提案の仕方
• A Beginner's Guide for Contributing to Xamarin.Forms | Xamarin Blog
  • バグ修正の仕方、UITestの追加方法も書かれている。Bugzilla前提であるもののIssueTrackerをGitHubに置き換えればIssueからに対しても同様なはず。

Xamarin.Forms CSS Support

Xamarin.Forms 3.0からCSS Supportが追加されます。(ASP .NET辺りの人たちにリーチしていく狙いらしい？)

一部制限はあるものの大体の機能がそのまま使えるようです、よってこの記事ではXamarin.Forms固有の事情を中心に説明します。 詳しく知りたい人は元のPull Requestを読んでください。

セレクタ関係

要素の指定

CSSにおけるHTML要素名の指定はC#クラス名の指定に置き換えられます。大文字小文字は無視されます。

/* CSS */
boxview {
    background-color: pink;
}

BoxViewクラスの背景色がピンクになります。

StyleClass

CSSにおけるclass属性にはStyleClassプロパティが対応します。(代わりにclassプロパティでも良いです)

/* CSS */
.centerelement {
    background-color: red;
}

<!-- XAML -->
<StackLayout>
    <BoxView />
    <BoxView StyleClass="centerelement" />
    <BoxView />
</StackLayout>

StyleId

CSSにおけるid属性にはStyleIdプロパティが対応します。

/* CSS */
#speciallabel {
    height: 100;
    width: 100;
    background-color: blue;
}

<!-- XAML -->
<Label Text="I'm special!" StyleId="speciallabel" />

Xamarin.Forms固有のセレクタ

要素名(C#クラス名)の先頭に^を付けるとそのクラス、およびその派生クラスへの指定となります。

/* CSS */
^contentpage {
    padding: 20;
    background-color: orange;
}

この場合、ContentPageクラスとその派生クラスへの指定となります。通常Xamarin.Formsの各画面はContentPageの派生クラスとして作るため、このようにすれば汎用的なスタイルしてができます。

スタイルシートの読み込み方

XAML

ResourcesプロパティにStyleSheet要素を追加すると、そのViewと子要素にスタイルシートが適用されます。

<ContentPage x:Class="CssSample.CssSamplePage">
    <ContentPage.Resources>
        <StyleSheet Source="/CSS/style.css" />
    </ContentPage.Resources>
</ContentPage>

ファイルからスタイルシートを読み込む場合、StyleSheet要素のSourceにCSSファイルのパスを記述します。このCSSファイルはEmbeddedResourceにする必要があります。 Sourceに指定するUriにはそのコントロールからの相対パス、または/で始まるプロジェクトルートからの絶対パスが使用できます。

この画像の場合では../CSS/style.cssまたは/CSS/style.cssが有効となります。

<ContentPage x:Class="CssSample.CssSamplePage">
    <ContentPage.Resources>
        <StyleSheet>
<![CDATA[
^contentpage {
    padding: 20;
    background-color: orange;
}

stacklayout > boxview {
    margin: 3;
    background-color: pink;
}
]]>
        </StyleSheet>
    </ContentPage.Resources>
</ContentPage>

CDATAセクションを使ってXAML内に記述することもできます。

C#

Xamarin.Forms.StyleSheets.StyleSheet.FromAssemblyResource()を使うとEmbeddedResourceからCSSファイルを読み込めます。

StyleSheet styleSheet = StyleSheet.FromAssemblyResource(this.GetType().GetTypeInfo().Assembly, "CssSample.CSS.style.css");
Resources.Add(styleSheet);

StyleSheet.FromReader()でTextReaderから読み込むことも可能。

using (var reader = new StringReader(cssString))
    myPage.Resources.Add(StyleSheet.FromReader(reader));

CSSとFlexLayout

以前に紹介したFlexLayoutを使うとCSSでもレイアウト指定ができます。

/* CSS */
.section-title {
    color: #778;
    font-style: bold;
    font-size: 20;
    margin: 6 0 0 6;
}
.grid {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    height: 180;    
}
.grid-cell {
    flex-grow: 0;
    background-color: #eed;
    text-align: center;
    font-size: small;
    color: #556;
}
.full {
    flex-basis: 100%;
}
.half {
    flex-basis: 50%;
    background-color: cornflowerblue;
}
.third {
    flex-basis: 33.33%;
    background-color: pink;
}
.fourth {
    flex-basis: 25%;
    background-color: lightblue;
}
.auto {
    flex-grow: 1;
    background-color: coral;

}

<!-- 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"
             x:Class="CssSample.FlexCssSamplePage">

    <ContentPage.Resources>
        <StyleSheet Source="../CSS/flexstyle.css" />
    </ContentPage.Resources>
    
    <ScrollView>
        <StackLayout>
            <Label Text="Basic Grids" StyleClass="section-title" />
            <FlexLayout StyleClass="grid">
                <Label StyleClass="grid-cell, full" Text="full" />
                <Label StyleClass="grid-cell, half" Text="1/2" />
                <Label StyleClass="grid-cell, half" Text="1/2" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, half" Text="1/2" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, third" Text="1/3" />
                <Label StyleClass="grid-cell, third" Text="1/3" />
                <Label StyleClass="grid-cell, third" Text="1/3" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, fourth" Text="1/4" />
                <Label StyleClass="grid-cell, third" Text="1/3" />
                <Label StyleClass="grid-cell, auto" Text="left-orver" />
            </FlexLayout>
        </StackLayout>
    </ScrollView>
</ContentPage>

上のスタイルシートとXAMLでこんなレイアウトが組めます。

Xamarin.AndroidでFindViewByIdを省略するやつ

が追加されるらしいです。(Kotlin Android Extensionsでできるアレ)

Slides from my presentation today. https://t.co/Pg8rjY9MKR pic.twitter.com/Pe46x3Yp1b

— Miguel de Icaza (@migueldeicaza) 2018年3月6日

(Miguelの資料より引用)

仕組みとしてはXamarin.Formsで行われている 「.xmalファイルが変更された際にmsbuildタスクが走り、x:Nameの付けられたView要素に対応するフィールドをコード生成する」 と同様なようです。

ちなみにmiguelのAndroidのスライドで説明されているやつの実体はこのPRにあるやつで、使い方はここに書いてある通りです https://t.co/WYodNPXObT たぶんここまで分かるやつおらんやろ

— Atsushi Eno (@atsushieno) 2018年3月6日

ファイルテンプレートも一緒に更新されると思いますが、xamlと違って必ずしもコードビハインドのファイルが1つに定まるわけではないので厄介そう🤔

Xamarin.Forms.FlexLayout

いつの間にかXamarin.FormsのmasterブランチにFlexLayoutが生えていたので試してみました。

いつの間にかXamarin.Flexなるディレクトリが生えてるhttps://t.co/Gk1qspwOy9

— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) February 15, 2018

というかFlexLayoutが生えてるhttps://t.co/I7JW4HcbYS

— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) February 15, 2018

ロードマップでは Q1 2018 Pre-Release - Q2 2018 Stable として予定されている機能です。もうすぐver.2.6.0-preとしてNuGetで普通にダウンロードできるようになると思います。

What is FlexLayout ?

端的に言うとCSSにおけるFlexboxのXamarin.Forms版がFlexLayoutです。

Xamarin.Forms標準ではこ要素を折り返して並べてくれるようなLayuoutが無いので、それだけの用途でも便利そうですね。

Xamarin.Forms.FlexLayoutちょっと使ってみた pic.twitter.com/LGgwlrWkEz

— ざまりん.ふぉーむずマン🚲 (@ticktackmobile) 2018年2月18日

内部的には

• xamarin/flexを移植した Xamarin.Flex 名前空間
• Xamarin.Flex.Item を利用して子要素をレイアウトする FlexLayout 、レイアウト指定用のEnumやTypeConverter

といった構成になっています。

FlexLayoutのレイアウト指定

FlexLayoutがCSSに置けるFlexコンテナ、FlexLayoutの子要素がFlexアイテムに相当します。

Flexコンテナに設定するプロパティ

CSSでFlexコンテナに設定できるプロパティは、Xamarin.FormsではFlexLayouクラスのプロパティとして実装されています。

Flexbox(CSS)	FlaxLayout(XF)
flex-direction	Direction
flex-wrap	Wrap
justify-content	JustifyContent
align-items	AlignItems
align-content	AlignContent
対応なし	Position

Position はCSSのFlexboxと異なる部分、RelativeかAbsoluteを指定できます。

• Relative:FlexLayoutのルールで配置される位置や大きさが決まる。
• Absolute：FlexアイテムのLeft,Top,Right,Bottomによって位置と大きさが決まる。(ようなんですが、それらを設定する手段が無いように見える...)

Flexアイテムに設定するプロパティ

CSSでFlexアイテムに設定できるプロパティは、Xamarin.FormsではFlexLayouクラスのAttachedPropertyとして実装されています。

Flexbox(CSS)	FlaxLayout(XF)
order	Order
flex-grow	Grow
flex-shrink	Shrink
align-self	AlignSelf
flex-basis	Basis

参考

• Xamarin.Forms.Core/FlexLayout.cs
• Xamarin.Forms.Core/FlexEnums.cs
• Xamarin.Flex/Flex.cs
• flex/bindings/csharp at master · xamarin/flex
• 日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
• これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス