放浪軍師のアプリ開発局

Xamarin.Formsを使ってAndroid,iOS,UWP,WPFで動くアプリを開発したりしています。

Prism を改造して Xamarin.Forms.WPF に適用を試してみた

放浪軍師の Xamarin.Forms によるアプリ開発
今回は Prism を改造して Xamarin.Forms.WPF に適用するというのを試してみました。

Xamarin.Forms.WPF で Prism を使う方法を教えてもらいました

以前私の記事で Xamarin.Forms.WPF に Prism はどうやら無理らしいと書いたのですが、私が teratail に投稿していた質問に @f-miyu さんが返答してくださいました。
teratail.com
それによるとなんと Prism を少し修正すれば WPF もいけるとの事。詳細は実際の記事をご覧ください。@f-miyuさん、まことに感謝です!
qiita.com

…で、これを試してみたのですがやった事のない操作がいくつかあったので、毎度のごとく苦戦しました。Prism の適用自体は上の記事で充分に紹介されているのでお任せするとして、ここでは具体的にどういう操作が必要なのかを画像付きで書き記しておこうと思います。同じような問題が発生した時の為に残しておかないと、すぐ忘れちゃうからね!

開発環境

  • Visual Studio 2017 Community
  • Xamarin.Forms 3.4.0.1009999
  • Xamarin.Forms.Platform.WPF 3.4.0.1009999

Prism のリポジトリをクローン

そこからかよ!って感じかもしれませんが、意外と説明しているページが無いのでそこから行きます。
1. GitHubのPrismリポジトリを開いて、「Clone or download」と、四角いマークを押してパスをクリップボードにコピーしておきます。
f:id:roamschemer:20190301230936p:plain
2.Visual Studio 2017を起動して、「ファイル」→「新規作成」→「リポジトリ」を選択します。
f:id:roamschemer:20190301230848p:plain
3.チームエクスプローラーが開くので、「GitHub」の下の「Clone」を選択します。
f:id:roamschemer:20190301231338p:plain
4.Open from GitHub と書かれたウインドウが開くので、URL を張り付けて Clone を押すとリポジトリが複製(クローン)されます。
f:id:roamschemer:20190301231452p:plain

v7.1.0のタグでチェックアウト

1.チームエクスプローラーよりタグを選択します
f:id:roamschemer:20190301231521p:plain
2.v7.1.0を右クリックしてチェックアウトを選択します
f:id:roamschemer:20190301231531p:plain

NuGetパッケージの作成

1.ソリューションエクスプローラーよりソリューション及びフォルダをクリックして、PrismLibrary_XF.slnを選択します。
f:id:roamschemer:20190301231706p:plain
2.Prism.Dryloc.Forms を右クリックしてパックを選択します。
f:id:roamschemer:20190301231748p:plain
※ここで私の環境では以下のようなエラーが出て失敗しました。

エラー APPX3217 'UAP 10.0.15063.0' の 'UAP.props' が含まれる SDK フォルダーが見つかりません。詳しくは、http://go.microsoft.com/fwlink/?LinkID=798187 をご覧ください。 Prism C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\Microsoft\VisualStudio\v15.0\AppxPackage\Microsoft.AppXPackage.Targets

その為、Visual Studio Installerより、詳細→変更を選択。Visual Studio Community 2017 個別のコンポーネントより
UWP用Windows 10 SDK(10.0.15063.0):C#,VB,JS
にチェックを入れてインストールを実行しました。
f:id:roamschemer:20190301231939p:plain
その後もう一度パックを選択したら

次の NuGet パッケージを復元中にエラーが発生しました: プロジェクト Prism.Autofac.Forms の詳細を読み込めなかったため、操作が失敗しました。

というエラーが発生しましたが、問題なく出力できていて、2回目以降はこのエラーは出なくなりました。これに関しては謎です。

ローカルのNugetパッケージの使用

水戸スヤさんの記事を参考にさせて頂きました。感謝ァ!
mitosuya.net

実際の使用方法

このローカルな Prism を使用すればエラーは出なくなるのですが、新規にプロジェクトを作成する際は以下2パターンがあると思います。

1.ノーマルな Xamarin.Forms のプロジェクトを作成した後 WPF を追加し、ローカルな Prism を適用後、各コードを Prism 向けに修正する。
2.Prism テンプレートから Xamarin.Forms のプロジェクトを作成した後 WPF を追加し、標準の Prism を消してローカルな Prism を適用後、WPF のコードを修正する 。

この場合、2の方が圧倒的に楽なので、こちらの手順が良いかと思います。WPF のコードは以下のとおりです。

MainWindow.xaml

<xf:FormsApplicationPage
    xmlns:xf="clr-namespace:Xamarin.Forms.Platform.WPF;assembly=Xamarin.Forms.Platform.WPF" x:Class="PrismWPF.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PrismWPF.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        
    </Grid>
</xf:FormsApplicationPage>

MainWindow.xaml.cs

using Prism;
using Prism.Ioc;

namespace PrismWPF.WPF
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Xamarin.Forms.Platform.WPF.FormsApplicationPage
    {
        public MainWindow()
        {
            InitializeComponent();
            Xamarin.Forms.Forms.Init();
            LoadApplication(new PrismWPF.App(new WpfInitializer()));
        }
        public class WpfInitializer : IPlatformInitializer
        {
            public void RegisterTypes(IContainerRegistry containerRegistry)
            {
                // Register any platform specific implementations
            }
        }
    }
}

まとめ

これで WPF でも Prism が使えるようになりました!WPF の為に Prism を捨てて再開発してたのですが、進めれば進めるほど Prism の機能が恋しくなっていたので本当にありがたいです。
改めて@f-miyuさんに感謝を!そして乱ちゃんはまた Prism 入れにゃ…(白目)