ここから本文です

XAML Previewer for Xamarin.Formsを使ってみよう

@IT 7月15日(金)6時10分配信

 2016年4月に開催されたXamarin Evolve 2016では、XAML Previewer for Xamarin.Forms(以下、XAML Previewer)が発表された。本稿ではXAML Previewerがどんなものかを見てみよう。

【その他の画像】XAML PreviewerでXAMLページをプレビュー表示

●XAML Previewer

 その名前の通り、XAML PreviewerはXAMLで記述したXamarin.Formsのページをプレビューする機能だ。従来はXAMLを書き、アプリをシミュレーターやデバイスで実行しなければ、そのページが実際にどのように表示されるかが分からなかったのが、XAML Previewerを使えば、どんな表示になるかを開発環境上で確認しながらページを構築できるようになる。

 ただし、本稿執筆時点(2016年7月14日)では、XAML PreviewerはまだMac OS X上で動作するXamarin Studioのα版でしか提供されていない(Visual Studioでもサポートはまだだ)。本稿の内容はあくまでも現段階でのXAML Previewerについてのものであることには注意されたい。

●XAML Previewerが動作しない?

 上では「α版でしか提供されていない」と書いたが、本稿執筆時点ではXamarin Studioのαチャンネル(α版を提供するアップデートチャンネル)から入手できるバージョンではXAML Previewerが動作しないようだ(筆者が試したところでは動作しなかった)。実際に試してみるには、古いバージョンのα版を入手する必要がある。前述のリンク先のページにはXAML Previewerを試せるバージョンへのリンクが含まれているので、試してみたい方はそちらを参照してほしい。

 本稿ではOS XにXamarin Studioのstable版をインストールした上で、XAML Previewerが動作する古いα版のXamarin Studioを上書きして動作を確認している(これを行うと、「stableチャンネルでXamarin Studioのアップデートがあるよ」と通知されるようになるのでオススメしない)。

 なお、Xamarin Studioのα版のインストール方法などについては本稿では取り上げない。これらについてはエクセルソフトの田淵氏のブログ記事「Xamarin.Forms Previewer で DataBinding を使用するには」やそこからたどれる記事を参照してほしい(ただし、その手順でα版をインストールしてもXAML Previewerが動作しない可能性があることには留意されたい)。

●XAML Previewerを使ってみる

 XAML Previewerが利用可能な環境では、XAMLファイルをダブルクリックすれば、デフォルトでそのファイルがXAML Previewerを使って表示される(ファイルを右クリックして、コンテキストメニューから[アプリケーションを選択して開く]-[XAML Viewer]を選択してもよい。なお、メニュー項目は[XAML Viewer]となっているが、本稿では「XAML Previewer」と表記する)。以下に例を示す。

 タブの右上にある[プレビュー]ボタンはXAML Previewerによるプレビュー表示を行うかどうかをトグル形式で切り替える。XAMLは属性をずらずらと記述していくと、横に長くなっていくことがよくあるので、コードを記述している間はXAMLのみを表示して、一区切りしたところでこのボタンを押して、プレビュー表示を行うとよいだろう。

 XAML Previewerでは以下を切り替えて表示可能だ(ただし、筆者の環境では[Platform]に[Android]を指定した場合にはうまいこと表示ができなかった)。

・[Device]: [Phone]か[Tablet]
・[Platform]: [Android]か[iOS]
・デバイスの向き: 縦置きか横置き

 以下に[Device]に[Phone]を、[Platform]に[iOS]を選択して、縦置き/横置きを切り替えた画面を示す。

 プレビューの左側ではIntelliSenseを利かせながら、XAMLを編集可能だ。

 ここでは[Say Hello]ボタンの下にある(Textプロパティに設定をしておらず、見えない状態だった)ラベルに対して、Textプロパティを設定しようとしている。IntelliSenseによって候補が表示され、同時にプレビュー画面にはエラーが表示されている。

 このように、XAMLを書けばそのプレビューがリアルタイムで表示されるため、Xamarin.Formsアプリの開発が大きくはかどるようになるはずだ。ただし、注意点が1つある。それはリストビュー(ListViewコントロール)などを使って、アイテムのコレクションを一覧表示したいような場合だ。

●デザイン時にデータバインディングを行う

 ここでは以下のようなデータをページに表示したいとしよう(先ほども見た「Color List」を表示する)。ColorItemクラスは色の名前とその値を格納するクラスで、ColorItemsクラスはColorItemクラスのコレクションを管理する。

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace XamlPreviewSample
{
public class ColorItem
{
public Color Value { get; set; }
public string Name { get; set; }
}

public class ColorItems
{
public List<ColorItem> ColorList { get; private set; }
public ColorItems()
{
ColorList = new List<ColorItem>();
ColorList.Add(new ColorItem() { Value = Color.Black, Name = "Black" });
ColorList.Add(new ColorItem() { Value = Color.Red, Name = "Red" });
ColorList.Add(new ColorItem() { Value = Color.Blue, Name = "Blue" });
…… 省略 ……
ColorList.Add(new ColorItem() { Value = Color.Teal, Name = "Teal" });
}
}

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new ColorItems();
}
}
}

 ColorItemsクラスのColorListプロパティが表示するデータの実体であり、これはColorItemオブジェクトを要素とするリストになっている。そして、ColorItemクラスには色の名前を示すNameプロパティとその色の値を示すValueプロパティが定義されている。

 実際にデータを表示する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="XamlPreviewSample.MainPage"
Padding="10">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="Color List"
HorizontalTextAlignment="Center"
FontSize="40"></Label>
<ListView ItemsSource="{Binding ColorList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<BoxView Color="{Binding Value}"></BoxView>
<Label Text="{Binding Name}"
VerticalTextAlignment="Center"></Label>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

 詳細は割愛するが、ListViewコントロールでは、ItemsSourceプロパティとColorItemsクラスのColorListプロパティをデータバインディングし、データテンプレート内ではLabelコントロールとBoxViewコントロールに対して、個々の要素が持つNameプロパティ(色の名前)とValueプロパティ(色の値)をデータバインディングしている。これにより、アプリには色とその名前のリストが表示されるようになっている。iOSシミュレーターでの実行画面を以下に示す。

 シミュレーターではこのようにきちんとデータが表示される。だが、このままのXAMLだと、プレビューは次のようになってしまう。

 C#コードを見ると分かるように、アプリの実行時にはページのコンストラクタでBindingContextプロパティに、ColorItemsクラスのインスタンスをセットしているが、ページの記述中にXAML Previewerからはこのデータにはアクセスができない(アプリが実行されているわけではないため)。XAMLのプレビュー画面でもデータバインディングを行うには何らかのスタティックなデータが必要となる。

 これを行うための方法が「Xamarin.Forms XAML Previewer Design Time Data」ページで紹介されている(XAML Previewerのページの「Adding Design-Time Data」セクションからもリンクされているので、これは定型のパターンと考えてよいだろう)。以下はそこで説明されていることを引き写したようなものだ。

 まずは静的なクラスと静的なプロパティを用意する(これが前述した「Xamarin.Forms XAML Previewer Design Time Data」ページで作成している「ViewModelLocatorクラス」に相当する。ビューモデルというのもおこがましいので、本稿ではこのような名前にしてある)。

namespace XamlPreviewSample
{

…… 省略 ……

public class ColorItems
{
public List<ColorItem> ColorList { get; private set; }
public ColorItems()
{
…… 省略 ……
}
}

public static class ColorItemStaticSample {
static ColorItems _sampleData;
public static ColorItems ColorItemSampleData
{
get { return _sampleData ?? (_sampleData = new ColorItems()); }
}
// 以下と同値
// public static ColorItems ColorItemSampleData
// => _sampleData ?? (_sampleData = new ColorItems());
}

public partial class MainPage : ContentPage
{
public MainPage()
{
…… 省略 ……
}
}
}


 ColorItemStaticSampleクラスのColorItemSampleDataプロパティは静的なプロパティであり、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="XamlPreviewSample.MainPage"
xmlns:design="clr-namespace:XamlPreviewSample;assembly=XamlPreviewSample"
BindingContext="{x:Static design:ColorItemStaticSample.ColorItemSampleData}"
Padding="10">
<ContentPage.Content>
…… 省略 ……
</ContentPage.Content>
</ContentPage>

 最初の行は静的なデータが存在する名前空間とアセンブリの指定だ。次の行はデザイン時のバインディングコンテキストの設定で、ここに先ほど見た「ColorItemStaticSampleクラスのColorItemSampleDataプロパティ」を指定してやる。プロジェクトをビルド(再ビルド)すれば、うまくプレビューされるようになる(うまく再描画されないときには[プレビュー]ボタンを何度かクリックしてみるとよい)。

 デザイン時のデータバインディングが行えるようになれば、リストビューに表示される項目の微調整を目で確認しながら行えるようになる。データの一覧表示や入力を行うアプリはXamarin.Formsが得意とする分野であることを考えると、デザイン時にデータバインディングを行うことで、プレビューしながらXAMLの調整を行えるメリットはとても大きいはずだ。

 本稿では、XAML Previewerの概要を見てきた。XAMLが実際にどんな感じで表示されるかを実機やシミュレーターを使わずに確認できることのメリットは大きい。正式版がXamarin StudioとVisual Studioの両者で利用できるようになることが待ち遠しい機能だ。

 次回は、OS Xと連携してiOSアプリのビルドを行ったり、Windows側でiOSシミュレーターを実行したりする方法などを紹介する予定だ。

[かわさきしんじ,Insider.NET編集部]

最終更新:7月15日(金)6時10分

@IT