01-先從外觀說起就對了!


0. 第一支Hello World程式

https://yuchungchuang.wordpress.com/2019/04/12/wpf-%e6%95%99%e5%ad%b8-0%ef%bc%9ahello-world/

0.1 介面

  • WPF的開發介面和Winform的真的很像,只是差在下面的XAML編輯區
  • 左邊是控件工具箱,右邊是方案總管,中上是介面預覽,中下是XAML編輯區
  • 雖然可以都用拖曳工具箱來新增控件,但有些功能還是要自己敲敲鍵盤寫XAML

1. 排版(Layout)

https://yuchungchuang.wordpress.com/2019/04/13/wpf-%e6%95%99%e5%ad%b8-1%ef%bc%9alayout/

1.1 概覽

  • WPF和Winform一個差超多的地方就是排版了
  • Winform:要自己控Location;WPF:很多Panel可用,響應式變得容易

1.2 排版控件

1.2.1 Grid

  • Grid透過定義RowDefinitions和ColumnDefinitions來安排版面中的網格
  • 內部的元素可以設定Grid.Row和Grid.Column屬性來設定該元素所在的網格
  • 寬度跟高度除了可以用數字表示之外,也可以用"auto"與星號表示。
  • "auto"代表網格大小會自動符合內部元素的大小,星號表示扣除其他格佔的空間

1.2.2 StackPanel

  • 將內部控件依Orientation屬性,照順序堆疊顯示

1.2.3 WrapPanel

  • 將內部控件依Orientation屬性,照順序堆疊顯示
  • 與StackPanel差別是,WrapPanel堆滿會換行(或列)

1.2.4 DockPanel

  • 將內部控件依DockPanel.Dock屬性,自動靠邊顯示

1.2.5 Canvas

  • 最像Winform
  • 將內部控件都是透過Canvas.Left, Canvas.Top屬性以絕對座標來定義位置

1.2.6 ViewBox

  • 若更動外框尺寸,裡面控件全都隨原本尺寸放大縮小

1.3 實用排版屬性

  • Margin:控件對外的邊界
  • Padding :控件內容的邊界
  • HorizontalAlignment:控件的水平對齊
  • VerticalAlignment:控件的垂直對齊
  • HorizontalContentAlignment:控件內容的水平對齊
  • VerticalContentAlignment:控件內容的垂直對齊
  • MinWidth, MaxWidth:控件的 最大\最小 寬度
  • MinHeight, MaxHeight:控件的 最大\最小 高度

1.4 切換頁面(Frame)

  • 在XAML定義Frame控件就可以顯示不同頁面!
  • Frame是透過Source來指定要顯示的頁面,在透過Code behind的Navigate()方法來切換頁面
  • 在Code behind中,是辨認XAML中Frame的Name屬性才能使用該控件

2. 風格與模板

待補

##WPF #UI #note







你可能感興趣的文章

[筆記]Linux 01 -語法介紹

[筆記]Linux 01 -語法介紹

【Day 1】Docker 基本概念

【Day 1】Docker 基本概念

讓 Code 乾淨的小技巧

讓 Code 乾淨的小技巧






留言討論