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.
2016.05.07 JXUGC #13 東京 緊急開催 Xamarin のすべて!
Xamarin.Forms は、頑張りすぎないのが吉。
20分でできる!Xamarin.Forms入門
自己紹介
 識別子 SIN/札幌ワークス
 Twitter @furuya02
 スタッフ CLR/H
 ブログ SIN@SAPPOROWORKSの覚書
 Microsoft MVP for Visual C# (2013/1~)
...
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
ページ
Xamarin.Formsには、6種類のページが用意されています
• ContentPage
• MasterDetailPage
• NavigationPage
• TabbedPage
• TemplatedPage
• Caro...
ContentPage
MasterDetailPage
NavigationPage
TabbedPage
CarouselPage
Xamarin.Forms ページ(Formsを使用したアプリ作成の第1歩)
http://dev.classmethod.jp/smartphone/xamarin-forms-page/
Xamarin.Forms Pages
https:...
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
レイアウト
コントロールの配置すをサポートする
Xamarin.Formsのレイアウトは、次の9種類があります。
• StackLayout
• AbsoluteLayout
• Grid
• RelativeLayout
• Frame
• ...
Stacklayout
Absolutelayout
Gridlayout
RelativeLayout
Frame/ContentView/ScrollView
Xamarin.Forms レイアウト(Formsを使用したアプリ作成の次の1歩)
http://dev.classmethod.jp/smartphone/xamarin-forms-layout/
Xamarin.Forms Layouts...
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
コントロール
各種の部品
Xamarin.Formsのコントロールは、次の19種類があります。
• ActivityIndicator
• BoxView
• Button
• DatePicker
• TimePicker
• Editor
...
ActivityIndicator
BoxView
Button
DatePicker
Editor
Entry
Image
Label
Picker
SearchBar
Slider
Stepper
TimePicker
WebView
ListView
TableView
Switch
Xamarin.Forms コントロール① (Formsを使用した最後の1歩)
http://dev.classmethod.jp/smartphone/xamarin-forms-control1/
Xamarin.Forms コントロール②...
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
Xamarin.Formsのセルには、次の5種類があります。
• TextCell
• ImageCell
• EntryCell
• SwitchCel
• ViewCell
定型(テンプレート)
全部自前で作成
セル
ListView及びT...
TextCell
ImageCell
EntryCell
SwitchCell
ViewCell
Xamarin.Forms セル(Formsを使用した追加の1歩)
http://dev.classmethod.jp/smartphone/xamarin-forms-cell/
Xamarin.Forms Cells
https://dev...
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
PushModalAsync/PopModalAsync
ページの遷移
ContentPageのNavigationを使用する
Navigation.PushModalAsync(new NewPage());
Navigation.PopModalAsync();
こちらは、NavigationPa...
ページ遷移
ページからページへの遷移になる
Windows
Application
Page Page
まとめ
かなり乱暴ですが、まとめちゃいます
Windows
Application
Page
Page Page
Control
Control
Cell
Cell
Cell
Cell
Layout
ご清聴ありがとうございました
SIN/札幌ワークス
http://www.sapporoworks.ne.jp/spw
20分でできる!Xamarin.Forms入門
20分でできる!Xamarin.Forms入門
Upcoming SlideShare
Loading in …5
×

20分でできる!Xamarin.Forms入門

14,019 views

Published on

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

Published in: Software
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ◆◆◆ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ◆◆◆ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20分でできる!Xamarin.Forms入門

  1. 1. 2016.05.07 JXUGC #13 東京 緊急開催 Xamarin のすべて! Xamarin.Forms は、頑張りすぎないのが吉。 20分でできる!Xamarin.Forms入門
  2. 2. 自己紹介  識別子 SIN/札幌ワークス  Twitter @furuya02  スタッフ CLR/H  ブログ SIN@SAPPOROWORKSの覚書  Microsoft MVP for Visual C# (2013/1~)  フリーソフト BlackJumboDog  クラスメソッド(株)
  3. 3. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  4. 4. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  5. 5. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  6. 6. ページ Xamarin.Formsには、6種類のページが用意されています • ContentPage • MasterDetailPage • NavigationPage • TabbedPage • TemplatedPage • CarouselPage
  7. 7. ContentPage
  8. 8. MasterDetailPage
  9. 9. NavigationPage
  10. 10. TabbedPage
  11. 11. CarouselPage
  12. 12. Xamarin.Forms ページ(Formsを使用したアプリ作成の第1歩) 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
  13. 13. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  14. 14. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  15. 15. レイアウト コントロールの配置すをサポートする Xamarin.Formsのレイアウトは、次の9種類があります。 • StackLayout • AbsoluteLayout • Grid • RelativeLayout • Frame • ContentView • ScrollView • ContentPresenter • TemplatedView 複数の子要素を格納できるプロパティーである Childrenを持つ 単一の子要素しか格納できないプロパティーであ るContentを持つ
  16. 16. Stacklayout
  17. 17. Absolutelayout
  18. 18. Gridlayout
  19. 19. RelativeLayout
  20. 20. Frame/ContentView/ScrollView
  21. 21. Xamarin.Forms レイアウト(Formsを使用したアプリ作成の次の1歩) 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
  22. 22. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  23. 23. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  24. 24. コントロール 各種の部品 Xamarin.Formsのコントロールは、次の19種類があります。 • ActivityIndicator • BoxView • Button • DatePicker • TimePicker • Editor • Entry • Image • Label • Picker • ProgressBar • SearchBar • Slider • Stepper • Switch • WebView • ListView • TableView • OpenGLView
  25. 25. ActivityIndicator
  26. 26. BoxView
  27. 27. Button
  28. 28. DatePicker
  29. 29. Editor
  30. 30. Entry
  31. 31. Image
  32. 32. Label
  33. 33. Picker
  34. 34. SearchBar
  35. 35. Slider
  36. 36. Stepper
  37. 37. TimePicker
  38. 38. WebView
  39. 39. ListView
  40. 40. TableView
  41. 41. Switch
  42. 42. Xamarin.Forms コントロール① (Formsを使用した最後の1歩) http://dev.classmethod.jp/smartphone/xamarin-forms-control1/ Xamarin.Forms コントロール② (Formsを使用した最後の1歩) 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
  43. 43. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  44. 44. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  45. 45. Xamarin.Formsのセルには、次の5種類があります。 • TextCell • ImageCell • EntryCell • SwitchCel • ViewCell 定型(テンプレート) 全部自前で作成 セル ListView及びTableViewを使用する場合必要になる
  46. 46. TextCell
  47. 47. ImageCell
  48. 48. EntryCell
  49. 49. SwitchCell
  50. 50. ViewCell
  51. 51. Xamarin.Forms セル(Formsを使用した追加の1歩) 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
  52. 52. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  53. 53. 5つの要素 Xamarin.Formsで画面設計に必要な5つの要素 画面を作成するためには次の5つの要素を理解する必要があります。 • ページ • レイアウト • コントロール • セル • 画面遷移(ページ遷移)
  54. 54. PushModalAsync/PopModalAsync
  55. 55. ページの遷移 ContentPageのNavigationを使用する Navigation.PushModalAsync(new NewPage()); Navigation.PopModalAsync(); こちらは、NavigationPage間の遷移用なので間違わない様に・・ Navigation.PushAsync(new NewPage());
  56. 56. ページ遷移 ページからページへの遷移になる Windows Application Page Page
  57. 57. まとめ かなり乱暴ですが、まとめちゃいます Windows Application Page Page Page Control Control Cell Cell Cell Cell Layout
  58. 58. ご清聴ありがとうございました SIN/札幌ワークス http://www.sapporoworks.ne.jp/spw

×