Xamarin.Forms Previewer で DataBinding を使用するには

こんにちは。エクセルソフトの田淵です。

Xamarin.Forms Previewer もう試しましたか！！？

いいですね。

Xamarin.Forms Previewer では、一般的なコントロールの XAML プレビューが出来るだけでなく、ListView の DataBinding や Custom Renderer もサポートされているようです。やってみましょう。

下準備

2017/1 現在は下準備は不要です。
Visual Studio の場合は、「表示＞その他のウィンドウ＞Xamarin.Forms Previewer」をクリックするとウィンドウが表示されます。
Xamarin Studio の場合は、XAML ファイルを右クリックして、「プログラムから開く＞XAML Viewer」をクリックすると、プレビューできる状態で XAML を編集できます。

Xamarin.Forms Previewer を有効にするには、Xcode や SDK を最新にして、Xamarin Studio を Alpha 版にする必要があります。このあたりは @ticktackmobile さんの以下のエントリーを見てください。

一点、@ticktackmobile さんは Xamarin.Forms のパッケージを一度削除していますが、もしかすると、NuGet Source の設定がクリアされていたのかもしれません。

に追加方法をアップしておいたので、そちらを参考に NuGet レポジトリを追加して、各プロジェクトの［パッケージ］フォルダを右クリックして Add Packages をクリックして、Show pre-release packages にチェックを入れて Xamarin.Forms を検索して、［Xamarin.Forms 2.3.0.38-pre2（2016/5/5 時点）］を各プロジェクトにインストールすると、自動的にすべてアップデートされます。

DataBinding を Preview するのに必要なモノ

こちらも詳細は Xamarin エバンジェリストの James Montemagno さんのエントリー を見ていただきたいのですが、幾つか用意するものがあります。

App.cs に ViewModelLocator を用意

public static class ViewModelLocator
{
    static MonkeysViewModel monkeysVM;
    public static MonkeysViewModel MonkeysViewModel
    => monkeysVM ?? (monkeysVM = new MonkeysViewModel());
}

App.cs に上記の様に VM を Static で呼び出すクラスを追加します。

Model, ViewModel を用意

Xamarin.Forms の MVVM は ViewModel がファットなので、定義だけ指定した Model を用意します。

Model:

public class Monkey
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Image { get; set; }
}

ViewModel を用意します。今回はコンストラクタで ObservableCollection<T> にデータも追加しちゃいました。

VM:

public class MonkeysViewModel
{
    public ObservableCollection<Monkey> Monkeys { get; set; } = new ObservableCollection<Monkey>();

    public MonkeysViewModel()
    {
        this.Monkeys.Add(new Monkey { Name = "エンペラータマリン", Image = "EmperorTamarin.jpg", Location = "南アフリカ" });
        this.Monkeys.Add(new Monkey { Name = "ゴールデンライオンタマリン", Image = "GoldenLionTamarin.jpg", Location = "ブラジル" });
        this.Monkeys.Add(new Monkey { Name = "手長猿", Image = "Tenagazaru.jpg", Location = "インド" });
    }

    public int MonkeyCount => Monkeys.Count;
}

これで裏側の処理は完成です。（今回は各プロジェクトの Resources に画像を配置して、Image の Source をローカルで参照していますが、URL にして引っ張ってくる事も可能です。）後は View を用意するだけですが、一点だけ注意点があります。

View 作成

多分、Xamarin.Forms Previewer 専用なのでは？と思いますが、ContentPage 内に以下を追加する必要があります。

xmlns:design="clr-namespace:APPNAME;assembly=APPNAME"
BindingContext="{x:Static design:ViewModelLocator.MonkeysViewModel}"

後はコードビハインドに this.BindingContext = new ViewModels.MonkeysViewModel(); だけ追加すれば OK。

今回は James さんのブログエントリーに則って、以下の View を用意しました。

<StackLayout>
    <Button Text="How many monkeys?" x:Name="ButtonHowMany" />
    <Label Text="{Binding MonkeyCount, StringFormat='{0}匹'}" Margin="10,0" />
    <ListView ItemsSource="{Binding Monkeys}" 
            HasUnevenRows="true" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Image Source="{Binding Image}" 
                            HeightRequest="70" 
                            WidthRequest="70" 
                            HorizontalOptions="CenterAndExpand" 
                            VerticalOptions="CenterAndExpand" 
                            Grid.RowSpan="2"/>
                        <Label Grid.Row="0" 
                            Grid.Column="1" 
                            Text="{Binding Name}" 
                            VerticalOptions="End"/>
                        <Label Grid.Row="1" 
                            Grid.Column="1" 
                            Text="{Binding Location, StringFormat='{0}'}"
                            VerticalTextAlignment="Start"/>
                        
                    </Grid> 
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

これで、ObservableCollection<T> をバインディングしながら、View を調整できます。James さんのビデオでは、Xamarin Plugin の ImageCircle を参照している様も収録されていますので、見てみてください。

上手く表示されない場合は

プロジェクトをビルドしてみてください。多分表示されるはず。

Xamarin 気になった方は

是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 2 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソース や JXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose（アスポーズ）、Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。