【转】wpf从我炫系列2----布局控件的使用(下)
4.????????GRID控件
Grid控件可以是說是wpf中功能最強大和使用最多的控件。它有點類似于HMTL網(wǎng)頁布局中的表格，可以自定義行列顯示，并可以合并某些行和列.
使用<Grid.RowDefinitions>可以定義GRID中的行數(shù)，
使用<Grid.ColumnDefinitions>可以定義Grid中的列數(shù)
GRID控件的ShowGridLines="True"屬性可以控制在運行時是否顯示網(wǎng)格
下面定義了一個三行兩列的網(wǎng)格，效果圖如下
?
?
代碼
<Window?x:Class="WpfPanel.GridPanelOne"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="GridPanelOne"?Height="300"?Width="300">
????<Grid?ShowGridLines="True">
????????<Grid.RowDefinitions>
????????????<RowDefinition></RowDefinition>
????????????<RowDefinition></RowDefinition>
????????????<RowDefinition></RowDefinition>
????????</Grid.RowDefinitions>
????????<Grid.ColumnDefinitions>
????????????<ColumnDefinition></ColumnDefinition>
????????????<ColumnDefinition></ColumnDefinition>
????????</Grid.ColumnDefinitions>
??????
???????
????</Grid>
</Window>
?
用戶可以自定義行列的尺寸，包括行列的寬高，縮放比例.用三種定義方法。
絕對尺寸：使用精確的設備無關單位的大小，指定一個精確的數(shù)字來指定寬高。
自動內(nèi)容尺寸：這種設置方法根據(jù)每個單元格里面的內(nèi)容而自動設定，通常用AUTO來進行設置
按比例分配剩余空間:這個是默認設置，有點類似于HTML表格中的百分比形式，通常使用*星號，來分配剩余空間.
使用Grid.Row和Grid.Column可以定義控件所在的行和列，GRID控件中行列索引默認都是從0開始的
效果圖
?
?
代碼
<Window?x:Class="WpfPanel.GridPanelOne"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="GridPanelOne"?Height="300"?Width="300">
????<Grid?ShowGridLines="True">
????????<Grid.RowDefinitions>
????????????<RowDefinition?Height="54*" ></RowDefinition>
????????????<RowDefinition?Height="120*"></RowDefinition>
????????????<RowDefinition?Height="87*"></RowDefinition>
????????</Grid.RowDefinitions>
????????<Grid.ColumnDefinitions>
????????????<ColumnDefinition?Width="100"></ColumnDefinition>
????????????<ColumnDefinition?Width="Auto"></ColumnDefinition>
??????????
????????</Grid.ColumnDefinitions>
????????<Label?Content="姓?名?"?Name="label1"??/>
????????<Label?Content="年¨o齡￠?"?Grid.Row="1"??Name="label2"/>
????????<Label?Content="地ì?址?¤"?Grid.Row="2"??Name="label3" />
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox1"?Text="張?三¨y" />
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox2"??Grid.Row="1"??Text="24"/>
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox3"??Grid.Row="2"?Text="北à?à京?市oD海?ê淀ì¨a區(qū)?清?華a大?¨?學?ì南?門?成¨|府?路?¤" />
????</Grid>
</Window>
?
用戶也可以使用Grid.ColumnSpan和Grid.RowSpan=""來合并多行或者多列，設計自定義的布局顯示方式。
效果圖
?
代碼
<Window?x:Class="WpfPanel.GridPanelOne"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="GridPanelOne"?Height="300"?Width="300">
????<Grid?ShowGridLines="False">
????????<Grid.RowDefinitions>
????????????<RowDefinition?Height="54*" ></RowDefinition>
????????????<RowDefinition?Height="120*"></RowDefinition>
????????????<RowDefinition?Height="7"></RowDefinition>
????????????<RowDefinition?Height="40"></RowDefinition>
????????</Grid.RowDefinitions>
????????<Grid.ColumnDefinitions>
????????????<ColumnDefinition?Width="100"></ColumnDefinition>
????????????<ColumnDefinition?Width="Auto"></ColumnDefinition>
??????????
????????</Grid.ColumnDefinitions>
????????<Label?Content="姓?名?"?Name="label1"??/>
????????<Label?Content="年¨o齡￠?"?Grid.Row="1"??Name="label2"/>
????????<Label?Content="地ì?址?¤"?Grid.Row="3"??Name="label3" />
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox1"?Text="張?三¨y"??/>
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox2"??Grid.Row="1"??Text="24"/>
????????<TextBox?Grid.Column="1"?Height="23"?Name="textBox3"??Grid.Row="3"?Text="北à?à京?市oD海?ê淀ì¨a區(qū)?清?華a大?¨?學?ì南?門?成¨|府?路?¤" />
????????<Rectangle?Fill="Black"?Grid.Row="2"?Grid.ColumnSpan="2"></Rectangle>
????</Grid>
</Window>
?
以編程方式創(chuàng)建GRID
前面我們創(chuàng)建的GRID控件，都是以XAML標記代碼實現(xiàn)的，現(xiàn)在我們在后臺以編程方式來創(chuàng)建一個GRID。
我們來創(chuàng)建一個兩行兩列的GRID,代碼如下
??public?partial?class?Grid2?:?Window
????{
????????public?Grid2()
????????{
????????????InitializeComponent();
????????????this.Content = CreateGrid();
????????}
????????//創(chuàng)???建?§一°?個?兩￠?行D兩￠?列￠D的ì?GRID
????????public?Grid?CreateGrid()
????????{
????????????Grid?grid =?new?Grid();//實o|ì例¤y化?￥一°?個?GRID對?象¨?
????????????grid.ShowGridLines =?true;
????????????RowDefinition?rowOne =?new?RowDefinition();//定?§義°?第ì¨2一°?行D
????????????rowOne.Height =?new?GridLength(1,?GridUnitType.Star);//設|¨¨置?第ì¨2一°?行D的ì?高?度¨¨，ê?并?é以°?*設|¨¨置?高?度¨¨尺?寸??方¤?式o?
????????????grid.RowDefinitions.Add(rowOne);
?
????????????RowDefinition?rowTwo =?new?RowDefinition();//定?§義°?第ì¨2二t行D
????????????rowTwo.Height =?GridLength.Auto;
????????????grid.RowDefinitions.Add(rowTwo);
?
????????????ColumnDefinition?colOne =?new?ColumnDefinition();
????????????colOne.Width =?GridLength.Auto;
????????????grid.ColumnDefinitions.Add(colOne);
?
????????????ColumnDefinition?colTwo =?new?ColumnDefinition();
????????????colTwo.Width =?new?GridLength(230);
????????????grid.ColumnDefinitions.Add(colTwo);
?
????????????Label?lbname =?new?Label();
????????????lbname.Content =?"姓?名?";
????????????Grid.SetRow(lbname, 0);
????????????Grid.SetColumn(lbname, 0);
????????????grid.Children.Add(lbname);
?
????????????Label?lbAddress =?new?Label();
????????????lbAddress.Content =?"地ì?址?¤";
????????????Grid.SetRow(lbAddress, 1);
????????????Grid.SetColumn(lbAddress, 0);
????????????grid.Children.Add(lbAddress);
?
????????????TextBox?tbName =?new?TextBox();
????????????tbName.Text =?"張?三¨y";
????????????tbName.Width = 150;
????????????Grid.SetRow(tbName, 0);
????????????Grid.SetColumn(tbName, 1);
????????????grid.Children.Add(tbName);
?
????????????TextBox?tbAddress =?new?TextBox();
????????????tbAddress.Text =?"北à?à京?市oD海?ê淀ì¨a區(qū)?";
????????????tbAddress.Width = 200;
????????????Grid.SetColumn(tbAddress, 1);
????????????Grid.SetRow(tbAddress, 1);
????????????grid.Children.Add(tbAddress);
?
?
???????????????
????????????return?grid;
?
???????
????????}
????}
?
窗體分割
在grid中，可以使用窗體分割條工具GridSpliter工具來手動調(diào)整GRID中行和列的大小.使用GRIDSPLITER工具要注意以下幾點
指定gridspliter的HorizontalAlignment和VerticalAlignment屬性可以設置分割條拖動方向為垂直或水平拉動。
通常建議把GRIDSPLITER放在一個單獨單元格中顯示。
效果圖
?
XMAL代碼
<Window?x:Class="WpfPanel.Grid3"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="Grid3"?Height="379"?Width="419">
????<Grid>
????????<Grid.RowDefinitions>
????????????<RowDefinition></RowDefinition>
????????????<RowDefinition?Height="Auto"></RowDefinition>
????????????<RowDefinition></RowDefinition>
?????????
????????</Grid.RowDefinitions>
????????<Grid.ColumnDefinitions>
????????????<ColumnDefinition/>
????????????<ColumnDefinition?Width="Auto" />
????????????<ColumnDefinition?/>
????????</Grid.ColumnDefinitions>
????????<Rectangle?Fill="Beige"></Rectangle>
??????????<GridSplitter?Background="AliceBlue"?Grid.Row="1"?VerticalAlignment="Center"?HorizontalAlignment="Stretch"?Height="8"?Grid.ColumnSpan="3"></GridSplitter>
????????????<Rectangle?Fill="Black"?Grid.Row="2"></Rectangle>
????????<Rectangle?Fill="BlueViolet"?Grid.Column="2"></Rectangle>
????????<Rectangle?Fill="DarkGreen"?Grid.Row="2"?Grid.Column="2"></Rectangle>
???????
????????<GridSplitter?Background="Coral"?Grid.Column="1"?Width="8"?HorizontalAlignment="Center"?Grid.RowSpan="3"></GridSplitter>
????</Grid>
</Window>
?
共享尺寸組
??共享尺寸組就是讓多個Grid具有一致的行列尺寸外觀。
??使用Grid.IsSharedSizeScope屬性可以為共享尺寸組設置一個共享范圍。
??使用SharedSizeGroup可以為共享尺寸組指定一個名稱。
??下面這個DEMO中，為第一個GRID中的矩形指定一個寬高，第二個GRID中的矩形不指定寬高，通過設置一個共享尺寸組來使兩個GRID中的行列相同.
效果圖
?
?
代碼
?
XMAL代碼
<Window?x:Class="WpfPanel.Grid4"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="Grid4"?Height="380"?Width="463">
????<DockPanel??Name="dockPanel1"?Grid.IsSharedSizeScope="False">
????????<StackPanel?Orientation="Horizontal"?DockPanel.Dock="Top">
????????????<Button?Content="設|¨¨置?共2享¨a尺?寸??組á¨|"?Height="23"?Name="button1"?Click="button1_Click" />
????????????<Button?Content="取¨?消?共2享¨a尺?寸??組á¨|"?Height="23"?Name="button2"?Click="button2_Click" />
????????</StackPanel>
????????<StackPanel?Orientation="Horizontal"?DockPanel.Dock="Top">
????????????<Grid?Margin="10">
????????????????<Grid.RowDefinitions>
????????????????????<RowDefinition?SharedSizeGroup="firstrow"></RowDefinition>
????????????????</Grid.RowDefinitions>
????????????????<Grid.ColumnDefinitions>
????????????????????<ColumnDefinition?SharedSizeGroup="fisrtColumn"></ColumnDefinition>
????????????????????<ColumnDefinition?SharedSizeGroup="secondColumn"></ColumnDefinition>
????????????????</Grid.ColumnDefinitions>
????????????????<Rectangle?Fill="Beige"??Width="70"?Height="50">
???????????????????
????????????????</Rectangle>
????????????????<Rectangle?Fill="Azure"?Grid.Column="1"??Width="70"?Height="50"></Rectangle>
????????????</Grid>
???????????
????????????<Grid?Margin="20">
????????????????<Grid.RowDefinitions>
????????????????????<RowDefinition?SharedSizeGroup="firstrow"></RowDefinition>
????????????????</Grid.RowDefinitions>
????????????????<Grid.ColumnDefinitions>
????????????????????<ColumnDefinition?SharedSizeGroup="fisrtColumn"></ColumnDefinition>
????????????????????<ColumnDefinition?SharedSizeGroup="secondColumn"></ColumnDefinition>
????????????????</Grid.ColumnDefinitions>
????????????????<Rectangle?Fill="Red"??></Rectangle>
????????????????<Rectangle?Fill="Crimson"?Grid.Column="1" ></Rectangle>
????????????</Grid>
????????</StackPanel>
???????
????</DockPanel>
</Window>
?
后臺xmal.cs代碼
private?void?button1_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????//設|¨¨置?共2享¨a尺?寸??組á¨|
????????????Grid.SetIsSharedSizeScope(dockPanel1,?true);
????????}
?
????????private?void?button2_Click(object?sender,?RoutedEventArgs?e)
????????{
????????????//取¨?消?共2享¨a尺?寸??組á¨|設|¨¨置?
????????????Grid.SetIsSharedSizeScope(dockPanel1,?false);
????????}
?
5.???????UniformGrid均布網(wǎng)格
UniformGrid控件是一個標準的表格控件，可以說是一個簡化的GRID控件，其中所有的單元格都有相同的尺寸，只要設置行數(shù)和列數(shù)即可.通過設置Rows和?Columns屬性可以設置行數(shù)和列數(shù).
?
效果圖
UniformGrid
代碼
<Window?x:Class="WpfPanel.UniformPanel"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="UniformPanel"?Height="300"?Width="300">
????<UniformGrid?Rows="3"?Columns="2">
????????<Label?Background="Aqua">中D國¨2</Label>
????????<Label?Background="Azure">美¨¤國¨2</Label>
????????<Label?Background="Brown">俄¨a羅T斯1</Label>
????????<Label?Background="Cyan">日¨?本à?</Label>
????</UniformGrid>
</Window>
6.Canvas面板
??Canvas畫布面板，可以控制其內(nèi)部元素的精確定位，類似于傳統(tǒng)WINFORM的布局方式，可以使用像素單位來精確布局，在其布局元素可以任意拖動元素來設置元素位置。
可以通過設置Canvas.Left,?Canvas.Top, Canvas.Bottom,Canvas.Right屬性來具體設置元素的位置。
效果圖
canvas
代碼
<Window?x:Class="WpfPanel.CanvasPanel"
????????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
????????Title="CanvasPanel"?Height="251"?Width="268">
????<Canvas??Name="canvas1">
????????<Label?Canvas.Left="12"?Canvas.Top="27"?Content="姓?名?:"?Height="28"?Name="label1" />
????????<TextBox?Canvas.Left="72"?Canvas.Top="27"?Height="23"?Name="textBox1"?Width="157" />
????????<Label?Canvas.Left="12"?Canvas.Top="79"?Content="年¨o齡￠?"?Height="28"?Name="label2" />
????????<TextBox?Canvas.Left="72"?Canvas.Top="79"?Height="23"?Name="textBox2"?Width="157" />
????</Canvas>
</Window>
?
如果Canvas內(nèi)部的元素位于同一個坐標點，將會出現(xiàn)重疊現(xiàn)象，可以通過設置Canvas.Zindex屬性，來指定Z軸的排列順序。元素的Canvas.Zindex值越大，顯示的位置越靠前.
?
關于WPF中布局面板的簡單使用，就寫到這里，希望這對學習WPF的朋友有所幫助，歡迎大家提出自己的寶貴意見。
?
總結(jié)
以上是生活随笔為你收集整理的【转】wpf从我炫系列2----布局控件的使用(下)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AMD工程师神优化：几行代码让Zen处理
- 下一篇： 【转】WebService WSDL结构