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~)
 フリーソフト BlackJumboDog
 クラスメソッド(株)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
ページ
Xamarin.Formsには、6種類のページが用意されています
• ContentPage
• MasterDetailPage
• NavigationPage
• TabbedPage
• TemplatedPage
• CarouselPage
ContentPage
MasterDetailPage
NavigationPage
TabbedPage
CarouselPage
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
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
レイアウト
コントロールの配置すをサポートする
Xamarin.Formsのレイアウトは、次の9種類があります。
• StackLayout
• AbsoluteLayout
• Grid
• RelativeLayout
• Frame
• ContentView
• ScrollView
• ContentPresenter
• TemplatedView
複数の子要素を格納できるプロパティーである
Childrenを持つ
単一の子要素しか格納できないプロパティーであ
るContentを持つ
Stacklayout
Absolutelayout
Gridlayout
RelativeLayout
Frame/ContentView/ScrollView
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
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
コントロール
各種の部品
Xamarin.Formsのコントロールは、次の19種類があります。
• ActivityIndicator
• BoxView
• Button
• DatePicker
• TimePicker
• Editor
• Entry
• Image
• Label
• Picker
• ProgressBar
• SearchBar
• Slider
• Stepper
• Switch
• WebView
• ListView
• TableView
• OpenGLView
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 コントロール② (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
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
Xamarin.Formsのセルには、次の5種類があります。
• TextCell
• ImageCell
• EntryCell
• SwitchCel
• ViewCell
定型(テンプレート)
全部自前で作成
セル
ListView及びTableViewを使用する場合必要になる
TextCell
ImageCell
EntryCell
SwitchCell
ViewCell
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
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
5つの要素
Xamarin.Formsで画面設計に必要な5つの要素
画面を作成するためには次の5つの要素を理解する必要があります。
• ページ
• レイアウト
• コントロール
• セル
• 画面遷移(ページ遷移)
PushModalAsync/PopModalAsync
ページの遷移
ContentPageのNavigationを使用する
Navigation.PushModalAsync(new NewPage());
Navigation.PopModalAsync();
こちらは、NavigationPage間の遷移用なので間違わない様に・・
Navigation.PushAsync(new NewPage());
ページ遷移
ページからページへの遷移になる
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入門