【概要】
該系列文章主要描述,新手如何快速上手做wpf開發。看過網上部分的教程,主要講述的是介紹控件。這并沒有問題,但是沒有把自己的使用經驗也完整的描述出來。
是以特此編寫此系列文章希望能幫助到,因為一些工作原因或想入門的朋友們。如有學習過程中想交流學習、疑惑解答可以來此QQ群交流:580749909。
希望加群的人提問時盡量想清楚自己的問題,願意鑽研而不是等現成的答案而不去思考。祝各位同仁早日學會WPF這項技術。
【布局控件介紹】
Gird --
新手的話建議第一個必須掌握的布局控件就是grid,能熟練使用它能應付大部分布局需求。
1.了解gird并不難,它其實就是一個表格。把你想要的控件指定到某一行的某一列,如果不指定則是預設在第一行的第一列。
接下示範一下,如何建立行和列
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
以上代碼建立了一個兩行兩列的grid,然後再看看如何把控件放置到布局中。
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Width="100" Height="25">1</Button>
<Button Grid.Column="1" Width="100" Height="25">2</Button>
<Button Grid.Row="1" Width="100" Height="25">3</Button>
<Button Grid.Row="1" Grid.Column="1" Width="100" Height="25">4</Button>
</Grid>

效果就是這樣了。預設不指定的Row或者Column都是0也就是第一個。如果單單講解這些就沒有達到我寫文章的效果了接下來講解拿到需求之後如何分析布局。接下來拿QQ登陸來舉例。
假設拿到這樣需求之後,主要布局結構用數字标記分為三行。
第一行,用來放關閉、最小化按鈕
第二行,用來放TIM圖檔,這時候有人會問了,那TIM這個背景圖檔明顯是把第一行也占了。這個問題很好有一個屬性可以解決叫跨行 Grid.RowSpan="2" 在圖檔上附加上這個屬性就能達到效果了。
舉一反三,跨列能應付跨列的需求。Grid.RowSpan="2"
第三行,這個行主要是放下頭像、文本框、密碼框、登陸按鈕、複選框、文字等控件的。那這一行如何布局呢這麼複雜。解決方案就是,在第三行裡再嵌套一個Grid然後在設定行列等。
這一塊留給大家自己分析考慮如果學會了做這個并不難。
StackPanel
繼續QQ登陸的圖接着講,這個控件可以用來實作第3行的内容。比如實作那文本框、密碼框的布局。
WrapPanel
這個控件呢,主要是讓控件自動的在一行裡,如果需要換行則規定好WrapPanel的布局控件的寬度,如果布局内容超出了這個寬度則會自動換行,應用于QQ登陸界面對應就是兩個複選框。這樣不需要指定任何屬性他們就自動的站到你想要的位置上了。
Canvas
這個控件需要拿出來單獨的講一講,它比較特殊。它屬于“任意布局”的一種概念,就是你拖控件到UI上的時候你把它放在哪裡它就在那裡了。接下來我示範一下
Canvas.Left="235" Canvas.Top="182" 這兩句主要描述了,button 在canvas控件中距離左側235px,距離頂部182px。
RenderTransformOrigin 這個屬性表示對象中心點 用來定義所有RenderTransform變換中相對位置的的參考點,預設為圖形的左上即(0,0),該屬性值為相對值,即x和y方向的(0-1)分别指以本圖形所在矩形(在Expression blend中可以看到 )的長和寬為參照的百分比。
具體數值不需要關心,因為你拖到地方系統會自動根據你最後放置的點給你自動生成。