SlideShare uma empresa Scribd logo
1 de 60
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

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

ドメインモデルの育て方
ドメインモデルの育て方ドメインモデルの育て方
ドメインモデルの育て方
 
Redmineの基本と適用事例
Redmineの基本と適用事例Redmineの基本と適用事例
Redmineの基本と適用事例
 
「ローコード開発プラットフォームのトレンドとMicrosoft Power Platformの概要」
「ローコード開発プラットフォームのトレンドとMicrosoft Power Platformの概要」「ローコード開発プラットフォームのトレンドとMicrosoft Power Platformの概要」
「ローコード開発プラットフォームのトレンドとMicrosoft Power Platformの概要」
 
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
 
Prism + ReactiveProperty入門
Prism + ReactiveProperty入門Prism + ReactiveProperty入門
Prism + ReactiveProperty入門
 
MFC Paint
MFC PaintMFC Paint
MFC Paint
 
Android Layout.pptx
Android Layout.pptxAndroid Layout.pptx
Android Layout.pptx
 
Redmine + Lychee導入のアンチパターン
Redmine + Lychee導入のアンチパターンRedmine + Lychee導入のアンチパターン
Redmine + Lychee導入のアンチパターン
 
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
 
Introduction to Facebook React
Introduction to Facebook ReactIntroduction to Facebook React
Introduction to Facebook React
 
Railsで作るBFFの功罪
Railsで作るBFFの功罪Railsで作るBFFの功罪
Railsで作るBFFの功罪
 
ある工場のRedmine画面カスタム【View customize plugin 活用例】
ある工場のRedmine画面カスタム【View customize plugin 活用例】ある工場のRedmine画面カスタム【View customize plugin 活用例】
ある工場のRedmine画面カスタム【View customize plugin 活用例】
 
RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集RedmineのFAQとアンチパターン集
RedmineのFAQとアンチパターン集
 
自分のサービスで生きていく
自分のサービスで生きていく自分のサービスで生きていく
自分のサービスで生きていく
 
【Redmine】ツールバーボタンを作ろう
【Redmine】ツールバーボタンを作ろう【Redmine】ツールバーボタンを作ろう
【Redmine】ツールバーボタンを作ろう
 
スタートアップにおける技術チームの作り方
スタートアップにおける技術チームの作り方スタートアップにおける技術チームの作り方
スタートアップにおける技術チームの作り方
 
Redmineチューニングの実際と限界(旧資料) - Redmine performance tuning(old), See Below.
Redmineチューニングの実際と限界(旧資料) - Redmine performance tuning(old), See Below.Redmineチューニングの実際と限界(旧資料) - Redmine performance tuning(old), See Below.
Redmineチューニングの実際と限界(旧資料) - Redmine performance tuning(old), See Below.
 
挫折しないRedmine
挫折しないRedmine挫折しないRedmine
挫折しないRedmine
 
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
ドメイン駆動設計 ~ユーザー、モデル、エンジニアの新たな関係~
 
HFM Business Rule Writing Tips and Techniques
HFM Business Rule Writing Tips and TechniquesHFM Business Rule Writing Tips and Techniques
HFM Business Rule Writing Tips and Techniques
 

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

Semelhante a 20分でできる!Xamarin.Forms入門 (20)

WPF開発者がXamarin.Macを触るその前に
WPF開発者がXamarin.Macを触るその前にWPF開発者がXamarin.Macを触るその前に
WPF開発者がXamarin.Macを触るその前に
 
Xamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれからXamarin.Forms のこれまでとこれから
Xamarin.Forms のこれまでとこれから
 
Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発Visual Studio + xamarin で始めるモバイル アプリ開発
Visual Studio + xamarin で始めるモバイル アプリ開発
 
BoxViewの美味しい食べ方
BoxViewの美味しい食べ方BoxViewの美味しい食べ方
BoxViewの美味しい食べ方
 
JXUGC 13 東京 はじめに
JXUGC 13 東京 はじめにJXUGC 13 東京 はじめに
JXUGC 13 東京 はじめに
 
DEV-023_Xamarin Deep Dive - Xamarin.Forms の可能性
DEV-023_Xamarin Deep Dive - Xamarin.Forms の可能性DEV-023_Xamarin Deep Dive - Xamarin.Forms の可能性
DEV-023_Xamarin Deep Dive - Xamarin.Forms の可能性
 
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターンXamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン
 
Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15Xamarin 概要 2017/01/15
Xamarin 概要 2017/01/15
 
Xamarin 基礎講座
Xamarin 基礎講座Xamarin 基礎講座
Xamarin 基礎講座
 
XamarinにMono申す!
XamarinにMono申す!XamarinにMono申す!
XamarinにMono申す!
 
わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門わんくま名古屋 #38 (20160521) Xamarin入門
わんくま名古屋 #38 (20160521) Xamarin入門
 
第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要第1回 Japan Xamarin User Group Conference - Xamarin 概要
第1回 Japan Xamarin User Group Conference - Xamarin 概要
 
Xamarin を使うとどんなことができるの?
Xamarin を使うとどんなことができるの?Xamarin を使うとどんなことができるの?
Xamarin を使うとどんなことができるの?
 
Xamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみたXamarin.Forms.WPF を試してみた
Xamarin.Forms.WPF を試してみた
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
 
Xamarin概要と活用方法
Xamarin概要と活用方法Xamarin概要と活用方法
Xamarin概要と活用方法
 
Xamarin の概要と活用事例
Xamarin の概要と活用事例Xamarin の概要と活用事例
Xamarin の概要と活用事例
 
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
 
C# と Xamarin
C# と XamarinC# と Xamarin
C# と Xamarin
 

Mais de Shinichi Hirauchi

C#で作成するfacebookアプリ mvp community camp
C#で作成するfacebookアプリ mvp community campC#で作成するfacebookアプリ mvp community camp
C#で作成するfacebookアプリ mvp community camp
Shinichi Hirauchi
 
簡易電話交換機の作成~廃品利用による低予算プロジェクト
簡易電話交換機の作成~廃品利用による低予算プロジェクト簡易電話交換機の作成~廃品利用による低予算プロジェクト
簡易電話交換機の作成~廃品利用による低予算プロジェクト
Shinichi Hirauchi
 
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとしてBlack jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
Shinichi Hirauchi
 
初めてのFacebookアプリの開発
初めてのFacebookアプリの開発初めてのFacebookアプリの開発
初めてのFacebookアプリの開発
Shinichi Hirauchi
 
HTMLを1行も書かずにwebアプリを作ってみました
HTMLを1行も書かずにwebアプリを作ってみましたHTMLを1行も書かずにwebアプリを作ってみました
HTMLを1行も書かずにwebアプリを作ってみました
Shinichi Hirauchi
 

Mais de Shinichi Hirauchi (20)

Amazon connect について 〜各種AWSのサービスとの連携〜
Amazon connect について 〜各種AWSのサービスとの連携〜Amazon connect について 〜各種AWSのサービスとの連携〜
Amazon connect について 〜各種AWSのサービスとの連携〜
 
Alexa SDK Alexa Salon
Alexa SDK Alexa SalonAlexa SDK Alexa Salon
Alexa SDK Alexa Salon
 
Developers.io 2017 iPhoneによるAlexa/Lex/Pollyを利用した 音声対応クライアントの作成方法
Developers.io 2017 iPhoneによるAlexa/Lex/Pollyを利用した 音声対応クライアントの作成方法Developers.io 2017 iPhoneによるAlexa/Lex/Pollyを利用した 音声対応クライアントの作成方法
Developers.io 2017 iPhoneによるAlexa/Lex/Pollyを利用した 音声対応クライアントの作成方法
 
Developers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよDevelopers.io.札幌 xamarinってどうよ
Developers.io.札幌 xamarinってどうよ
 
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
 
Developers.IO 2016 F-1 セッション資料
Developers.IO 2016 F-1 セッション資料Developers.IO 2016 F-1 セッション資料
Developers.IO 2016 F-1 セッション資料
 
シルバーウィークにfacebookアプリを作成した
シルバーウィークにfacebookアプリを作成したシルバーウィークにfacebookアプリを作成した
シルバーウィークにfacebookアプリを作成した
 
Xamarin.formsで作成する翻訳機能付きtwitterクライアント
Xamarin.formsで作成する翻訳機能付きtwitterクライアント Xamarin.formsで作成する翻訳機能付きtwitterクライアント
Xamarin.formsで作成する翻訳機能付きtwitterクライアント
 
簡易電話交換機の作成~廃品利用による低予算プロジェクト~
簡易電話交換機の作成~廃品利用による低予算プロジェクト~簡易電話交換機の作成~廃品利用による低予算プロジェクト~
簡易電話交換機の作成~廃品利用による低予算プロジェクト~
 
この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015
この辺でXamarin導入による 効果と限界をしっかり把握してみよう  MVP Community Camp 2015 この辺でXamarin導入による 効果と限界をしっかり把握してみよう  MVP Community Camp 2015
この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015
 
C#で作成するfacebookアプリ mvp community camp
C#で作成するfacebookアプリ mvp community campC#で作成するfacebookアプリ mvp community camp
C#で作成するfacebookアプリ mvp community camp
 
Facebookスパムデータベース~あなたのお友達に、スパムアカウントが紛れ込んでませんか
Facebookスパムデータベース~あなたのお友達に、スパムアカウントが紛れ込んでませんかFacebookスパムデータベース~あなたのお友達に、スパムアカウントが紛れ込んでませんか
Facebookスパムデータベース~あなたのお友達に、スパムアカウントが紛れ込んでませんか
 
簡易電話交換機の作成~廃品利用による低予算プロジェクト
簡易電話交換機の作成~廃品利用による低予算プロジェクト簡易電話交換機の作成~廃品利用による低予算プロジェクト
簡易電話交換機の作成~廃品利用による低予算プロジェクト
 
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとしてBlack jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
Black jumbodogの新機能(webapi)~自動テストにおけるsmtpモックとして
 
初めてのFacebookアプリの開発
初めてのFacebookアプリの開発初めてのFacebookアプリの開発
初めてのFacebookアプリの開発
 
Facebookの偽アカウント
Facebookの偽アカウントFacebookの偽アカウント
Facebookの偽アカウント
 
テストコードの定型化
テストコードの定型化テストコードの定型化
テストコードの定型化
 
HTMLを1行も書かずにwebアプリを作ってみました
HTMLを1行も書かずにwebアプリを作ってみましたHTMLを1行も書かずにwebアプリを作ってみました
HTMLを1行も書かずにwebアプリを作ってみました
 
ReSharperでLinq変換
ReSharperでLinq変換ReSharperでLinq変換
ReSharperでLinq変換
 
マウスでタッチ操作
マウスでタッチ操作マウスでタッチ操作
マウスでタッチ操作
 

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