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

Xamarin 日本語情報

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

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

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

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 for Windows を使ってみた - Xamarin 日本語情報

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

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

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

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

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 Phone 8.1 アプリプロジェクトを追加します

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

Visual C# > ストアアプリ > Windows Phone アプリ > 空のアプリケーション でプロジェクトを追加します。なお、Forms のプロジェクトは標準で物理フォルダを切るので、そのフォルダ以下にしても構わないと思います。(ハイライト部分)
f:id:ytabuchi:20150331150843p: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 -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 のプロジェクトを参照します。
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: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 ファイルを開き、機能タブの 場所 にチェックを追加します。
f:id:ytabuchi:20150331152512p:plain:w450

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

実際に動かしてみた

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

f:id:ytabuchi:20150331154603p:plain:w300

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

Image
f:id:ytabuchi:20150331154711p:plain:w300

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

WebView
ストアでは JS のエラーが出ましたが、こちらは大丈夫です
f:id:ytabuchi:20150331154752p:plain:w300

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

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

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

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

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

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

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

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

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

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

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

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

Picker
f:id:ytabuchi:20150331154956p:plain:w300
f:id:ytabuchi:20150331155002p:plain:w300

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

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

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

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

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

ScrollView
スワイプ中なのでタップ位置とスクロールバーが見えていますね。
f:id:ytabuchi:20150331155051p:plain:w300

StackLayout
f:id:ytabuchi:20150331155149p:plain:w300

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

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

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

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

NavigationPage (次のページから戻るボタンでここに戻ってきます)
f:id:ytabuchi:20150331155225p:plain:w300

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

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

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

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

特に 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 リンクページ に参考資料を纏めてますので併せてどうぞ。

以上です。