Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarin.Forms.WPF を試してみた

1,538 views

Published on

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

Published in: Technology
  • Be the first to comment

Xamarin.Forms.WPF を試してみた

  1. 1. / 60 Xamarin で クラシックデスクトップアプ リ(WPF)が作れるらしいので 試してみた 1 城東.NET #21 2018年06月21日 石崎 充良
  2. 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. 3. / 60 [1ページでわかる] Xamarinの概要 3
  4. 4. / 60 Xamarin とは ・クロスプラットフォーム ・ネイティブアプリ ・(Android ・iOS) のAPI カバー率 100 % ・C# / .NET / Visual Studio ・クロスプラットフォームでコードを共通化する 4
  5. 5. / 60 [再放送] Xamarinの概要 5
  6. 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. 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. 8. / 60 ネイティブの UI 8
  9. 9. / 60 UI の開発手法 9 Xamarin.Native Xamarin.Forms 概要 ネイティブの技術を使用 UI 共通化ライブラリ 定義 Android では axml iOS では storyboard など xaml というシンプルな XML 制約 制限のない UI 各プラットフォームの最大公約数の機能 のみ 特徴 UI が共通化できない UI にこだわらないアプリなら UI まで共 通化可能 使いどころ コンシューマー向けアプリやデザ インを重視する場合に ビジネス向けアプリや機能重視のツール 系アプリなどに Formsで細 かくUIを定 義したい Custom Renderer で独自にネイティブの コントロール/プロパティと結合するコン トロールを作成可能
  10. 10. / 60 C# (.NET) のライブラリ 全体像 10 Xamarin コード共有 Xamarin.Navive Xamarin.Forms.axml / storyboard Xamarin.Android Xamarin.iOS UI の定義UI の定義 どちらか選択
  11. 11. / 60 前回の Xamarin.Forms.WPF 11
  12. 12. / 60 Xamarin.Forms の対応プラットフォーム Xamarin.Forms の対応プラットフォームの追加 12
  13. 13. / 60 つまりこういうこと 13
  14. 14. / 60 つまりこういうこと(2) 14 手動追加 Xamarin.Forms では いつものコードを書き加え 基底クラスを変更
  15. 15. / 60 (前回の Xamarin.Forms.WPF) コントロールの マッピングを 確認してみた 15
  16. 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. 17. / 60 コントロールのマッピング (1) 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. 18. / 60 コントロールのマッピング (2) 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. 19. / 60 今回の Xamarin.Forms.WPF 19
  20. 20. / 60 NuGet からインストール 20 チェックなしでOK
  21. 21. / 60 MainWindow を書き換え 21
  22. 22. / 60 これだけだとエラー 22
  23. 23. / 60 Xamarin.Forms パッケージ 23 パッケージをインストール →クリーン → リビルド クリーンしてリビルド
  24. 24. / 60 画面に違和感 24
  25. 25. / 60 実行…違和感… 25
  26. 26. / 60 階層的にはおかしくない 26
  27. 27. / 60 ページの Xaml もおかしくはない 27
  28. 28. / 60 とりあえずそれらしく 28 横幅を Fill に。
  29. 29. / 60 目が離せない存在感 29
  30. 30. / 60 UWP と構造が違う 30
  31. 31. / 60 タイトルバー? 31 タイトルバーにしては 2 ページ目には居ない
  32. 32. / 60 試しに消してみた 32 WPFなのでコントロール いじるのは簡単
  33. 33. / 60 ナビゲーションバーらしい 33
  34. 34. / 60 ナビゲーションバーを消す方法 34 消えた
  35. 35. / 60 アプリケーション 設定ファイル 35
  36. 36. / 60 普通に .config ファイルがいる 36 Assembly がやたら多いが 普通の .config
  37. 37. / 60 インストーラー ~ ClickOnce ~ 37
  38. 38. / 60 インストーラーの作成 38 クリック
  39. 39. / 60 できあがり 39
  40. 40. / 60 インストール 40
  41. 41. / 60 エラー 41 netfx.force.conflicts バージョン 0.0.0.0 を インストールする必要があります。
  42. 42. / 60 Bing ると • bin (+obj) を消してリビルドしろという情報 • ただし、ASP.NET の情報 42
  43. 43. / 60 Bing ると • bin (+obj) を消してリビルドしろという情報 • ただし、ASP.NET の情報 43 試してみた
  44. 44. / 60 Bing ると • bin (+obj) を消してリビルドしろという情報 • ただし、ASP.NET の情報 44 試してみた 効果なし
  45. 45. / 60 グローバル アセンブリキャッシュ への登録 45
  46. 46. / 60 インストール方法の情報 46https://docs.microsoft.com/ja-jp/dotnet/framework/app-domains/how-to-install-an-assembly-into-the-gac
  47. 47. / 60 ユーティリティの使い方の情報 47https://docs.microsoft.com/ja-jp/dotnet/framework/tools/gacutil-exe-gac-tool
  48. 48. / 60 インストール 48 [コマンド] gacutil -i netfx.force.conflicts.dll [Assembly の場所] C:Program Files (x86)Microsoft Visual Studio2017EnterpriseMSBuildMicrosoftMicrosoft.NET.Build.Extensionsnet461lib
  49. 49. / 60 実行 49
  50. 50. / 60 もう一度 インストール 50
  51. 51. / 60 成功 51
  52. 52. / 60 Xamarin 的には どう? 52
  53. 53. / 60 JXUG いつものハンズオン 53https://github.com/chomado/xamarin-dev-doc/blob/master/hands-on/readme.md
  54. 54. / 60 比較 54 Android WPF
  55. 55. / 60 比較 55 Android WPF
  56. 56. / 60 比較 56 Android WPF 完全に一致
  57. 57. / 60 ただし 57 未実装 (ビルドできるようにしてくれたことは助かる) ※簡単な実装で回避可能(WPFの時は無効にするなど) 何も起きない、エラーにもならない (ビルドできるようにしてくれたことは助かる) ※簡単な実装の様に思えるがなぜ?
  58. 58. / 60 とりあえず • 未実装になる点はあるが、おおむね OK 58
  59. 59. / 60 まとめ 59
  60. 60. / 60 まとめ • ちゃんと UI を構築できる • WPF の既存の設定ファイルがある • インストーラも(今のところ問題はあるが)ちゃんと作れる • 既存 Xamarin アプリの UI もそのまま使える • 既存 Xamarin アプリのロジックも(簡単な検証だが)動作する 結論 • 十分使える方向で育ってきている ※使いどころがあるかどうかは別の話。アイデアは無限。 60
  61. 61. / 60 ありがとうございま した! 61

×