4. GRID控件
Grid控件可以是说是wpf中功能最强大和使用最多的控件。它有点类似于HMTL网页布局中的表格,可以自定义行列显示,并可以合并某些行和列.
使用<Grid.RowDefinitions>可以定义GRID中的行数,
使用<Grid.ColumnDefinitions>可以定义Grid中的列数
GRID控件的ShowGridLines="True"属性可以控制在运行时是否显示网格
下面定义了一个三行两列的网格,效果图如下
代码
<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>
用户可以自定义行列的尺寸,包括行列的宽高,缩放比例.用三种定义方法。
绝对尺寸:使用精确的设备无关单位的大小,指定一个精确的数字来指定宽高。
自动内容尺寸:这种设置方法根据每个单元格里面的内容而自动设定,通常用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="年¨º龄¢?" 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="北À¡À京?市ºD海¡ê淀̨ª区?清?华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="年¨º龄¢?" 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="北À¡À京?市ºD海¡ê淀̨ª区?清?华a大䨮学¡ì南?门?成¨¦府?路¡¤" />
<Rectangle Fill="Black" Grid.Row="2" Grid.ColumnSpan="2"></Rectangle>
</Grid>
</Window>
以编程方式创建GRID
前面我们创建的GRID控件,都是以XAML标记代码实现的,现在我们在后台以编程方式来创建一个GRID。
我们来创建一个两行两列的GRID,代码如下
public partial class Grid2 : Window
{
public Grid2()
{
InitializeComponent();
this.Content = CreateGrid();
}
//创ä¡ä建¡§一°?个?两¢?行D两¢?列¢D的Ì?GRID
public Grid CreateGrid()
{
Grid grid = new Grid();//实º¦Ì例¤y化¡¥一°?个?GRID对?象¨®
grid.ShowGridLines = true;
RowDefinition rowOne = new RowDefinition();//定¡§义°?第̨²一°?行D
rowOne.Height = new GridLength(1, GridUnitType.Star);//设¦¨¨置?第̨²一°?行D的Ì?高?度¨¨,ê?并¡é以°?*设¦¨¨置?高?度¨¨尺?寸ä?方¤?式º?
grid.RowDefinitions.Add(rowOne);
RowDefinition rowTwo = new RowDefinition();//定¡§义°?第̨²二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 = "北À¡À京?市ºD海¡ê淀̨ª区?";
tbAddress.Width = 200;
Grid.SetColumn(tbAddress, 1);
Grid.SetRow(tbAddress, 1);
grid.Children.Add(tbAddress);
return grid;
}
}
窗体分割
在grid中,可以使用窗体分割条工具GridSpliter工具来手动调整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享¨ª尺?寸ä?组Á¨¦" Height="23" Name="button1" Click="button1_Click" />
<Button Content="取¨?消?共2享¨ª尺?寸ä?组Á¨¦" 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享¨ª尺?寸ä?组Á¨¦
Grid.SetIsSharedSizeScope(dockPanel1, true);
}
private void button2_Click(object sender, RoutedEventArgs e)
{
//取¨?消?共2享¨ª尺?寸ä?组Á¨¦设¦¨¨置?
Grid.SetIsSharedSizeScope(dockPanel1, false);
}
5. UniformGrid均布网格
UniformGrid控件是一个标准的表格控件,可以说是一个简化的GRID控件,其中所有的单元格都有相同的尺寸,只要设置行数和列数即可.通过设置Rows和 Columns属性可以设置行数和列数.
效果图
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国¨²</Label>
<Label Background="Azure">美¨¤国¨²</Label>
<Label Background="Brown">俄¨ª罗T斯1</Label>
<Label Background="Cyan">日¨?本À?</Label>
</UniformGrid>
</Window>
6.Canvas面板
Canvas画布面板,可以控制其内部元素的精确定位,类似于传统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="年¨º龄¢?" Height="28" Name="label2" />
<TextBox Canvas.Left="72" Canvas.Top="79" Height="23" Name="textBox2" Width="157" />
</Canvas>
</Window>
如果Canvas内部的元素位于同一个坐标点,将会出现重叠现象,可以通过设置Canvas.Zindex属性,来指定Z轴的排列顺序。元素的Canvas.Zindex值越大,显示的位置越靠前.
关于WPF中布局面板的简单使用,就写到这里,希望这对学习WPF的朋友有所帮助,欢迎大家提出自己的宝贵意见。