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>