Xamarin.Forms.WPF を試してみた その３

1. / 60
Xamarin で
クラシックデスクトップアプ
リ(WPF)が作れるらしいので
試してみた
1
城東.NET #21
2018年06月21日
石崎 充良

2. / 60
自己紹介
石崎 充良 ( @mishi_cs )
Japan Xamarin Users Group ( JXUG )
Microsoft MVP for Visual Studio and Development Technologies
言語： C# XAML
活動：
・JXUG (もくもく会) (connpass)
・城東.NET Users Group (connpass)
・C# もくもく会 (connpass)
※主に秋葉原
2

3. / 60
［１ページでわかる］
Xamarinの概要
3

4. / 60
Xamarin とは
・クロスプラットフォーム
・ネイティブアプリ
・(Android ・iOS) のAPI カバー率 100 %
・C# / .NET / Visual Studio
・クロスプラットフォームでコードを共通化する
4

5. / 60
［再放送］
Xamarinの概要
5

6. / 60
Xamarin とは
・Android / iOS の API を C# から使えるようにしたもの
・C# (.NET) のライブラリを使えるようにしたもの
6
ロジックのみ共通化
UIはネイティブで個別に作りこむ
Shared C# App Logic
(.NET Standard)
iOS
C# UI
Android
C# UI
Windows
C# UI

7. / 60
Xamarin の2つの開発方法
7
Xamarin Native Xamarin Forms
ロジックのみ共通化
UIはネイティブで個別に作りこむ
ロジックとUIを共通化
UIは各プラットフォームの
同じ役割のUIが自動マッピング
Shared C# App Logic
(.NET Standard)
iOS
C# UI
Android
C# UI
Windows
C# UI
Shared C# App Logic
(.NET Standard)
Shared C# UI Code
(Xamarin.Forms)

8. / 60
ネイティブの UI
8

9. / 60
UI の開発手法
9
Xamarin.Native Xamarin.Forms
概要 ネイティブの技術を使用 UI 共通化ライブラリ
定義 Android では axml
iOS では storyboard など
xaml というシンプルな XML
制約 制限のない UI 各プラットフォームの最大公約数の機能
のみ
特徴 UI が共通化できない UI にこだわらないアプリなら UI まで共
通化可能
使いどころ コンシューマー向けアプリやデザ
インを重視する場合に
ビジネス向けアプリや機能重視のツール
系アプリなどに
Formsで細
かくUIを定
義したい
Custom Renderer で独自にネイティブの
コントロール/プロパティと結合するコン
トロールを作成可能

10. / 60
C# (.NET) のライブラリ
全体像
10
Xamarin
コード共有
Xamarin.Navive Xamarin.Forms.axml /
storyboard
Xamarin.Android
Xamarin.iOS
UI の定義UI の定義 どちらか選択

11. / 60
前回の
Xamarin.Forms.WPF
11

12. / 60
Xamarin.Forms の対応プラットフォーム
Xamarin.Forms の対応プラットフォームの追加
12

13. / 60
つまりこういうこと
13

14. / 60
つまりこういうこと(2)
14
手動追加
Xamarin.Forms では
いつものコードを書き加え
基底クラスを変更

15. / 60
(前回の Xamarin.Forms.WPF)
コントロールの
マッピングを
確認してみた
15

16. / 60
Xamarin.Forms 使われるクラス (スーパークラス)
StackLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
AbsoluteLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
RelativeLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
Grid Xamarin.Forms.Platform.WPF.FormsPanel Panel
ContentView Xamarin.Forms.Platform.WPF.FormsPanel Panel
ScrollView ScrollViewer
Frame Border
ActivityIndicator ProgressBar
BoxView System.Windows.Shapes.Rectangle
Button Button
DatePicker DatePicker
Editor TextBox
Entry Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Image Image
Label TextBlock
ListView ListView
Map Microsoft.Maps.MapControl.Map
OpenGLView
System.Windows.Forms.Integration.WindowsFormsHost
-> OpenTK.GLControl UserControl
Picker ComboBox
ProgressBar ProgressBar
SearchBar Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Slider Slider
Stepper <Border><StackPanel><Button/><Button/></StackPanel></Border>
Switch CheckBox
TableView ListView
TimePicker Xamarin.Forms.Platform.WPF.FormsTimePicker TextBox
WebView WebBrowser
EntryCell Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
ImageCell <Grid><Image/><TextBlock/><TextBlock/></Grid>
SwitchCell <Grid><TextBlock/><CheckBox/></Grid>
TextCell <StackPanel><TextBlock/><TextBlock/></StackPanel> 16

17. / 60
コントロールのマッピング （１）
Xamarin.Forms 使われるクラス (スーパークラス)
StackLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
AbsoluteLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
RelativeLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
Grid Xamarin.Forms.Platform.WPF.FormsPanel Panel
ContentView Xamarin.Forms.Platform.WPF.FormsPanel Panel
ScrollView ScrollViewer
Frame Border
ActivityIndicator ProgressBar
BoxView System.Windows.Shapes.Rectangle
Button Button
DatePicker DatePicker
Editor TextBox
Entry Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Image Image
Label TextBlock
ListView ListView
Map Microsoft.Maps.MapControl.Map 17

18. / 60
コントロールのマッピング （２）
Xamarin.Forms 使われるクラス (スーパークラス)
OpenGLView
System.Windows.Forms.Integration.WindowsFormsHost
-> OpenTK.GLControl UserControl
Picker ComboBox
ProgressBar ProgressBar
SearchBar Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Slider Slider
Stepper
<Border><StackPanel><Button/><Button/>
</StackPanel></Border>
TableView ListView
TimePicker Xamarin.Forms.Platform.WPF.FormsTimePicker TextBox
WebView WebBrowser
EntryCell Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
ImageCell <Grid><Image/><TextBlock/><TextBlock/></Grid>
SwitchCell <Grid><TextBlock/><CheckBox/></Grid>
TextCell <StackPanel><TextBlock/><TextBlock/></StackPanel>
ViewCell Xamarin.Forms.Platform.WPF.CellControl ContentControl
18

19. / 60
今回の
Xamarin.Forms.WPF
19

20. / 60
NuGet からインストール
20
チェックなしでOK

21. / 60
MainWindow を書き換え
21

22. / 60
これだけだとエラー
22

23. / 60
Xamarin.Forms パッケージ
23
パッケージをインストール →クリーン → リビルド
クリーンしてリビルド

24. / 60
画面に違和感
24

25. / 60
実行…違和感…
25

26. / 60
階層的にはおかしくない
26

27. / 60
ページの Xaml もおかしくはない
27

28. / 60
とりあえずそれらしく
28
横幅を Fill に。

29. / 60
目が離せない存在感
29

30. / 60
UWP と構造が違う
30

31. / 60
タイトルバー？
31
タイトルバーにしては
2 ページ目には居ない

32. / 60
試しに消してみた
32
WPFなのでコントロール
いじるのは簡単

33. / 60
ナビゲーションバーらしい
33

34. / 60
ナビゲーションバーを消す方法
34
消えた

35. / 60
アプリケーション
設定ファイル
35

36. / 60
普通に .config ファイルがいる
36
Assembly がやたら多いが
普通の .config

37. / 60
インストーラー
～ ClickOnce ～
37

38. / 60
インストーラーの作成
38
クリック

39. / 60
できあがり
39

40. / 60
インストール
40

41. / 60
エラー
41
netfx.force.conflicts バージョン 0.0.0.0 を
インストールする必要があります。

42. / 60
Bing ると
• bin (+obj) を消してリビルドしろという情報
• ただし、ASP.NET の情報
42

43. / 60
Bing ると
• bin (+obj) を消してリビルドしろという情報
• ただし、ASP.NET の情報
43
試してみた

44. / 60
Bing ると
• bin (+obj) を消してリビルドしろという情報
• ただし、ASP.NET の情報
44
試してみた
効果なし

45. / 60
グローバル
アセンブリキャッシュ
への登録
45

46. / 60
インストール方法の情報
46https://docs.microsoft.com/ja-jp/dotnet/framework/app-domains/how-to-install-an-assembly-into-the-gac

47. / 60
ユーティリティの使い方の情報
47https://docs.microsoft.com/ja-jp/dotnet/framework/tools/gacutil-exe-gac-tool

48. / 60
インストール
48
[コマンド]
gacutil -i netfx.force.conflicts.dll
[Assembly の場所]
C:Program Files (x86)Microsoft Visual
Studio2017EnterpriseMSBuildMicrosoftMicrosoft.NET.Build.Extensionsnet461lib

49. / 60
実行
49

50. / 60
もう一度
インストール
50

51. / 60
成功
51

52. / 60
Xamarin 的には
どう？
52

53. / 60
JXUG いつものハンズオン
53https://github.com/chomado/xamarin-dev-doc/blob/master/hands-on/readme.md

54. / 60
比較
54
Android WPF

55. / 60
比較
55
Android WPF

56. / 60
比較
56
Android WPF
完全に一致

57. / 60
ただし
57
未実装
（ビルドできるようにしてくれたことは助かる）
※簡単な実装で回避可能（WPFの時は無効にするなど）
何も起きない、エラーにもならない
（ビルドできるようにしてくれたことは助かる）
※簡単な実装の様に思えるがなぜ？

58. / 60
とりあえず
• 未実装になる点はあるが、おおむね OK
58

59. / 60
まとめ
59

60. / 60
まとめ
• ちゃんと UI を構築できる
• WPF の既存の設定ファイルがある
• インストーラも（今のところ問題はあるが）ちゃんと作れる
• 既存 Xamarin アプリの UI もそのまま使える
• 既存 Xamarin アプリのロジックも（簡単な検証だが）動作する
結論
• 十分使える方向で育ってきている
※使いどころがあるかどうかは別の話。アイデアは無限。
60

61. / 60
ありがとうございま
した！
61