読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin.Forms for Windows を使ってみた

Xamarin.Forms Xamarin

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

2016/1/22 追記:
最新の Xamarin.Forms 2.0.1.6495 用のプロジェクトテンプレートを作成しました。Xamarin.Forms の PCL、AndroidiOS、UWP、Windows Store 8.1、Windows Phone 8.1 (WinRT) の 6つのプロジェクトが含まれていて、プロジェクトを作成してビルドするだけで、UWP, Windows Store, Windows Phone 8.1 アプリが作れます。ぜひ試してみてください。

ytabuchi.hatenablog.com











【速報】Xamarin.Forms がついにストアアプリと Windows Phone RT に対応! - Xamarin 日本語情報 にも書きましたが、Xamarin.Forms が Windows ストアアプリ、Windows Phone 8.1 RT に対応しました。

Xamarin.Forms for Windows Phone 8.1 を使ってみた - Xamarin 日本語情報Windows Phone 8.1 プロジェクトの作成方法をアップしました。

簡単にストアアプリの追加方法とどんなコントロールが現時点で使えるのか?を調べてみました。

はじめに

必要なシステム

です。
なお、現時点では以下の制限があります。

制限

  • Map がない - 現段階では Map のサポートはありません。
  • Grid View がない - Grid View なしではネイティブの操作感の Windows アプリケーションはほぼビルドできません。Xamarin.Forms は現在は (ネイティブの) Grid View コントロールはサポートしていませんが、先のリリースでサポートする予定です。(田淵補足:多分ネイティブの Grid View は横にスクロールしていくいわゆるタイル的なやつだと思いますが、それはまだみたいです。)
  • コントロール - すべてのコントロールレンダラーが新しい Windows ターゲットに用意されているわけではありません。これはプレビューのため、リリース毎にサポートレベルが上がっていくでしょう。
  • リソース - WinRT の標準のセキュリティレベルで、ReflectionPermission パーミッションが正しく設定されていない異なるアセンブリからの埋め込みリソースのロードは動作しません。このパーミッションは PCL アセンブリには設定できません。

その他の違いは Differences - Xamarin を参照してください。

なお、後半の使ってみたで列挙しますが、幾つか使えないコントロールがありました。

Xamarin.Forms for Windows の追加・設定方法

Xamarin.Forms プロジェクトを用意します。今回はサンプルとして、ほぼすべてのコントロールが見れる FormsGallery - XamarinWindows ストアアプリにしてみたいと思います。

Forms の PCL プロジェクトを Profile 259 に変更します

Forms の PCL (移植可能) を
f:id:ytabuchi:20150324113336p:plain:w300
右クリック→プロパティからライブラリ > ターゲット の 変更 をクリックし
f:id:ytabuchi:20150324114739p:plain:w450
Windows Phone 8.1 を追加します。
f:id:ytabuchi:20150324113210p:plain:w300

ソリューションに Windows ストアアプリプロジェクトを追加します

ソリューションを右クリックして、追加 > 新しいプロジェクト をクリック

Visual C# > ストアアプリ > Windows アプリ > 空のアプリケーション でプロジェクトを追加します。なお、Forms のプロジェクトは標準で物理フォルダを切るので、そのフォルダ以下にしても構わないと思います。(ハイライト部分)
f:id:ytabuchi:20150324120407p:plain:w450

NuGet パッケージを追加します

作成された Windows ストアアプリのプロジェクトに NuGet から Xamarin.Forms.Windows を追加するのですが、プロジェクトを右クリックから NuGet パッケージの管理リリース前のパッケージを含める を選択して xamarin.forms などを検索します。
f:id:ytabuchi:20150324121843p:plain:w450

それでも良いのですが、時間が掛かりますので、Visual Studio のメニューから 表示 > その他のウィンドウ > パッケージマネージャーコンソール を開いて、PM> Install-Package Xamarin.Forms.Windows を入力した方が早いですね。以下の結果が返って来れば OK です。

依存関係 'Xamarin.Forms (≥ 1.4.2.6355)' の解決を試みています。
'Xamarin.Forms 1.4.2.6355' を XXX.Windows81 に追加しています。
'Xamarin.Forms 1.4.2.6355' が XXX.Windows81 に正常に追加されました。
'Xamarin.Forms.Windows 1.4.2.6355' を XXX.Windows81 に追加しています。
'Xamarin.Forms.Windows 1.4.2.6355' が XXX.Windows81 に正常に追加されました。

ストアアプリプロジェクトの設定をします

プロジェクトの 参照設定 を右クリックして 参照の追加 を選択し、Xamarin.Forms のプロジェクトを参照します。
f:id:ytabuchi:20150324121810p:plain:w450

App.xaml.cs を開き、OnLaunched メソッド内の 65行目くらいにある以下の行の前に Init() メソッドを追加します。以下のようになります。

// この行を
Xamarin.Forms.Forms.Init(e); // requires LaunchActivatedEventArgs
// この下の行の前に追加します。
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)

MainPage.xaml を開き、Pageforms:WindowsPage にし、xmlns:forms="using:Xamarin.Forms.Platform.WinRT" を追加します。元からある <Grid> は削除しておきましょう。以下のようになります。

<forms:WindowsPage
    x:Class="FormsGallery.Windows81.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormsGallery.Windows81"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

</forms:WindowsPage>

MainPage.xaml.cs を開き、: Page を削除し、InitializeComponent() の後に LoadApplication の呼び出しを追加します。以下のようになります。<名前空間> は今回は FormsGallery.App です。

public sealed partial class MainPage
{
    public MainPage()
    {
        this.InitializeComponent();
        // add this line
        LoadApplication(new <名前空間>.App());
    }
}

Package.appxmanifest ファイルを開き、機能タブの 場所 にチェックを追加します。
f:id:ytabuchi:20150324123512p:plain:w300

後は画像などのリソースファイルを追加してビルドすれば OK です!

実際に動かしてみた

ここからは実際のストアアプリとして、FormsGallery - Xamarin を動かしてみた画面写真などを記載していきます。Xaml だとどうなるの?ってのが知りたい方は、XAML Samples - Xamarin をストアアプリにしてみてください。こちらも問題なく動作します。

Label
f:id:ytabuchi:20150324130304p:plain:w300

Image
ファイルを WP と同じ Images/ide-xamarin-studio.png に配置しても戻る時にエラーが出ました。

BoxView
Box が表示されません
f:id:ytabuchi:20150324130520p:plain:w300

WebView
Web は表示できたのですが、多分ストアの Webview コントロールのセキュリティ制限ですね。0x800a138f - JavaScript 実行時エラー: 未定義または NULL 参照のプロパティ 'ajax' は取得できません というエラーが出ました。

Map
現時点での制限事項ですので表示されません。

Button
f:id:ytabuchi:20150324130047p:plain:w300

SearchBar
f:id:ytabuchi:20150324130753p:plain:w300

Slider
f:id:ytabuchi:20150324130817p:plain:w300

Stepper
f:id:ytabuchi:20150324130850p:plain:w300

Switch
f:id:ytabuchi:20150324130924p:plain:w300

DatePicker
f:id:ytabuchi:20150324131001p:plain:w300

TimePicker
f:id:ytabuchi:20150324131014p:plain:w300

Entry (単数行)
f:id:ytabuchi:20150324131050p:plain:w300

Entry (複数行)
f:id:ytabuchi:20150324131111p:plain:w300

ActivityIndicator
f:id:ytabuchi:20150324131146p:plain:w300

ProgressBar
f:id:ytabuchi:20150324131205p:plain:w300

Picker
f:id:ytabuchi:20150324131232p:plain:w300
f:id:ytabuchi:20150324131239p:plain:w300

ListView
f:id:ytabuchi:20150324131254p:plain:w300

TableView メニュー用 f:id:ytabuchi:20150324131326p:plain:w300

TableView フォーム用(ここに次の Cells が含まれているので Cells は省略します)
f:id:ytabuchi:20150324131411p:plain:w300

ContentView
f:id:ytabuchi:20150324131508p:plain:w300

Frame
f:id:ytabuchi:20150324131535p:plain:w300

ScrollView
f:id:ytabuchi:20150324131601p:plain:w300

StackLayout (下が切れているのが気になりますが…)
f:id:ytabuchi:20150324131646p:plain:w300

AbsoluteLayout
f:id:ytabuchi:20150324131734p:plain:w300

Grid (Xamarin.Forms での Grid です)
f:id:ytabuchi:20150324131811p:plain:w300

RelativeLayout
f:id:ytabuchi:20150324131841p:plain:w300

ContentPage
f:id:ytabuchi:20150324131854p:plain:w300

NavigationPage (次のページから左矢印でここに戻ってきます)
f:id:ytabuchi:20150324131921p:plain:w300

MasterDetailPage (クリック/タップすると左に DetailPage が表示されます)
f:id:ytabuchi:20150324132040p:plain:w300
f:id:ytabuchi:20150324132129p:plain:w300

TabbedPage (右クリック/上からスワイプ すると画面上部にタブが表示されます)
f:id:ytabuchi:20150324132257p:plain:w300
f:id:ytabuchi:20150324132306p:plain:w300

CarouselPage (左右にスワイプできます)
f:id:ytabuchi:20150324132404p:plain:w300

ThinkPad 8 に リモートデバッガーツール を使ってリモートデバッグして触ってみた動画をアップしましたので、併せてご参照ください。

ここまで来ると、完全に Mobile First で開発が出来ちゃうのでは?と思ってワクワクしますね。

公式資料

Xamarin.Forms for Windows の詳細は以下の公式資料をご覧ください。

James さんのブログ
Exciting Xamarin Announcements from dotnetConf | Xamarin BlogXamarin Blog

ドキュメント
Xamarin.Forms for Windows Preview - Xamarin

サンプルアプリ
jamesmontemagno/Hanselman.Forms

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

以上です。