wpf第二章布局

1、布局與輸入1. 布局基礎(chǔ)a WPF提供了一套面板（Panel），它們是一系列具有特殊用途的用戶界面元素b StackPanel-棧面板 WrapPanel環(huán)繞模板 DockPanel停靠模板 Grid網(wǎng)格 Canvas 畫布 UniformGrid 均布網(wǎng)格c 以上描述了WPF中的主要面板類型，無論使用哪種面板，它們都遵循相同的基本規(guī)則：元素的位置通常是由包含它們的面板所定 2. 棧面板a 是一種非常簡潔的面板，它的作用是將所包含的元素按一行或一列的方式排列。通常不會(huì)用棧面板來布局整個(gè)用戶界面。它的最大用途就是排列一些比較小的元素，好比html里的ul無序列表WPF通過兩種方法來解決元素的布局

2、問題，該策略取決于可用空間大小是否固定。SizeToContent="Height"設(shè)置某個(gè)空間的大小是不是由內(nèi)容制定 相關(guān)的屬性還有margin 和 padding，這樣設(shè)置的控件都會(huì)通過窗體大小的變化而產(chǎn)生相應(yīng)的變化，該值與設(shè)備無關(guān)如果設(shè)置height 和 width則是固定大小3. DockPanela 為了滿足Dock的停靠要求必須在子控件上使用附加屬性。DockPanel.Dock4. WrapPanel環(huán)繞面板a 通過Orientation屬性設(shè)置排列的方向和棧面板類似不過環(huán)繞面板到最后的時(shí)候會(huì)自動(dòng)換行，很類似listview5. 畫布Canvasa 是面板中比

3、較簡單的一種b 類似html中的絕對(duì)定位后通過橫縱坐標(biāo)控制其位置（附加屬性Canvas.Left 和Canvas.Top Canvas.Right Canvas.Bottom）該值與設(shè)備無關(guān)6. InkCanvas允許畫筆的Canvas在WPF中實(shí)現(xiàn)允許使用墨跡的控件。如：1: <Window x:Class="WPFLayoutDemo.InkCanvasDemo"2: xmlns="3: xmlns:x="4: Title="InkCanvasDemo" Height="200" Width="

4、300">5: <InkCanvas>6: <InkCanvas.DefaultDrawingAttributes>7: <DrawingAttributes Color="Red" />8: InkCanvas.DefaultDrawingAttributes>9: <Image Width="155" Height="155" InkCanvas.Left="10" InkCanvas.Top="10" 10: Source=&

5、quot;Logo2.png"/>11: InkCanvas>12: Window>其他的功能與Canvas相近。7. Grid網(wǎng)格 a 網(wǎng)格是所有面板用最常用也最復(fù)雜的布局面板b 類似的是Html中的Table標(biāo)簽也有行，單元格，跨行，跨列之說c 思考：如上圖所示如何把里面的信息分成左右兩部分的？用棧面板可以實(shí)現(xiàn)么？d 嘗試下stackpanel的布局是否可以實(shí)現(xiàn)e 經(jīng)過上面的嘗試我們已經(jīng)可以看出stackpanel如果這么使用的話是非常蹩腳的。而且很低效f Grid網(wǎng)格面板就可以輕易解決（table不就很easy嘛）g 畫分割線的話可以弄個(gè)很窄的行填充一個(gè)矩形即

6、可h 加背景樣式可以用border控件可以使用GridSplit控件結(jié)合Grid控件實(shí)現(xiàn)類似于Windows應(yīng)用程序中SplitContainer的功能，如下面的應(yīng)用程序：要實(shí)現(xiàn)以下的功能： ButtonA和ButtonB、ButtonC組成的整體，可以左右拖動(dòng)，改變兩者的寬度 ButtonB和ButtonC可以上下拖動(dòng)，改變兩者的高度 實(shí)現(xiàn)以上功能的XAML代碼如下：1: <Grid>2: <Grid.ColumnDefinitions>3: <ColumnDefinition Width="88*" />4: <ColumnDe

7、finition Width="Auto" />5: <ColumnDefinition Width="190*" />6: Grid.ColumnDefinitions>7: <Grid.RowDefinitions>8: <RowDefinition Height="172*" />9: <RowDefinition Height="Auto" />10: <RowDefinition Height="90*" />11

8、: Grid.RowDefinitions>12: 13: <Button Content="ButtonA" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />14: <Button Content="ButtonB" Margin="3" Grid.Row="0" Grid.Column="2" />15: <

9、Button Content="ButtonC" Margin="3" Grid.Row="2" Grid.Column="2" />16: 17: <GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 18: Grid.Row="0" Grid.Column="1" Grid.RowSpan=&

10、quot;3"> GridSplitter>19: <GridSplitter Height="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 20: Grid.Row="1" Grid.Column="2"> GridSplitter>21: Grid>其核心想法為： 定義3*3的表格，其中放置分割線的列（下標(biāo)為1）和行（下標(biāo)為1）的寬度和高度設(shè)置為Auto ButtonA放置在Row=0、Column=0、RowSpan3的單元格中 ButtonB放置在Row=0、Column=2的單元格中 ButtonC放置在Row=2、Column=2的單元格中 豎直分割線放置在Row=0、Column=1、ColSpan3的單元格中 水平分割線放置在Row=1、Column=2的單元格中 如下圖所示：8. 均布Grid 聰明的grida 通過設(shè)置Rows和Columns即可甚至可以不設(shè)置9. ViewBox視圖框a S