1.Canvas 布局控件

  Canvas面板是最轻量级的布局容器,它不会自动调整内部元素的排列和大小,不指定元素位置,元素将默认显示在画布的左上方。Canvas主要用来画图。Canvas默认不会自动裁剪超过自身范围的内容,即溢出的内容会显示在Canvas外面,这是因为Canvas的ClipToBounds属性默认值是false,我们可以显式地设置为true来裁剪多出的内容。下面XAML代码简单演示了Canvas面板的使用。

    <Canvas Margin="10,10,10,10" Background="White" >
<Rectangle Name="rect" Canvas.Left="50" Canvas.Top="50" Fill="Black" Stroke="Red" Width="200" Height="200"/>
<Ellipse Name="el" Canvas.Left="50" Canvas.Top="50" Fill="Azure" Stroke="Green" Width="180" Height="180"/>
</Canvas>
    public partial class BUJU : Window
{
public BUJU()
{
InitializeComponent();
Canvas canv = new Canvas();
canv.Margin = new Thickness(, , , );
canv.Background = new SolidColorBrush(Colors.White);
// 把canv添加为窗体的子控件
this.Content = canv;
// Rectangle
Rectangle rect = new Rectangle();
rect.Fill = new SolidColorBrush(Colors.Black);
rect.Stroke = new SolidColorBrush(Colors.Red);
rect.Width = ;
rect.Height = ;
rect.SetValue(Canvas.LeftProperty, (double));
rect.SetValue(Canvas.TopProperty, (double));
canv.Children.Add(rect);
// Ellipse
Ellipse el = new Ellipse();
el.Fill = new SolidColorBrush(Colors.Azure);
el.Stroke = new SolidColorBrush(Colors.Green);
el.Width = ;
el.Height = ;
el.SetValue(Canvas.LeftProperty, (double));
el.SetValue(Canvas.TopProperty, (double));
el.SetValue(Panel.ZIndexProperty, -);
canv.Children.Add(el);
}
}

2.StackPanel 布局控件

  StackPanel就是将子元素按照堆栈的形式一一排列,可以通过设置StackPanel的Orientation属性设置两种排列方式:横排(Horizontal,该值为默认值)和竖排(Vertical)。纵向的StackPanel每个元素默认宽度与面板一样宽,反之横向是高度和面板一样高。如果包含的元素超过了面板控件,它会被截断多出的内容。可以通过Orientation属性来设置StackPanel是横排(设置其值为Vertical)还是竖排(设置其值为Horizontal)。下面XAML代码演示了StackPanel的使用:

    <StackPanel Margin="10,10,10,10" Background="Azure">
<Label>A Button Stack</Label>
<Button Content="Button 1"></Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
<Button Content="Button 4"></Button>
</StackPanel>
public partial class BUJU : Window
{
public BUJU()
{
InitializeComponent();
StackPanel sp = new StackPanel();
sp.Margin = new Thickness(, , , );
sp.Background = new SolidColorBrush(Colors.Azure);
sp.Orientation = Orientation.Vertical;
// 把sp添加为窗体的子控件
this.Content = sp; // Label
Label lb = new Label();
lb.Content = "A Button Stack";
sp.Children.Add(lb); // Button 1
Button btn1 = new Button();
btn1.Content = "Button 1";
sp.Children.Add(btn1); // Button 2
Button btn2 = new Button();
btn2.Content = "Button 2";
sp.Children.Add(btn2); // Button 3
Button btn3 = new Button();
btn3.Content = "Button 3";
sp.Children.Add(btn3); // Button 4
Button btn4 = new Button();
btn4.Content = "Button 4";
sp.Children.Add(btn4);
}
}

3.WrapPanel 布局控件

  WrapPanel面板在可能的空间中,一次以一行或一列的方式布置控件。默认情况下,WrapPanel.Orientation属性设置为Horizontal,控件从左向右进行排列,然后再在下一行中排列,但你可将WrapPanel.Orientation设置为Vertical,从而在多个列中放置元素。与StackPanel面板不同,WrapPanel面板实际上用来控制用户界面中一小部分的布局细节,并非用于控制整个窗口布局。

    <WrapPanel Margin="10" Background="Azure">
<Button VerticalAlignment="Top" Margin="5">Top Button</Button>
<Button MinHeight="50">Tall Button 2</Button>
<Button VerticalAlignment="Bottom">Bottom Button</Button>
<Button>Stretch Button</Button>
<Button VerticalAlignment="Center">Center Button</Button>
<Button>Next Button</Button>
</WrapPanel>

4.DockPanel 布局控件

  DockPanel面板定义一个区域,在此区域中,你可以使子元素通过锚点的形式进行排列。DockPanel类似于WinForm中Dock属性的功能。对于在DockPanel中的元素的停靠可以通过Panel.Dock的附加属性来设置,如果设置LastChildFill属性为true,则最后一个元素将填充剩余的所有空间。

    <DockPanel Margin="10" Background="Azure" LastChildFill="True">
<Button DockPanel.Dock="Top" Background="Red">Top Button</Button>
<Button DockPanel.Dock="Left" Background="Gray">Left Button</Button>
<Button DockPanel.Dock="Right" Background="Green">Right Button</Button>
<Button DockPanel.Dock="Bottom" Background="White">Bottom Button</Button>
<Button>Remaining Button</Button>
</DockPanel>

5.Grid 布局控件

  Grid比起其他Panel,功能是最多最为复杂的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合两种元素组成。而放在Grid面板中的元素必须显式采用附加属性定义其所在行和列,否则元素均默认放置在第0行第0列。下面XAML演示了Grid面板的使用:

    <Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Green" Margin="10,10,10,20"/>
<Rectangle Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Fill="Blue" Margin="10,10,10,20"/>
<Rectangle Grid.Row="0" Grid.Column="4" Fill="Orange"/>
<Button Grid.Row="1" Grid.Column="0">Button 2</Button>
<Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Fill="Red"/>
</Grid>
<!--定义Grid的列宽和行高可采用固定、自动和按比例三种方式定义。
  第一种:固定长度——宽度不够时,元素会被裁剪,单位是pixel;
  第二种:自动长度——自动匹配行中最宽元素的高度。
  第三种:比例长度——"*"表示占用剩余的全部宽度或高度,两行都是*,则将剩余高度平分。像上面的一个2*,一个*,表示前者2/3宽度。-->

6.UniformGrid 布局控件

  UniformGrid是Grid简化版本,不像Grid面板,UniformGrid不需要预先定义行集合和列集合,反而,通过简单设置Rows和Columns属性来设置尺寸。每个单元格始终具有相同的大小。UniformGrid每个单元格只能容纳一个元素,将自动按照在其内部的元素个数,自动创建行和列,并通过保存相同的行列数。

    <UniformGrid>
<Ellipse Margin="10" Fill="Gray"/>
<Ellipse Margin="10" Fill="Gray"/>
<Ellipse Margin="10" Fill="Green"/>
<Ellipse Margin="10" Fill="Green"/>
<Ellipse Margin="10" Fill="Red"/>
</UniformGrid>

7.ScrollViewer 控件

  通常用户界面中的内容比计算机屏幕的显示区域大的时候,可以利用ScrollViewer控件可以方便地使应用程序中的内容具备滚动功能。具体的使用示例如下所示:

    <Grid>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">
<Rectangle Width="500" Height="400" Fill="Green"/>
</ScrollViewer>
</Grid>

8.布局综合运用

    <DockPanel Width="Auto" Height="Auto" LastChildFill="True">
<!--顶部菜单区域-->
<Menu Width="Auto" Height="20" Background="LightGray" DockPanel.Dock="Top">
<!--File菜单项-->
<MenuItem Header="文件">
<MenuItem Header="保存"/>
<Separator/>
<MenuItem Header="退出"/>
</MenuItem>
<!--About 菜单项-->
<MenuItem Header="帮助">
<MenuItem Header="关于本产品"/>
</MenuItem>
</Menu> <!--状态栏-->
<StackPanel Width="Auto" Height="25" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">
<Label Width="Auto" Height="Auto" Content="状态栏" FontFamily="Arial" FontSize="12"/>
</StackPanel>
<!--Left-->
<StackPanel Width="130" Height="Auto" Background="Gray" DockPanel.Dock="Left">
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
<Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>
</StackPanel> <!--Right-->
<Grid Width="Auto" Height="Auto" Background="White"> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>
<Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>
</Grid>
</DockPanel>

WPF布局的更多相关文章

  1. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  2. WPF快速入门系列(1)——WPF布局概览

    一.引言 关于WPF早在一年前就已经看过<深入浅出WPF>这本书,当时看完之后由于没有做笔记,以至于我现在又重新捡起来并记录下学习的过程,本系列将是一个WPF快速入门系列,主要介绍WPF中 ...

  3. 学习WPF——WPF布局——了解布局容器

    WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...

  4. WPF 布局总结

    一.WPF布局原理 WPF窗口只能包含单个元素,为在WPF窗口中放置多个元素,需要放置一个容器,让后在容器中添加其他元素.“理想的”WPF窗口需遵循以下几个原则: 1.不应显示设定元素的尺寸.元素应当 ...

  5. 浅谈 WPF布局

    我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...

  6. WPF布局系统[转]

    转自:http://www.cnblogs.com/niyw/archive/2010/10/31/1863908.html前言 前段时间忙了一阵子Google Earth,这周又忙了一阵子架构师论文 ...

  7. 意外地解决了一个WPF布局问题

    原文:意外地解决了一个WPF布局问题 今天做了一个小测试,意外地将之前的一个困扰解决了,原问题见<WPF疑难杂症会诊>中的“怎么才能禁止内容撑大容器?” 以前我是在外侧嵌套Canvas容器 ...

  8. WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系

    WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...

  9. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

  10. WPF布局控件常用属性介绍

    WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0)   概述:WPF布局控件都是派生自System.Windows ...

随机推荐

  1. eclipse中整合springMvc,velocity和sitemesh

    1.项目所需要jar包 (有些可能多余) 2.创建UserController   目录如下: package qust.thb.usermanage.controller; import org.s ...

  2. am335x 电容屏驱动添加。

    参考:http://www.cnblogs.com/helloworldtoyou/p/5530422.html 上面可以下载驱动. 解压后驱动有如下目录: 我们要选择的是: eGTouchARM/e ...

  3. Linux的目录结构

    学习Linux这么久,对Linux的目录的目录结构进行整理总结一下. 以下是对这些目录的解释: /bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令. /boot:这里存放的是启动L ...

  4. 5.1---二进制数插入(CC150)

    public class Solution { public static int binInsert(int n, int m, int i, int j) { // write code here ...

  5. 转:jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. 【云计算】qcow2虚拟磁盘映像转化为vmdk

    Software QEMU emulator version 1.7.0 Introduction Since we use VmWare in my company, I started to pl ...

  7. win7桌面背景地址

    C:\Users\你的用户名\AppData\Local\Microsoft\Windows\Themes\Alaskan L\DesktopBackground

  8. C#之系统自带保存属性

    源代码下载链接 程序开发很多时候需要根据运行环境做不通的参数配置,通过写ini之类的文本文件是一种方法,但这种方法也同时会把数据暴露 Winform开发中可以将需要配置的字段属性保存到程序中(其实也是 ...

  9. Debian上安装Apache+Django全过程

    -->start sudo apt-get install apache2 libapache2-mod-wsgi #https://wiki.debian.org/zh_CN/Apache s ...

  10. C++实现VPN工具之VPN错误代码大全

    该篇文章转自:<VPN问题全攻略>http://home.51.com/h012359/diary/item/10008457.html 以下是使用VPN版软件中常见的一些错误代码: 1. ...