2016.05.07 JXUGC #13 東京 緊急開催 Xamarin のすべて！

1. 2016.05.07 JXUGC #13 東京 緊急開催 Xamarin のすべて！
Xamarin.Forms は、頑張りすぎないのが吉。
20分でできる！Xamarin.Forms入門

2. 自己紹介
 識別子 ＳＩＮ/札幌ワークス
 Twitter @furuya02
 スタッフ CLR/H
 ブログ SIN@SAPPOROWORKSの覚書
 Microsoft MVP for Visual C# (2013/1～)
 フリーソフト BlackJumboDog
 クラスメソッド（株）

3. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

4. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

5. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

6. ページ
Xamarin.Formsには、６種類のページが用意されています
• ContentPage
• MasterDetailPage
• NavigationPage
• TabbedPage
• TemplatedPage
• CarouselPage

7. ContentPage

8. MasterDetailPage

9. NavigationPage

10. TabbedPage

11. CarouselPage

13. Xamarin.Forms ページ（Formsを使用したアプリ作成の第１歩）
http://dev.classmethod.jp/smartphone/xamarin-forms-page/
Xamarin.Forms Pages
https://developer.xamarin.com/guides/xamarin-forms/controls/pages/
ページ
ApplicationのメインとなるMainPageプロパティにセットする
Application
Page
MainPage

14. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

15. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

16. レイアウト
コントロールの配置すをサポートする
Xamarin.Formsのレイアウトは、次の9種類があります。
• StackLayout
• AbsoluteLayout
• Grid
• RelativeLayout
• Frame
• ContentView
• ScrollView
• ContentPresenter
• TemplatedView
複数の子要素を格納できるプロパティーである
Childrenを持つ
単一の子要素しか格納できないプロパティーであ
るContentを持つ

17. Stacklayout

18. Absolutelayout

19. Gridlayout

20. RelativeLayout

21. Frame/ContentView/ScrollView

22. Xamarin.Forms レイアウト（Formsを使用したアプリ作成の次の１歩）
http://dev.classmethod.jp/smartphone/xamarin-forms-layout/
Xamarin.Forms Layouts
https://developer.xamarin.com/guides/xamarin-forms/controls/layouts/
レイアウト
コントロールの配置をサポート
Page
Control
Control
Control
Layout

23. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

24. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

25. コントロール
各種の部品
Xamarin.Formsのコントロールは、次の19種類があります。
• ActivityIndicator
• BoxView
• Button
• DatePicker
• TimePicker
• Editor
• Entry
• Image
• Label
• Picker
• ProgressBar
• SearchBar
• Slider
• Stepper
• Switch
• WebView
• ListView
• TableView
• OpenGLView

26. ActivityIndicator

27. BoxView

28. Button

29. DatePicker

30. Editor

31. Entry

32. Image

33. Label

34. Picker

35. SearchBar

36. Slider

37. Stepper

38. TimePicker

39. WebView

40. ListView

41. TableView

42. Switch

43. Xamarin.Forms コントロール① （Formsを使用した最後の１歩）
http://dev.classmethod.jp/smartphone/xamarin-forms-control1/
Xamarin.Forms コントロール② （Formsを使用した最後の１歩）
http://dev.classmethod.jp/smartphone/xamarin-forms-controll2/
Xamarin.Forms Views
https://developer.xamarin.com/guides/xamarin-forms/controls/views/
コントロール
各種の部品
Control
Control
Control
Control
Control
Control Control

44. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

45. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

46. Xamarin.Formsのセルには、次の5種類があります。
• TextCell
• ImageCell
• EntryCell
• SwitchCel
• ViewCell
定型（テンプレート）
全部自前で作成
セル
ListView及びTableViewを使用する場合必要になる

47. TextCell

48. ImageCell

49. EntryCell

50. SwitchCell

51. ViewCell

52. Xamarin.Forms セル（Formsを使用した追加の１歩）
http://dev.classmethod.jp/smartphone/xamarin-forms-cell/
Xamarin.Forms Cells
https://developer.xamarin.com/guides/xamarin-forms/controls/cells/
セル
ListView及びTableViewを使用する場合必要になる
Cell
ListView
Cell
Cell
Cell

53. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

54. ５つの要素
Xamarin.Formsで画面設計に必要な５つの要素
画面を作成するためには次の５つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移（ページ遷移）

55. PushModalAsync/PopModalAsync

56. ページの遷移
ContentPageのNavigationを使用する
Navigation.PushModalAsync(new NewPage());
Navigation.PopModalAsync();
こちらは、NavigationPage間の遷移用なので間違わない様に・・
Navigation.PushAsync(new NewPage());

57. ページ遷移
ページからページへの遷移になる
Windows
Application
Page Page

58. まとめ
かなり乱暴ですが、まとめちゃいます
Windows
Application
Page
Page Page
Control
Control
Cell
Cell
Cell
Cell
Layout

60. ご清聴ありがとうございました
SIN/札幌ワークス
http://www.sapporoworks.ne.jp/spw