面板类控件直接和程序的布局有关,除了布局之外,面板类控件还起到了WinForm中容器的作用,就像是将一些控件放到一个面板中,达到组织管理的目的,这也是面板类控件的一个常用的功能。
面板类控件一共有5类:
Grid、Canvas、StackPanel、WrapPanel、Border
Grid
Grid控件用来布局,他的作用就相当于ASP.NET中的table的作用,使用它,可以创建n行n列,在每一个单元格中进行控件的布局,Grid的行和列一般是不会显示的,但也可以使用属性ShowGridLines来使其显示。
在我们创建一个项目的时候,MainPage.xaml中系统就为我们默认的使用了Grid,如一个名为“LayoutRoot”的<Grid x:Name="LayoutRoot"></Grid>的Grid控件,它是用来放置页面中所有控件的基础Grid。在它之中,存在一个StackPanel控件用来存放程序名和标题,除此之外还存在一个名为“ContentPanel”的<Grid x:Name="ContentPanel"></Grid>,用来程序员自定义其他控件。我们可以为Grid定义行和列,<Grid.RowDefinition>,列的定义为<Grid.ColumnDefination> 。
至于行列的创建方式:
一种是直接在属性设计器中的ColumnDefinitions或者RowDefinitions属性中直接编辑,编辑的时候有三个属性可以设置,MinWidth属性设置最小尺寸,一般为默认值0,MaxWidth属性设置最大尺寸,一般为默认值Infinity(无穷大)。而我们需要关心的是Width属性,这就是我们在视图中关心的,设置方式如下。
另一种就是我们可以书写<Grid.RowDefinition>与<Grid.ColumnDefination>的标签并在其中设置属性。至于属性,RowDefinition的属性是Height,而ColumnDefinition的属性是Width,这些属性的书写有三种方式,以Height为例:Height="200"、Height="Auto"、Height="*",含义分别为:行(列)按照给定的尺寸设置、行列按照内容的实际尺寸设置(其实就是我们自己拉伸尺寸的值)、行(列)按照剩余的可用空间来分配。
假设现在我们设置了3行3列的Grid,如果想要把Button放在2行3列,那么在Button中可以这样写<Button Grid.Row="1" Grid.Column="2"/>,这样就行了(在这里行列均是从零开始)。
<!--ContentPanel - 在此处放置其他内容--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <StackPanel Name="stackPanel00" Grid.Row="0" Grid.Column="0"/> <StackPanel Name="stackPanel01" Grid.Row="0" Grid.Column="1"/> <StackPanel Name="stackPanel02" Grid.Row="0" Grid.Column="2"/> <StackPanel Name="stackPanel10" Grid.Row="1" Grid.Column="0"/> <StackPanel Name="stackPanel11" Grid.Row="1" Grid.Column="1"/> <StackPanel Name="stackPanel12" Grid.Row="1" Grid.Column="2"/> <StackPanel Name="stackPanel20" Grid.Row="2" Grid.Column="0"/> <StackPanel Name="stackPanel21" Grid.Row="2" Grid.Column="1"/> <StackPanel Name="stackPanel22" Grid.Row="2" Grid.Column="2"/> </Grid>
在后台中,首先定义一个随机数实例,生成颜色Color随机的ARGB值,定义委托,实现后台线程与UI线程的交互,再定义字符串数组变量,用来解析StackPanel的名字,
Random myRandom = new Random(); private bool flag = true; delegate void MyDelegate(string s); MyDelegate myDelegate; string[] myStr = {"00","01","02","10","11","12","20","21","22" };
定义页面读取事件用来创建线程,
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { for (int i = 0; i < myStr.Length ; i++) { Thread myThread = new Thread(new ParameterizedThreadStart(Change)); myThread.Name = ""; myThread.IsBackground = true;//设置为后台运行的线程 myThread.Start(myStr[i]);//线程启动 } }
书写后台线程与UI线程的交互
private void Change(object s) { while (true) { myDelegate = ChangeUIChecked;//委托 this.Dispatcher.BeginInvoke(myDelegate,s); Thread.Sleep((int)(0.5 * 1000));//休眠,模仿规定时间间隔 } } private void ChangeUIChecked(object s) { SolidColorBrush myBrush = new SolidColorBrush(); Color myColor = new Color(); myColor.A = (Byte)myRandom.Next(0, 256); myColor.R= (Byte)myRandom.Next(0, 256); myColor.G = (Byte)myRandom.Next(0, 256); myColor.B = (Byte)myRandom.Next(0, 256); myBrush.Color = myColor; //((StackPanel)(ContentPanel.FindName("stackPanel" + s.ToString()))).Background = myBrush ; ((System.Windows.Controls.StackPanel)(ContentPanel.FindName("stackPanel" + s.ToString()))).Background = myBrush; }
在运行的时候就是每隔0.5秒颜色随机变化。
StackPanel例子
新建一个页面,叫做“StackPanel.xaml”。使用后台代码随机生成多个TextBlock来放置在StackPanel中,并查看布局情况。