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