• Save
第6回中心会議 XAMLで学ぶ レイアウトスキル 0923
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,493 views

 

Statistics

Views

Total Views
2,493
Views on SlideShare
2,492
Embed Views
1

Actions

Likes
1
Downloads
0
Comments
0

1 Embed 1

http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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