面板类控件

By | 04月18日
Advertisement

面板类控件直接和程序的布局有关,除了布局之外,面板类控件还起到了WinForm中容器的作用,就像是将一些控件放到一个面板中,达到组织管理的目的,这也是面板类控件的一个常用的功能。

面板类控件一共有5类:
Grid、Canvas、StackPanel、WrapPanel、Border

Grid

Grid控件用来布局,他的作用就相当于ASP.NET中的table的作用,使用它,可以创建n行n列,在每一个单元格中进行控件的布局,Grid的行和列一般是不会显示的,但也可以使用属性ShowGridLines来使其显示。

在我们创建一个项目的时候,MainPage.xaml中系统就为我们默认的使用了Grid,如一个名为“LayoutRoot”的的Grid控件,它是用来放置页面中所有控件的基础Grid。在它之中,存在 一个StackPanel控件用来存放程序名和标题,除此之外还存在一个名为“ContentPanel”的,用来程序员自定义其他控件。我们可以为Grid定义行和列,行的定义 为,列的定义为。

至于行列的创建方式:

  • 一种是直接在属性设计器中的ColumnDefinitions或 者RowDefinitions属性中直接编辑,编辑的时候有三个属性可以设置,MinWidth属性设置最小尺寸,一般为默认值0,MaxWidth属 性设置最大尺寸,一般为默认值Infinity(无穷大)。而我们需要关心的是Width属性,这就是我们在视图中关心的,设置方式如下。
  • 另一种就是我们可以书写与的标签并在其中设置属性。至于属性,RowDefinition的属性是Height,而ColumnDefinition的属性是Width,这些属性的书写有三种方式,以Height为例:Height="200"、Height="Auto"、Height="*",含义分别为:行(列)按照给定的尺寸设置、行列按照内容的实际尺寸设置(其实就是我们自己拉伸尺寸的值)、行(列)按照剩余的可用空间来分配。

假设现在我们设置了3行3列的Grid,如果想要把Button放在2行3列,那么在Button中可以这样写,这样就行了(在这里行列均是从零开始)。

Canvas

Canvas相当于是一行一列的Grid,用绝对坐标对放置其中的控件进行布局和管理。

这其实就是传统意义上的画布,在这个控件里头我们可以按照绝对坐标随意放置控件。我们可以在其中放置一些控件来生成自己的有特色的效果。比如说生成自己的一个对话框。但是由于绝对定位不考虑浏览器窗口的大小或浏览器大小调整,因此一般最好使用 Grid 或 StackPanel 作为容器。

StackPanel

StackPanel使用相对位置对控件进行管理。它使用的是流方式进行元素的布局,也就是说,我们不能随意改变StackPanel中的其他控件的位 置。这一点类似于Android中的线性布局。其实在我们Visual Studio中生成的项目中,“TitlePanel”就是使用StackPanel进行布局的。同时,类似于Android中线性布局时可以是纵向也可 以是横向,只要设置Orientation属性就行了, Orientation 属性的默认值为 Vertical。

StackPanel 中内容的 HorizontalAlignment 和 VerticalAlignment 默认值均为 Stretch。

注意:

StackPanel使用线性布局,通俗的意思就是只能在一条直线上对控件进行布局,如果控件的数量使得控件超出了StackPanel的显示范围,系统将会应用蒙版,我们只要理解为不能正常显示就行了,所以在布局的时候要考虑到这些因素。

WrapPanel

WrapPanel控件是toolkit中的一个控件,一般不在工具箱中显示,只要右键“选择项”,找到WrapPanel添加就会出现在工具箱中。这个 控件的使用和StackPanel控件类似,只是它的特性就像它的名字一样,布局中的控件若是超出了WrapPanel的范围,会自动Wrap,即换行, 这是比StackPanel特别的地方。

Border

Border为对象提供一个尺寸可变的边框。需要注意的是,包含在边框控件中的控件只能有一个元素。如果想包含多个元素,只需要使用其他容器控件将各种元素包含起来就行了。如StackPanel。

最后

所以操作面板类控件也可以在后台进行。可以指定 Border 的基本属性,方法是设置其 Width、Height、BorderThickness 以及 Background 颜色。 此外,您还可以通过设置 CornerRadius 属性以将边框的各角改为圆角,并且可以通过设置 Padding 属性以在 Border 中定位对象。

一个常识就是一般在xaml中看得到的控件或者属性都会有相应的类或属性与之对应。

下面就用一个简单例子页面来练习一下这些面板类控件的使用。

Grid例子

新建一个页面,叫做“Grid.xaml”。 在这个页面中设置三行三列的Grid表格,在每一个单元格中放置一个StackPanel,在后台代码中控制这些StackPanel的背景色,并使用线 程,每一个StackPanel设置一个后台线程,每隔0.5秒使每个StackPanel的背景色发生随机变化。所以布局为:

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 ) { 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中,并查看布局情况。

前台:

Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> StackPanel Height="230" HorizontalAlignment="Left" Margin="6,6,0,0" Name="stackPanelHorizontal" VerticalAlignment="Top" Width="440" Orientation="Horizontal"> StackPanel> StackPanel Height="230" HorizontalAlignment="Left" Margin="6,340,0,0" Name="stackPanelVertical" VerticalAlignment="Top" Width="440" Orientation="Vertical"> StackPanel>

后台:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { for (int i = 1; i 10; i++) { Random myRandom = new Random(); TextBlock can = new TextBlock(); can.Text = "我"; can.Width = 44; can.Height = 23; 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; can.Foreground = myBrush; this.stackPanelHorizontal.Children.Add(can); } for (int j = 1; j 10; j++) { Random myRandom = new Random(); TextBlock can = new TextBlock(); can.Text = "我"; can.Width = 44; can.Height = 23; 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; can.Foreground = myBrush; this.stackPanelVertical.Children.Add(can); } }

运行情况为:

面板类控件

WrapPanel例子

新建一个页面,叫做“WrapPanel.xaml”。使用与上面StackPanel相同的代码,创建90个TextBlock控件,查看运行情况。

前台:

toolkit:WrapPanel Height="230" Name="wrapPanelHorizontal" Width="440" Orientation="Horizontal" Margin="20,160,20,378" Grid.RowSpan="2" /> toolkit:WrapPanel Height="230" Name="wrapPanelVertical" Width="440" Orientation="Vertical" Margin="20,291,20,86" Grid.Row="1" />

后台:

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) { for (int i = 1; i 90; i++) { Random myRandom = new Random(); TextBlock can = new TextBlock(); can.Text = "我"; can.Width = 44; can.Height = 23; 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; can.Foreground = myBrush; this.wrapPanelHorizontal.Children.Add(can); } for (int j = 1; j 90; j++) { Random myRandom = new Random(); TextBlock can = new TextBlock(); can.Text = "我"; can.Width = 44; can.Height = 23; 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; can.Foreground = myBrush; this.wrapPanelVertical.Children.Add(can); } }

运行情况:

面板类控件

Canvas与Border例子

新建一个页面,叫做“CanvasBorder.xaml”。创建一个自定义的对话框。使用Border包裹Canvas与TextBlock,给Border添加Tap事件模拟单击事件。先看代码,等等看效果。

Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> Border BorderBrush="Silver" BorderThickness="1" Height="239" HorizontalAlignment="Left" Margin="43,80,0,0" Name="myBorder" Background="Cyan" VerticalAlignment="Top" Width="370" Visibility="Collapsed" > Canvas Height="179" Name="canvas1" Width="302" Background="BlanchedAlmond" > StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Canvas.Left="23" Canvas.Top="91" Width="259"> Border CornerRadius="20" BorderBrush="Silver" BorderThickness="1" Canvas.Left="166" Canvas.Top="86" Height="73" Name="borderOK" Background="OrangeRed" Tap="borderOK_Tap" Width="114"> TextBlock Height="63" Name="textBlock1" FontSize="46" VerticalAlignment="Center" HorizontalAlignment="Center" Text="OK" Width="81" /> Border> StackPanel> Border Background="OrangeRed" Tap="borderCan_Tap" BorderBrush="Silver" BorderThickness="1" Canvas.Left="168" Canvas.Top="91" CornerRadius="20" Height="73" Name="borderCan" Width="114"> TextBlock FontSize="46" Height="63" HorizontalAlignment="Center" Name="textBlock2" Text="Can" VerticalAlignment="Center" Width="81" /> Border> TextBlock Canvas.Left="23" Canvas.Top="9" Height="56" Name="textBlock3" Text="Are you sure?" FontSize="40" FontWeight="Bold" Width="257" Foreground="Red"/> Canvas> Border> Button Content="确定" Height="72" HorizontalAlignment="Left" Margin="150,529,0,0" Name="btnOK" Click="btnOK_Click" VerticalAlignment="Top" Width="160" /> Grid>

后台给出简单的控制。

private void btnOK_Click(object sender, RoutedEventArgs e) { this.myBorder.Visibility = Visibility.Visible; } private void borderCan_Tap(object sender, System.Windows.Input.GestureEventArgs e) { this.myBorder.Visibility = Visibility.Collapsed; MessageBox.Show("取消"); } private void borderOK_Tap(object sender, System.Windows.Input.GestureEventArgs e) { this.myBorder.Visibility = Visibility.Collapsed; MessageBox.Show("确定"); }

效果:

面板类控件

面板类控件

Similar Posts:

  • 学习Winform分组类控件(Panel、groupBox、TabControl)

    分组类控件主要包括容器控件(Panel),分组框控件(groupBox)和选项卡控件(TabControl)等控件. 一.Panel控件 Panel控件是由System.Windows.Forms.Panel类提供的,主要作用就是将其他控件组合一起放在一个面板上,使这些控件更容易管理.当Panel控件面板上要显示过多的控件时,可设置AutoScroll属性为true. Panel控件在默认情况下不显示边框,如把BorderStyle属性设置为不是none的其他值,就可以使用面板可视化地组合相关的

  • WPF的六类控件之概述

    在线演示:http://v.youku.com/v_show/id_XNzA0NjU1Mjk2.html 清晰版视频+代码下载:http://115.com/lb/5lbcftnrfo9s 一.简介 本篇让我们一起来了解一下WPF对控件的定义,以及它的六大类控件,分别为:内容控件.带标题的内容控件.条目控件.带标题的条目控件.特殊控件.布局控件. 主要内容包括: 1.WPF的控件定义. 2.六类控件概述. 3.小结. 二.WPF的控件定义 WPF把那些能够展示数据.响应用户操作的UI元素称为控件

  • Listview中item与button类控件获取焦点问题

    为listiew设置item中含有Button类控件时,item失去焦点,不响应onclick事件,通过度娘,谷哥发现,item中有button类控件时,item失去焦点,因此可以通过两种方法解决 1.item中的button控件 android:focusable="false",即button类控件主动失去焦点, 2. Listview属性加入android:descendantFocusability="blocksDescendants" ,即阻止子控件获得

  • Spinner类控件的使用(下拉列表的使用)

    Spinner位于android.widget包下,它每次只显示用户选中的元素,当用户再次单击时,会弹出选择列表供用户选择,而选择列表中的元素同样来自适配器(Adapter),如图所示为该类的继承树,我们可以看出,Spinner类仍然为View的一个子类. 下面将通过一个选择爱好的案例来介绍Spinner类控件的使用方法,需要注意的是,Android中的下拉列表并不像其他系统那样直接下拉来显示选项,而是相当于一个弹出菜单供用户选择的. (1)新建Android项目,项目名称为Samples_5_

  • java自定义button类控件

    上面是做完后的效果,第一次用java来做自定义继承button类控件,如图看到的其实就只有一个经改写的button控件,style_1.2.3.4 是button内部的几个小label而已,不过中间的滑动效果做得不太好,滑动时有闪烁,还请高手们指点指点啦...... 如图里的style_1.2...是可以自己在外部添加自定义  listener  ,调用如下: myjb.addJblListener("1", new lblistener_1());  myjb.addJblListe

  • Android自动化实现点击自定义ListAdapter类控件

    robotium的solo类提供了solo.clickInList方法去点击listview中的某一行,但却没有方法去点击AdapterView类控件,那么怎么办呢? 方法其实非常简单,就是调用view的setSelection和requestFocus方法就可以了,那么这里以Instrumentation框架为例 /** **传入一个AdapterView对象,我这里传入了子类 **以及列表号 **/ class ClickAdapter implements Runnable { Horiz

  • web.config配置,以及List类控件的追加及显示

    好吧.我承认,今天消极怠工了.总是被一个小问题困扰半天. 今天比较重要的收获: ASP.NET允许文本框中使用HTML标记 解决方案一: (经过验证) 在.aspx文件头中加入这句: <%@   Page   validateRequest= "false "     %>         //禁用了页面级的验证,会有风险(系统可能报错) 在web.config文件中加入 <httpRuntime requestValidationMode="2.0&quo

  • 标签控件Label(文本类控件)

    主要用于显示用户不能编辑的文本,标识窗体上的对象(例如,给文本框.列表框等添加描述信息).也可以通过编写代码来设置要显示的文本信息. 标签控件的部分属性及说明 属性名 说明 Font 获取或设置标签控件显示文字的字体 Image 获取或设置显示在标签上的图像 Size 获取或设置标签的高度和宽度 AutoSize 指示是否自动调整标签的大小以完整显示内容,当值为true时,标签控件会根据所显示内容自动调整大小 Text 设置或获取该标签控件显示的文本(可以通过两种方法设置Label控件显示的文本

  • github 导入的类控件属性失效

    今天用到一个倒计时的控件 一 github下载了Demo iwgang/CountdownView 二 导入到项目中 xml 文件改属性值 没有作用 三 翻来覆去:搞定: 写 xml 时候 app 自动导入了 xmlns:app="http://schemas.android.com/tools" 然后换成 demo里的 xmlns:app="http://schemas.android.com/apk/res-auto"

  • ASP:Image控件(图形显示类控件)

    Image控件用于在页面上显示图像.在使用Image控件,可以在设计或运行时以编程的方式为Image对象指定图形文件. Image控件的常用控件及说明 属性 说明 ID 获取或设置分配给服务器控件的编程标志符 AlternateText 在图像无法显示时显示的替换文字 ImageAlign 获取或设置Image控件相对于网页上其他元素的对齐方式 ImageUrl 获取或设置在Image控件中显示的图像的位置 Enabled 获取或设置一个值,该值指示是否已启用控件 [补充]属性说明 ►Image

Tags: