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.
ストアアプリのXAMLを解説XAMLからデータバィンディングまで株式会社システムフレンド西村誠0
自己紹介1西村誠株式会社システムフレンド勤務Windows Phoneハンズオンin広島所属他色々勉強会に顔だしてます
自己紹介2EC-CUBE公式エバンジェリスト(Win環境でEC-CUBEという話をして・・)Twitter:coelacanthFacebook 西村誠ブログ:眠るシーラカンスと水底のプログラマーhttp://coelacanth.heteml...
自己紹介3好きなものC#、嫌いなものXAML苦手克服のために今回はXAMLを選びました。みなさんがXAMLを好きになれますように!!
お品書き4・XAMLとは?・XAML入門・まとめ・お知らせ
XAMLとは?5・Windowsストアアプリ、Silverlight、WPF、WindowsPhoneアプリなどの見た目を定義するマークアップ言語(本セッションでは主にWindowsストアアプリのXAMLをベースに説明します)
XAMLとは?6・Extensible Application Markup LanguageEAML? だと変だから頭だけ2文字目extreme programmingもXPか
XAMLとは?7XAML以外にもHTMLやmxml(Adobe Flex)などがある。どれも見た目を定義するために利用する文字→見た目、なのでバイナリと違いバージョン管理できる(Flashはもともとバイナリのflaファイルに画面コントロールを配...
XAMLとは?8・画面にコントロールを配置(ボタンを配置した例)<ButtonContent="Button"HorizontalAlignment="Left"Margin="115,112,0,0"VerticalAlignment="To...
XAMLとは?9・開発ツール上ではXAMLコードからデザインプレビューを表示してドラッグなどでレイアウト変更が可能。デザインビューWYSYWIGな開発が可能コードビューコードでプロパティを変更
XAMLとは?10・デモ コントロールの配置してみるXAMLのプロパティの変更は・・・デザインビューからコードビューからプロパティウィンドウから
XAML入門-はじめに11今回話すことのほとんどはMSDNに記載されています。(ただ見つけ辛いだけで・・・)本セッションではMSDNの読み解き方を合わせて紹介しようと思います。(参考)MSDN「Windowsストアアプリ開発入門」http://...
XAML入門-記法12XAMLは開始タグと終了タグを持つ○<Button>ボタン</Button>○<Button Content="ボタン" />×<ButtonContent="ボタン" >
XAML入門-プロパティ13XAMLは「プロパティ」を持つ<Button Content="ボタン" />ButtonコントロールのContentプロパティに「ボタン」という文字を指定している。プロパティの一覧はMSDNで確認できます。(参照)...
XAML入門-プロパティ要素構文14以下のようにプロパティを記述することができる。<Button><Button.Width>100</Button.Width></Button>サンプルのように数字を指定してもあまりメリットなく、複雑な内容の...
XAML入門-プロパティ要素構文15このような記述はプロパティ要素構文で<Setter Property="Template"><Setter.Value><ControlTemplateTargetType="Button"><Grid><V...
XAML入門-コンテンツプロパティ16プロパティの指定で以下のようにタグとタグの間に指定できるものがあります。<Button>ここに指定</Button><TextBlock>ここに指定</TextBlock>これを「コンテンツプロパティ」と呼...
XAML入門-コンテンツプロパティ17Buttonコントロールの継承を眺めながら、「コンテンツプロパティ」をさらに掘り下げてみます。(参照)Button Classhttp://msdn.microsoft.com/ja-JP/library/...
XAML入門-コンテンツプロパティ18ButtonBase:ボタン系のコントロールの基礎ボタンのスタイル(後述)はButtonBaseで指定すればボタン系すべてのコントロールで継承できる。FrameworkElemnt&UIElement:すべ...
XAML入門-コンテンツプロパティ19ContentConrol:内部コンテンツを1つ持つコントロールに共通Button、CheckBox、ScrollViewerなど<Button><内部コンテンツ/></Button>
XAML入門-コンテンツプロパティ20ContentControlの定義をVisualStudioで確認すると・・・(ContentControlの定義抜粋)[ContentProperty(Name = "Content")][Marshal...
XAML入門-コンテンツプロパティ21ContentControlの定義をVisualStudioで確認すると・・・[ContentProperty(Name = "Content")]ContentProperty属性が”Content”だと...
XAML入門-コンテンツプロパティ22<Button><Image Source="Assets/Logo.png" /></Button>できます。
XAML入門-コンテンツプロパティ23子要素を複数持てるCanvas、StackPanelなどコントロールはPanelを継承しています。Panelのコンテンツプロパティは、[ContentProperty(Name = "Children")]...
XAML入門-コンテンツプロパティ24同じく子要素を複数持てるTextBlockは・・・[ContentProperty(Name = "Inlines")]public InlineCollection Inlines { get; }ちょっ...
XAML入門-属性構文25XAMLのプロパティを指定するときに、どんな型でも文字列で指定できるのはどうなってるんだ?エラーもでるし一応型チェックあるのか?と疑問に思うことがあります。VisibilityにCollapsed(非表示)とVisib...
XAML入門-属性構文26これは属性構文という形で、プロパティの値をいい感じに変換してくれているからです。いい感じに変換できるものプリミティブなやつ Integer, double, Booleanなど文字列から変換かのうなやつ Color=“...
XAML入門-マークアップ拡張27先述の属性構文以外の型もマークアップ拡張で指定可能に、<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">XAMLコード...
XAML入門-マークアップ拡張28「マークアップ拡張」の種類タイプ 概要Binding データバインディングCustomResource カスタムリソースを指定RelativeSource 相対的にバインディングのソースを指定StaticRes...
XAML入門-リソース29「マークアップ拡張」でも出てきましたが、リソースはスタイルの再利用や、テンプレートの再利用などができる仕組みです。(参考)リソースの例StandardStyles.xaml
XAML入門-リソース30こんな感じでC#のクラスをインスタンス化することも(strプロパティを持ったHogeクラス)<Page.Resources><my:Hoge str="hogeStr" x:Key="hogeKey" /></Page...
XAML入門-スタイル31コントロールの外見やプロパティを定義する。概念的にはCSSみたいなものと説明すると伝えやすいけど、Templateの設定とかもできちゃうので、かなり定義できることは幅広い<Style x:Key="BasicRichT...
XAML入門-コレクションの扱い32データの集合を扱う。ListView、GridView、FlipView、ComboBoxの項目など
XAML入門-コレクションの扱い33コレクションの一個一個のデータをItemと呼びます。たとえばGridVIewでは以下のようにItemをバインドするためのソースデータと一個一個のItemを表示するためのテンプレートを定義します。<GridVi...
XAML入門-データバインド34XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティコードビハインド(C#コードなどの)の値
XAML入門-データバインド35コントロールのDataContextにC#の値を代入する(XAMLでDataContextに値を指定する例)DataContext="{Binding DefaultViewModel,RelativeSourc...
XAML入門-データバインド36こういうコードがなくなるhogeText.Text = “コントロールのプロパティを直接変更”;コントロールがTextBlockだということに依存して良くない
XAML入門-データバインド37データバインドだとこうなるmessage = “C#上で値を変更”;<TextBlockText={Binding message} />直接TextBlockを操作しないので別のコントロールプロパティでもOK
XAML入門-MVVM38Model-View-ViewModelの略。データバインドを使って依存を減らした構造をもう少し発展させる(乱暴?)データバインドはデフォルトで利用できるが、MVVMを利用する場合はMVVM Lightなどを利用(Nu...
39XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティ コードビハインド(C#コードなどの)の値XAML入門-MVVMこれだけだとイベントハンドラーはコードビハインドに書かなければいけない・・・ちょっと美しくない!!
40XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティコードビハインド(C#コードなどの)の値XAML入門-MVVMイベント ICommandデータバインドCommand
41(XAML)<Button Command=“{Binding restartCommand}” />(C#)public ICommand restartCommand{get{return new RelayCommand<string...
42・XAMLは単純な構文だが色々なことができる(C#で書くか、XAMLで書くかは人それぞれ)・VisualStudio、Blendなどの開発ツールをうまく使う・コレクションの扱い、データバインディングは慣れが必要(次の登壇機会にやりたい)・M...
43・今回話したのはXAMLの基礎各プラットフォームのコントロール毎に覚える必要があるし、レイアウトシステムやアニメーション、ViewStateなどの実装に必要が概念が色々あります。続きはWindows Phoneハンズオンやヒーロー島、Cod...
宣伝445月28日に新しい本が出版されます。「プロのためのWindowsストアアプリプログラミングガイド」Amazonでも予約受付中!!(税込3360円)
宣伝45入門の場合はこちらを!!
宣伝46MicrosoftとCSS Niteのコラボイベント開催します。2013年7月27日 広島開催
宣伝47Windows Phone ハンズオン勉強会やってます。月1ぐらいのペースで平日の夜に勉強会やってます。8~10人ぐらいで気軽にやっている勉強会なのでぜひ参加してみてください。
48ご清聴ありがとうございました!!
49
Upcoming SlideShare
Loading in …5
×

ストアアプリのXamlを解説

5,242 views

Published on

Windowsストアアプリを中心にSilverlight、WPFでも使うXAMLについて紹介

Published in: Technology
  • Be the first to comment

ストアアプリのXamlを解説

  1. 1. ストアアプリのXAMLを解説XAMLからデータバィンディングまで株式会社システムフレンド西村誠0
  2. 2. 自己紹介1西村誠株式会社システムフレンド勤務Windows Phoneハンズオンin広島所属他色々勉強会に顔だしてます
  3. 3. 自己紹介2EC-CUBE公式エバンジェリスト(Win環境でEC-CUBEという話をして・・)Twitter:coelacanthFacebook 西村誠ブログ:眠るシーラカンスと水底のプログラマーhttp://coelacanth.heteml.jp/blog/記事:CodeZine 速習Windowsストアアプリケーションhttp://codezine.jp/article/corner/471
  4. 4. 自己紹介3好きなものC#、嫌いなものXAML苦手克服のために今回はXAMLを選びました。みなさんがXAMLを好きになれますように!!
  5. 5. お品書き4・XAMLとは?・XAML入門・まとめ・お知らせ
  6. 6. XAMLとは?5・Windowsストアアプリ、Silverlight、WPF、WindowsPhoneアプリなどの見た目を定義するマークアップ言語(本セッションでは主にWindowsストアアプリのXAMLをベースに説明します)
  7. 7. XAMLとは?6・Extensible Application Markup LanguageEAML? だと変だから頭だけ2文字目extreme programmingもXPか
  8. 8. XAMLとは?7XAML以外にもHTMLやmxml(Adobe Flex)などがある。どれも見た目を定義するために利用する文字→見た目、なのでバイナリと違いバージョン管理できる(Flashはもともとバイナリのflaファイルに画面コントロールを配置・・・)条件分などがなくプログラミング要素がなくデザイナーさんでも頑張れば触れる(???)
  9. 9. XAMLとは?8・画面にコントロールを配置(ボタンを配置した例)<ButtonContent="Button"HorizontalAlignment="Left"Margin="115,112,0,0"VerticalAlignment="Top"/>
  10. 10. XAMLとは?9・開発ツール上ではXAMLコードからデザインプレビューを表示してドラッグなどでレイアウト変更が可能。デザインビューWYSYWIGな開発が可能コードビューコードでプロパティを変更
  11. 11. XAMLとは?10・デモ コントロールの配置してみるXAMLのプロパティの変更は・・・デザインビューからコードビューからプロパティウィンドウから
  12. 12. XAML入門-はじめに11今回話すことのほとんどはMSDNに記載されています。(ただ見つけ辛いだけで・・・)本セッションではMSDNの読み解き方を合わせて紹介しようと思います。(参考)MSDN「Windowsストアアプリ開発入門」http://msdn.microsoft.com/ja-jp/windows/apps/br229512.aspx
  13. 13. XAML入門-記法12XAMLは開始タグと終了タグを持つ○<Button>ボタン</Button>○<Button Content="ボタン" />×<ButtonContent="ボタン" >
  14. 14. XAML入門-プロパティ13XAMLは「プロパティ」を持つ<Button Content="ボタン" />ButtonコントロールのContentプロパティに「ボタン」という文字を指定している。プロパティの一覧はMSDNで確認できます。(参照)Button Classhttp://msdn.microsoft.com/ja-JP/library/windows/apps/windows.ui.xaml.controls.button
  15. 15. XAML入門-プロパティ要素構文14以下のようにプロパティを記述することができる。<Button><Button.Width>100</Button.Width></Button>サンプルのように数字を指定してもあまりメリットなく、複雑な内容の指定に利用する
  16. 16. XAML入門-プロパティ要素構文15このような記述はプロパティ要素構文で<Setter Property="Template"><Setter.Value><ControlTemplateTargetType="Button"><Grid><VisualStateManager.VisualStateGroups>・・・
  17. 17. XAML入門-コンテンツプロパティ16プロパティの指定で以下のようにタグとタグの間に指定できるものがあります。<Button>ここに指定</Button><TextBlock>ここに指定</TextBlock>これを「コンテンツプロパティ」と呼びます。
  18. 18. XAML入門-コンテンツプロパティ17Buttonコントロールの継承を眺めながら、「コンテンツプロパティ」をさらに掘り下げてみます。(参照)Button Classhttp://msdn.microsoft.com/ja-JP/library/windows/apps/windows.ui.xaml.controls.button
  19. 19. XAML入門-コンテンツプロパティ18ButtonBase:ボタン系のコントロールの基礎ボタンのスタイル(後述)はButtonBaseで指定すればボタン系すべてのコントロールで継承できる。FrameworkElemnt&UIElement:すべてのコントロールが継承している。この辺を読めばコントロールの性質が見えてくる
  20. 20. XAML入門-コンテンツプロパティ19ContentConrol:内部コンテンツを1つ持つコントロールに共通Button、CheckBox、ScrollViewerなど<Button><内部コンテンツ/></Button>
  21. 21. XAML入門-コンテンツプロパティ20ContentControlの定義をVisualStudioで確認すると・・・(ContentControlの定義抜粋)[ContentProperty(Name = "Content")][MarshalingBehavior(MarshalingType.Agile)][Threading(ThreadingModel.Both)][Version(100794368)][WebHostHidden]public class ContentControl : Control{
  22. 22. XAML入門-コンテンツプロパティ21ContentControlの定義をVisualStudioで確認すると・・・[ContentProperty(Name = "Content")]ContentProperty属性が”Content”だということがわかります。このContentProperty属性がコンテンツプロパティとしてタグとタグの間に記述できます。ちなみにContentプロパティは・・・public object Content { get; set; }object型なのでテキスト以外も指定できそうな推測できます。
  23. 23. XAML入門-コンテンツプロパティ22<Button><Image Source="Assets/Logo.png" /></Button>できます。
  24. 24. XAML入門-コンテンツプロパティ23子要素を複数持てるCanvas、StackPanelなどコントロールはPanelを継承しています。Panelのコンテンツプロパティは、[ContentProperty(Name = "Children")]public UIElementCollection Children { get; }
  25. 25. XAML入門-コンテンツプロパティ24同じく子要素を複数持てるTextBlockは・・・[ContentProperty(Name = "Inlines")]public InlineCollection Inlines { get; }ちょっと変わっていてInlineCollectionを持ちます。Inlineを継承する改行(LineBreak)や段落(Run)がInlineCollectionに指定できます。(以下の名前空間のInlineを継承しているコントロールが該当)(参考)Windows.UI.Xaml.Documentshttp://msdn.microsoft.com/ja-jp/library/windows/apps/br209984.aspx
  26. 26. XAML入門-属性構文25XAMLのプロパティを指定するときに、どんな型でも文字列で指定できるのはどうなってるんだ?エラーもでるし一応型チェックあるのか?と疑問に思うことがあります。VisibilityにCollapsed(非表示)とVisible(表示)以外の文字列を指定するとエラー。
  27. 27. XAML入門-属性構文26これは属性構文という形で、プロパティの値をいい感じに変換してくれているからです。いい感じに変換できるものプリミティブなやつ Integer, double, Booleanなど文字列から変換かのうなやつ Color=“AliceBlue”とかイベントハンドラーなやつ Tapped=“hogeEventHandler”
  28. 28. XAML入門-マークアップ拡張27先述の属性構文以外の型もマークアップ拡張で指定可能に、<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">XAMLコードのプロパティで{ }に囲まれているものが「マークアップ拡張」。(参照)XAML のWindows ランタイム名前空間拡張子http://msdn.microsoft.com/ja-jp/library/windows/apps/hh758289.aspx
  29. 29. XAML入門-マークアップ拡張28「マークアップ拡張」の種類タイプ 概要Binding データバインディングCustomResource カスタムリソースを指定RelativeSource 相対的にバインディングのソースを指定StaticResource 静的なリソースを利用TemplateBinding ControlTemplate でバインディングを指定CustomResourceはストアアプリから導入されたマークアップ拡張(・・・だけど実際に使ったことがない)
  30. 30. XAML入門-リソース29「マークアップ拡張」でも出てきましたが、リソースはスタイルの再利用や、テンプレートの再利用などができる仕組みです。(参考)リソースの例StandardStyles.xaml
  31. 31. XAML入門-リソース30こんな感じでC#のクラスをインスタンス化することも(strプロパティを持ったHogeクラス)<Page.Resources><my:Hoge str="hogeStr" x:Key="hogeKey" /></Page.Resources>
  32. 32. XAML入門-スタイル31コントロールの外見やプロパティを定義する。概念的にはCSSみたいなものと説明すると伝えやすいけど、Templateの設定とかもできちゃうので、かなり定義できることは幅広い<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock"><Setter Property="Foreground"Value="{StaticResourceApplicationForegroundThemeBrush}"/></Style>
  33. 33. XAML入門-コレクションの扱い32データの集合を扱う。ListView、GridView、FlipView、ComboBoxの項目など
  34. 34. XAML入門-コレクションの扱い33コレクションの一個一個のデータをItemと呼びます。たとえばGridVIewでは以下のようにItemをバインドするためのソースデータと一個一個のItemを表示するためのテンプレートを定義します。<GridViewx:Name="itemGridView"ItemsSource="{Binding Source={StaticResourcegroupedItemsViewSource}}"ItemTemplate="{StaticResource Standard250x250ItemTemplate}"ItemsSourceはListやObservableCollectionなどがバインドされる。
  35. 35. XAML入門-データバインド34XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティコードビハインド(C#コードなどの)の値
  36. 36. XAML入門-データバインド35コントロールのDataContextにC#の値を代入する(XAMLでDataContextに値を指定する例)DataContext="{Binding DefaultViewModel,RelativeSource={RelativeSource Self}}“(C#側でやる場合)this._viewModel = new QuizPageViewModel();this._viewModel.init();this.DataContext = this._viewModel;
  37. 37. XAML入門-データバインド36こういうコードがなくなるhogeText.Text = “コントロールのプロパティを直接変更”;コントロールがTextBlockだということに依存して良くない
  38. 38. XAML入門-データバインド37データバインドだとこうなるmessage = “C#上で値を変更”;<TextBlockText={Binding message} />直接TextBlockを操作しないので別のコントロールプロパティでもOK
  39. 39. XAML入門-MVVM38Model-View-ViewModelの略。データバインドを使って依存を減らした構造をもう少し発展させる(乱暴?)データバインドはデフォルトで利用できるが、MVVMを利用する場合はMVVM Lightなどを利用(NuGetからDL可能)(参考)MVVM Lighthttp://mvvmlight.codeplex.com/
  40. 40. 39XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティ コードビハインド(C#コードなどの)の値XAML入門-MVVMこれだけだとイベントハンドラーはコードビハインドに書かなければいけない・・・ちょっと美しくない!!
  41. 41. 40XAMLの値とC#のプロパティを結びつける仕組みXAMLのプロパティコードビハインド(C#コードなどの)の値XAML入門-MVVMイベント ICommandデータバインドCommand
  42. 42. 41(XAML)<Button Command=“{Binding restartCommand}” />(C#)public ICommand restartCommand{get{return new RelayCommand<string>(async (p) =>{});}}C#側はコードビハインド以外にもハンドラーを書けるXAML入門-MVVM
  43. 43. 42・XAMLは単純な構文だが色々なことができる(C#で書くか、XAMLで書くかは人それぞれ)・VisualStudio、Blendなどの開発ツールをうまく使う・コレクションの扱い、データバインディングは慣れが必要(次の登壇機会にやりたい)・MSDNは訳が難解な部分などはあるが、読み込むとXAMLについて構造が見えてくる!!XAML入門-まとめ
  44. 44. 43・今回話したのはXAMLの基礎各プラットフォームのコントロール毎に覚える必要があるし、レイアウトシステムやアニメーション、ViewStateなどの実装に必要が概念が色々あります。続きはWindows Phoneハンズオンやヒーロー島、CodeZineなどで紹介していく予定XAML入門-まとめ
  45. 45. 宣伝445月28日に新しい本が出版されます。「プロのためのWindowsストアアプリプログラミングガイド」Amazonでも予約受付中!!(税込3360円)
  46. 46. 宣伝45入門の場合はこちらを!!
  47. 47. 宣伝46MicrosoftとCSS Niteのコラボイベント開催します。2013年7月27日 広島開催
  48. 48. 宣伝47Windows Phone ハンズオン勉強会やってます。月1ぐらいのペースで平日の夜に勉強会やってます。8~10人ぐらいで気軽にやっている勉強会なのでぜひ参加してみてください。
  49. 49. 48ご清聴ありがとうございました!!
  50. 50. 49

×