WPF简单布局 浅尝辄止
WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素。
注意:造成这一限制的原因是window类继承自contentcontrol类,
说道简单布局不得不说下wpf的布局原则:
理想窗口要遵循的布局原则:
1,不应显示的设定元素的尺寸。
2,不应使用屏幕坐标指定元素的位置。
3,布局容器和他们的子元素“共享”可以使用的空间。
4,可以嵌套布局容器。
布局过程包括:测量阶段和排列阶段。所有的wpf布局容器都是派生自system.windows.controls.panel抽象类的面板。
布局容器:
1,StatckPanel:在一个水平或垂直的堆栈中放置元素。
<Window x:Class="布局.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="布局测试" Height="350" Width="525"><StackPanel Orientation="Vertical"><!--Orientation布局方向--><Label Height="50"> A Button Stack</Label><Button Height="54">button1</Button><Button Height="57">button2</Button><Button Height="54">button3</Button><Button Height="47">button4</Button><Button Height="58">button5</Button></StackPanel></Window>
2,WrapPanel:在一系列的可换行的行中放置元素,在水平方向上,WrapPanel面板以从左向右的方式放置条目,然后在随后的行中放置元素,垂直方向上,WrapPanel的面板在自上而下的列放置元素并且使用附加的列放置剩余条目。
<Window x:Class="布局.WrapPanel面板"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WrapPanel面板" Height="300" Width="309.195"><WrapPanel Orientation="Vertical"><Button Content="Button1" Width="75"/><Button Content="Button2" Width="75"/><Button Content="Button3" Width="75"/><Button Content="Button4" Width="75"/><Button Content="Button5" Width="75"/><Button Content="Button6" Width="75"/><Button Content="Button7" Width="75"/><Button Content="Button8" Width="75"/><Button Content="Button9" Width="75"/><Button Content="Button10" Width="75"/><Button Content="Button11" Width="75"/><Button Content="Button12" Width="75"/><Button Content="Button13" Width="75"/><Button Content="Button14" Width="75"/><Button Content="Button15" Width="75"/><Button Content="Button16" Width="75"/></WrapPanel></Window>
3,DockPanel:根据容器的整个边界调整元素。
<Window x:Class="布局.DockPanel面板"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="DockPanel面板" Height="300" Width="300">
<Border Margin="10,10" Background="LightBlue" BorderBrush="Pink" BorderThickness="5" CornerRadius="20"><DockPanel LastChildFill="False"><Button Content="top1" DockPanel.Dock="Top"></Button><Button Content="left1" DockPanel.Dock="Left"></Button><Button Content="right1" DockPanel.Dock="Right"></Button><Button Content="bottom1" DockPanel.Dock="Bottom"></Button></DockPanel></Border></Window>
4,Grid:最常用的元素,不多说类似与html中的table一样的布局元素。表格布局最灵活的布局容器之一。
单元格设置为数字*的形式和容器成比例缩放.
<Window x:Class="布局.Grid顶级容器"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Grid顶级容器" Height="300" Width="300"><Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Content="TopLeft" Grid.Row="0" Grid.Column="0"></Button><Button Content="MiddleLeft" Grid.Row="0" Grid.Column="1"></Button><Button Content="BottomRight" Grid.Row="1" Grid.Column="2"></Button><Button Content="BottomMiddle" Grid.Row="1" Grid.Column="1"></Button></Grid></Window>
5,UniformGrid:在一个不可见但是强制所有单元格具有相同尺寸的表中放置元素。不常用
<Window x:Class="布局.UniformGrid面板"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="UniformGrid面板" Height="300" Width="300"><Border Background="LightGray" BorderBrush="Brown" BorderThickness="5,5" CornerRadius="10" Margin="5"><UniformGrid Rows="2" Columns="2"><Button>top left</Button><Button>top right</Button><Button>bottom left</Button><Button>bottom right</Button></UniformGrid></Border></Window>
6,Canvas:是固定的坐标绝对定位元素。这个布局容器和传统的windows窗体最相似,但是没有提供锚定或停靠功能,不建议使用。
<Window x:Class="布局.Canvas面板"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="Canvas面板" Height="300" Width="300"><Border BorderBrush="Beige" BorderThickness="10" Margin="5" Background="YellowGreen" CornerRadius="15"><Canvas><Button Canvas.Left="10" Canvas.Top="10">10,10</Button><Button Canvas.Left="20" Canvas.Top="20">20,20</Button><Button Canvas.Left="30" Canvas.Top="40">30,40</Button><Button Canvas.Right="60" Canvas.Bottom="50">60,50</Button></Canvas></Border></Window>
7,Border边框
<Window x:Class="布局.border控件"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="border控件" Height="300" Width="300"><Border Margin="7" Padding="15" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="5" VerticalAlignment="Top"><StackPanel><Label Name="lb">One</Label><Button Name="bt2">Two</Button><Button Name="bt3">Three</Button></StackPanel></Border></Window>
posted on 2016-03-16 11:22 forgive-me 阅读(288) 评论(0) 编辑 收藏 举报