XAMLで学ぶ    レイアウトスキル     グレープシティ株式会社            ⼋ 巻 雄哉         blog: d.hatena.ne.jp/Yamaki/                  Twitter: @yama...
アジェンダ なぜ今レイアウトスキル? 業務  ア プ リ 画 ⾯ に おける                  レイアウトの現状 レ イ ア ウ ト ⽅ 式 は ⼤ き く 分 け て 2つ XAMLを例に相対配置を学ぶ   配置する...
XAMLで学ぶレイアウトスキルなぜ今レイアウトスキル?                  3
なぜ今レイアウトスキルなのか?画   ⾯ 解像 度 の 多 様 化  液晶ディスプレイの低価格化、ワイド化  ノートPCの普及(3台中2台がノート?)  PC以外のデバイスの登場      スマートフォン、タブレットPC/スレートPC...
画 ⾯ 解像 度 の 多 様 化2006年7⽉           その他                                             Yuya Yamaki’s blog                      ...
画 ⾯ 解像 度 の 多 様 化2011年7⽉                                              Yuya Yamaki’s blog                                  h...
画 ⾯ 解像度⽐ 較    解像度⽐      1024×768          1280×1024                      1920×1080
画 ⾯ の向 き           8
これじゃちょっとカッコ悪い                9
Windows 8            10
Windows 8            11
XAMLで学ぶレイアウトスキル業務ア プ リ 画 ⾯ に お け る              レイアウトの現状                         12
業務アプリケーションの現状    ウィンドウサイズの固定768ピクセル                     最 ⼤化 / 最 ⼩ 化                     ボ タ ン は ⾮ 表⽰          1024ピクセル
固定サイズ(リサイズしない)固定サイズ(リサイズしない) リサイズできないようにする Windowsフォームの場合  this.MaximizeBox = false;  this.FormBorderStyle = FormBorderS...
絶対配置のリサイズ対応 リサイズ時に各コントロールの            位 置 、 ⼤ き さ を 動 的 に 調整 VB6     フォームのリサイズイベントでコントロール      の 位置 や ⼤ きさ を 変 更 Windo...
XAMLで学ぶレイアウトスキルレ イ ア ウ ト ⽅ 式 は ⼤ きく 分 け て 2つ                                16
絶対配置と相対配置 絶対配置     位 置 や ⼤ き さ が 直 接 指 定 されて決まる 相対配置(動的配置)     周りの要素とそれらとの関係で              位置 や ⼤ きさ が 決 まるさ ま ざ ま な 画...
相対配置におけるリサイズへの対応相対配置におけるリサイズへの対応            相対配置であること          リサイズに対応している モダンなUIフレームワークは                        相対配置が基本 ...
XAMLで学ぶレイアウトスキルXAMLを例に相対配置を学ぶ                  19
配置する要素と配置される領域    配置する要素                   配置される領域     が持つ属性                      が持つ属性VerticalAlignment:Center   4⾏ 5列のGr...
配置する要素 最終的な位置(X座標、Y座標)と⼤ きさ ( 幅 、 ⾼ さ ) の 決 定 に影響する3つの属性 ① VerticalAlignmentプロパティ、   HorizontalAlignmentプロパティ ② Marginプロパ...
※参考資料 VerticalAlignmentプロパティ    Top、Center、Bottom、Stretch HorizontalAlignmentプロパティ    Left、Center、Right、Stretch Margi...
※参考資料 Widthプロパティ、Heightプロパティ    ピクセル、Auto(Double.Nan) MaxWidthプロパティ、MinWidthプロパ ティ、MaxHeightプロパティ、MinHeight プロパティ    ピ...
配置される領域 Grid     列と ⾏ で 構 成 さ れ る                格 ⼦ 状 の 領域 を 定 義 して 配置 StackPanel     ⽔ 平 ⽅ 向 ま た は 垂 直 ⽅ 向 に 並 べ て 配...
※参考資料 Grid     ColumnDefinitionsプロパティ(列を定義)       ColumnDefinitionクラス            Widthプロパティ(列幅を指定)     RowDefinitions...
※参考資料 GridLength構造体    3つのモード(GridUnitTypeプロパティ)      Auto    配置された要素に必要なサイズ      Pixel   ピクセルで指定する絶対値      Star    全...
※参考資料 配置要素に対する添付プロパティ    Column      Grid内   の ど の 列 に 表⽰ す る か ( ゼ ロ オ リ ジ ン )    ColumnSpan      Grid内   の い く つ の ...
※参考資料 GridSplitter     ShowsPreviewプロパティ       ドロップ時に実際のサイズを変更するかどうか 以下のプロパティはWPFのみ  ( こ れ ら の プ ロ パ テ ィ が な く て も ⽀障は...
※参考資料 StackPanel     Orientationプロパティ      ⼦   要素 が 配置 さ れ る ⽅ 向 ( ⽔ 平 か 垂 直 )⼦    要素 の VerticalAlignmentプロパティ     Or...
※参考資料 WrapPanel(WPFのみ)    Orientationプロパティ     ⼦   要素 が 配置 さ れ る ⽅ 向 ( ⽔ 平 か 垂 直 )    ItemWidthプロパティ      1⼦   要素 の 配...
XAMLで学ぶレイアウトスキルサ ン プ ル で 学 ぶ 実 際の 使 い ⽅                           31
32
33
34
WrapPanelAuto   GridSplitter                           35
なぜ階層化する必要があるのか⽬       的 や 役 割 ごとに              領域をパネルとして分けたい      ⼀ 般的 に 、 リ サ イ ズ 処 理 は 領域 単 位 で 異 な る      耐変更性に優れている...
37
「1 Star」から「Auto」に変更    「Auto」から             「1 Star」に変更                           38
XAMLで学ぶレイアウトスキルXAML以外のUIフレームワーク                   39
⽐ 較表①Windowsフォーム   XAML                  Adobe Flex             AndroidAnchor、Dock   HorizontalAlignment   (スタイル)         ...
⽐ 較表②Windowsフォーム XAML                    Adobe Flex     Android                                  絶対配置デフォルト              Ca...
Windowsフォーム 2.0から追加 FlowLayoutPanel、TableLayoutPanel、 SplitterPanel   機能的には、モダンなレイアウトシステムに    ⽐ べ て そ れ ほ ど 遜⾊ が な い   ...
階層化で重要となるのが UIをテキスト(XAML)として     編集できること デザイナー+ ドキュメントアウトライン  である程度のことは可能だが… 特に可視化されない領域への配置が困難                    43
※参考資料 今回紹介していないレイアウト機能    UniformGrid(WPFのみ)  DockPanel  Expanderコントロール  ViewBox  LayoutTransform
45
Upcoming SlideShare
Loading in …5
×

第6回中心会議 XAMLで学ぶ レイアウトスキル 0923

2,925 views
2,704 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,925
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

第6回中心会議 XAMLで学ぶ レイアウトスキル 0923

  1. 1. XAMLで学ぶ レイアウトスキル グレープシティ株式会社 ⼋ 巻 雄哉 blog: d.hatena.ne.jp/Yamaki/ Twitter: @yamaki00
  2. 2. アジェンダ なぜ今レイアウトスキル? 業務 ア プ リ 画 ⾯ に おける レイアウトの現状 レ イ ア ウ ト ⽅ 式 は ⼤ き く 分 け て 2つ XAMLを例に相対配置を学ぶ  配置する要素  配置される領域 サンプルで 学 ぶ 実 際の 使 い ⽅ XAML以外のUIフレームワーク 2
  3. 3. XAMLで学ぶレイアウトスキルなぜ今レイアウトスキル? 3
  4. 4. なぜ今レイアウトスキルなのか?画 ⾯ 解像 度 の 多 様 化  液晶ディスプレイの低価格化、ワイド化  ノートPCの普及(3台中2台がノート?)  PC以外のデバイスの登場  スマートフォン、タブレットPC/スレートPC 国際化⾼ DPI
  5. 5. 画 ⾯ 解像 度 の 多 様 化2006年7⽉ その他 Yuya Yamaki’s blog http://d.hatena.ne.jp/Yamaki/ 訪問 者 に お け る 画 ⾯ 解像 度 の 内 訳 1680x1050 1400x1050 1280x1024 , 1600x1200 41.08% 1024x768 , 29.55%
  6. 6. 画 ⾯ 解像 度 の 多 様 化2011年7⽉ Yuya Yamaki’s blog http://d.hatena.ne.jp/Yamaki/ 訪問 者 に お け る 画 ⾯ 解像 度 の 内 訳 1600x900 その他 1600x1200 1280x1024 , 1440x900 28.08% 1366x768 1920x1080 1024x768 , 6.57% 1920x12001280x800 1680x1050
  7. 7. 画 ⾯ 解像度⽐ 較 解像度⽐ 1024×768 1280×1024 1920×1080
  8. 8. 画 ⾯ の向 き 8
  9. 9. これじゃちょっとカッコ悪い 9
  10. 10. Windows 8 10
  11. 11. Windows 8 11
  12. 12. XAMLで学ぶレイアウトスキル業務ア プ リ 画 ⾯ に お け る レイアウトの現状 12
  13. 13. 業務アプリケーションの現状  ウィンドウサイズの固定768ピクセル 最 ⼤化 / 最 ⼩ 化 ボ タ ン は ⾮ 表⽰ 1024ピクセル
  14. 14. 固定サイズ(リサイズしない)固定サイズ(リサイズしない) リサイズできないようにする Windowsフォームの場合 this.MaximizeBox = false; this.FormBorderStyle = FormBorderStyle.FixedSingle; 14
  15. 15. 絶対配置のリサイズ対応 リサイズ時に各コントロールの 位 置 、 ⼤ き さ を 動 的 に 調整 VB6  フォームのリサイズイベントでコントロール の 位置 や ⼤ きさ を 変 更 Windowsフォーム  Anchorプロパティ、Dockプロパティ 15
  16. 16. XAMLで学ぶレイアウトスキルレ イ ア ウ ト ⽅ 式 は ⼤ きく 分 け て 2つ 16
  17. 17. 絶対配置と相対配置 絶対配置  位 置 や ⼤ き さ が 直 接 指 定 されて決まる 相対配置(動的配置)  周りの要素とそれらとの関係で 位置 や ⼤ きさ が 決 まるさ ま ざ ま な 画 ⾯ 解像 度 に 対応 す る た め に は 、 を 採 ⽤ す る 必 要が あ る 17
  18. 18. 相対配置におけるリサイズへの対応相対配置におけるリサイズへの対応 相対配置であること リサイズに対応している モダンなUIフレームワークは 相対配置が基本  XAML(WPF、Silverlight、Windows Phone 7)、 Adobe Flex、Android 18
  19. 19. XAMLで学ぶレイアウトスキルXAMLを例に相対配置を学ぶ 19
  20. 20. 配置する要素と配置される領域 配置する要素 配置される領域 が持つ属性 が持つ属性VerticalAlignment:Center 4⾏ 5列のGridMargin:10 2⾏ 2列 ⽬ の 領域 の ⼤ き さMaxWidth:200 配置要素に合わせて可変 20
  21. 21. 配置する要素 最終的な位置(X座標、Y座標)と⼤ きさ ( 幅 、 ⾼ さ ) の 決 定 に影響する3つの属性 ① VerticalAlignmentプロパティ、 HorizontalAlignmentプロパティ ② Marginプロパティ ③ コ ン ト ロ ー ル ⾃ ⾝ の ⼤ きさ 21
  22. 22. ※参考資料 VerticalAlignmentプロパティ  Top、Center、Bottom、Stretch HorizontalAlignmentプロパティ  Left、Center、Right、Stretch Marginプロパティ  Thickness構造体  Left、Top、Right、Bottom 22
  23. 23. ※参考資料 Widthプロパティ、Heightプロパティ  ピクセル、Auto(Double.Nan) MaxWidthプロパティ、MinWidthプロパ ティ、MaxHeightプロパティ、MinHeight プロパティ  ピクセル、Double.PositiveInfinity 23
  24. 24. 配置される領域 Grid  列と ⾏ で 構 成 さ れ る 格 ⼦ 状 の 領域 を 定 義 して 配置 StackPanel  ⽔ 平 ⽅ 向 ま た は 垂 直 ⽅ 向 に 並 べ て 配置 WrapPanel  基本的な動きはStackPanel  領域の端まで⾏ っ た 場 合 に 折 り 返して 表⽰ 24
  25. 25. ※参考資料 Grid  ColumnDefinitionsプロパティ(列を定義)  ColumnDefinitionクラス  Widthプロパティ(列幅を指定)  RowDefinitionsプ ロ パ テ ィ ( ⾏ を 定 義 )  RowDefinitionクラス  Heightプ ロ パ テ ィ ( ⾏ の ⾼ さ を 指 定 )  Width、Height共にGridLength型
  26. 26. ※参考資料 GridLength構造体  3つのモード(GridUnitTypeプロパティ)  Auto 配置された要素に必要なサイズ  Pixel ピクセルで指定する絶対値  Star 全 体 の ⼤ き さ に 対す る ⽐ 率 26
  27. 27. ※参考資料 配置要素に対する添付プロパティ  Column  Grid内 の ど の 列 に 表⽰ す る か ( ゼ ロ オ リ ジ ン )  ColumnSpan  Grid内 の い く つ の 列 に ま た が っ て 表⽰ す る か  Row  Grid内 の ど の ⾏ に 表⽰ す る か ( ゼ ロ オ リ ジ ン )  RowSpan  Grid内 の い く つ の ⾏ に ま た が っ て 表⽰ す る か
  28. 28. ※参考資料 GridSplitter  ShowsPreviewプロパティ  ドロップ時に実際のサイズを変更するかどうか 以下のプロパティはWPFのみ ( こ れ ら の プ ロ パ テ ィ が な く て も ⽀障は ほ と ん ど な い )  ResizeDirectionプロパティ  Auto、Columns、Rows  ResizeBehaviorプロパティ  BasedOnAlignment、CurrentAndNext、 PreviousAndCurrent、PreviousAndNext 28
  29. 29. ※参考資料 StackPanel  Orientationプロパティ ⼦ 要素 が 配置 さ れ る ⽅ 向 ( ⽔ 平 か 垂 直 )⼦ 要素 の VerticalAlignmentプロパティ  OrientationがVerticalの時は無効⼦ 要素 の HorizontalAlignmentプロパティ  OrientationがHorizontalの時は無効
  30. 30. ※参考資料 WrapPanel(WPFのみ)  Orientationプロパティ ⼦ 要素 が 配置 さ れ る ⽅ 向 ( ⽔ 平 か 垂 直 )  ItemWidthプロパティ  1⼦ 要素 の 配置 領域 の 幅  ItemHeightプロパティ  1⼦ 要素 の 配置 領域 の ⾼ さ
  31. 31. XAMLで学ぶレイアウトスキルサ ン プ ル で 学 ぶ 実 際の 使 い ⽅ 31
  32. 32. 32
  33. 33. 33
  34. 34. 34
  35. 35. WrapPanelAuto GridSplitter 35
  36. 36. なぜ階層化する必要があるのか⽬ 的 や 役 割 ごとに 領域をパネルとして分けたい  ⼀ 般的 に 、 リ サ イ ズ 処 理 は 領域 単 位 で 異 な る  耐変更性に優れている 36
  37. 37. 37
  38. 38. 「1 Star」から「Auto」に変更 「Auto」から 「1 Star」に変更 38
  39. 39. XAMLで学ぶレイアウトスキルXAML以外のUIフレームワーク 39
  40. 40. ⽐ 較表①Windowsフォーム XAML Adobe Flex AndroidAnchor、Dock HorizontalAlignment (スタイル) (コンテナ側) left、right、 gravity horizontalCenterAnchor、Dock VerticalAlignment (スタイル) (コンテナ側) top、bottom、 gravity、 verticalCenter baselineAlignedMargin Margin (コンテナ側) layout_marginBottom、 paddingBottom、 layout_marginBottom、 paddingLeft、 layout_marginBottom、 paddingRight、 layout_marginBottom paddingTopWidth Width width、percentWidth layout_widthHeight Height height、percentHeight layout_heightMaximumSize MaxWidth、MaxHeight maxWidth、maxHeight maxWidth、maxHeightMinimumSize MinWidth、MinHeight minWidth、minHeight minWidth、minHeight ※ Adobe FlexとAndroidに関してはドキュメントで確認した 程度の情報のため、かなりあやしいです。ご注意ください。
  41. 41. ⽐ 較表②Windowsフォーム XAML Adobe Flex Android 絶対配置デフォルト Canvas Canvas AbsoluteLayout ( ⾮ 推 奨) 相対配置FlowLayoutPanel StackPanel Box LinearLayoutTableLayoutPanel Grid Grid TableLayoutSplitterPanel GridSplitter HDividedBox、 - VDividedBoxFlowLayoutPanel WrapPanel Tile -Dockプロパティ DockPanel - - - - RelativeLayout ※ Adobe FlexとAndroidに関してはドキュメントで確認した 程度の情報のため、かなりあやしいです。ご注意ください。
  42. 42. Windowsフォーム 2.0から追加 FlowLayoutPanel、TableLayoutPanel、 SplitterPanel  機能的には、モダンなレイアウトシステムに ⽐ べ て そ れ ほ ど 遜⾊ が な い  デザイナー以外で レイアウトを変更できないことが問題 相対レイアウトの場合、 階層化は避けられない 42
  43. 43. 階層化で重要となるのが UIをテキスト(XAML)として 編集できること デザイナー+ ドキュメントアウトライン である程度のことは可能だが… 特に可視化されない領域への配置が困難 43
  44. 44. ※参考資料 今回紹介していないレイアウト機能  UniformGrid(WPFのみ)  DockPanel  Expanderコントロール  ViewBox  LayoutTransform
  45. 45. 45

×