Xamarin.Forms for Windows Phone 8.1 を使ってみた

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

2016/1/22 追記：
最新の Xamarin.Forms 2.0.1.6495 用のプロジェクトテンプレートを作成しました。Xamarin.Forms の PCL、Android、iOS、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 for Windows を使ってみた - Xamarin 日本語情報

にエントリーをアップしました。本日は Windows Phone 8.1 のプロジェクトを追加してみたいと思います。
(id:matatabi_ux さんにせっつかれたｗ)

必要なシステムや制限などは、上記の Xamarin.Forms for Windows を使ってみた をご参照ください。

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

Xamarin.Forms プロジェクトを用意します。今回はサンプルとして、ストアアプリの時と同様に FormsGallery - Xamarin を Windows Phone 8.1 アプリにしてみたいと思います。

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

Forms の PCL (移植可能) を

右クリック→プロパティからライブラリ > ターゲット の 変更 をクリックし
Windows Phone 8.1 を追加します。

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

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

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

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

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

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

依存関係 'Xamarin.Forms (≥ 1.4.2.6350-pre1)' の解決を試みています。
'Xamarin.Forms.Windows 1.4.2.6350-pre1' は既にインストールされています。
'Xamarin.Forms 1.4.2.6350-pre1' を FormsGallery.WinPhone81 に追加しています。
'Xamarin.Forms 1.4.2.6350-pre1' が FormsGallery.WinPhone81 に正常に追加されました。
'Xamarin.Forms.Windows 1.4.2.6350-pre1' を FormsGallery.WinPhone81 に追加しています。
'Xamarin.Forms.Windows 1.4.2.6350-pre1' が FormsGallery.WinPhone81 に正常に追加されました。

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

プロジェクトの 参照設定 を右クリックして 参照の追加 を選択し、Xamarin.Forms のプロジェクトを参照します。

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

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

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

<forms:WindowsPhonePage
    x:Class="FormsGallery.WinPhone81.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FormsGallery.WinPhone81"
    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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</forms:WindowsPhonePage>

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

namespace FormsGallery.WinPhone81
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
            // add this line
            LoadApplication(new ＜名前空間＞.App());

            this.NavigationCacheMode = NavigationCacheMode.Required;
        }
...

Package.appxmanifest ファイルを開き、機能タブの 場所 にチェックを追加します。

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

実際に動かしてみた

Windows 10 Technical Preview (OS バージョン 9941.12498) をインストールした Lumia 636 で試してみました。

Label

Image

BoxView
Box が表示されません

WebView
ストアでは JS のエラーが出ましたが、こちらは大丈夫です

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

Button

SearchBar

Slider

Stepper

Switch

DatePicker

TimePicker

Entry (単数行)

Entry (複数行)

ActivityIndicator

ProgressBar

Picker

ListView

TableView メニュー用

TableView フォーム用 (ここに次の Cells が含まれているので Cells は省略します)

ContentView

Frame

ScrollView
スワイプ中なのでタップ位置とスクロールバーが見えていますね。

StackLayout

AbsoluteLayout

Grid (Xamarin.Forms での Grid です)

RelativeLayout

ContentPage

NavigationPage (次のページから戻るボタンでここに戻ってきます)

MasterDetailPage (画面または下のｘボタン(アイコンを用意していないためかと) をタップすると DetailPage が表示されます。下のｘボタンの領域のせいでリストを上に引っ張ると見える Yellow が隠れてしまいます。)

TabbedPage (タブまたは下の View を左右にスワイプして移動します。Carousel とあまり違わないような…)

CarouselPage (左右にスワイプできます)

いかがでしょうか。「普通に」ビルド出来てしまうのが怖いですね笑

特に XAML Samples - Xamarin もストア、Windows Phone 8.1 をビルド出来るのですが、どうやって Xamarin Xaml (的な) を Wpf (的な) Xaml で処理しているのか？は非常に気になりますね。

公式資料

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

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

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

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

Xamarin 気になった方は

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

以上です。