【转】wpf从我炫系列1----布局控件的使用（上）

今天我来给大家讲解在学习WPF过程中使用布局控件的一些心得，主要给大家介绍一下一个控件的用法。希望对大家学习Wpf有所帮助.

1. StackPanel栈面板

2. WrapPanel环绕面板

3. DockPanel停靠面板

4. Grid网格

5. UniformGrid均布网格

6. Canvas画布

1. StackPanel栈面板

栈面板是WPF中最简单的面板，用来在小范围内布局效果非常好。将它包含的元素按一行或者一列进行排列.StackPanel内的元素不会换行。如果stackPanel内没有足够的空间，它内部的元素超过了它所容纳的范围时，内部元素将被截取。

通过设置Orientation属性为Horizontal, Vertical

可以使stackpanel内部的元素水平或垂直排列，关于这点用户可以自己试验

效果图如下：

代码

<Window x:Class="WpfPanel.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="367" Width="505">

<Grid>

<StackPanel Margin="0" Name="stackPanel1" Orientation="Vertical">

<Button Content="Button" Name="button1" />

<Button Content="Button" Name="button2" />

<Button Content="Button" Name="button3" />

<Button Content="Button" Name="button4" />

<Button Content="Button" Name="button5" />

</StackPanel>

</Grid>

</Window>

通过设置stackpanel内部控件的VerticalAlignment属性，可以设置其内部控件的排列方式。

当StackPanel属性为Orientation="Horizontal",可以设置内部控件的VerticalAlignment来设置其对齐方式

当StackPanel属性为Orientation=" Vertical ",可以设置内部控件的HorizontalAlignment来设置其对齐方式

效果图

代码

<Window x:Class="WpfPanel.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="367" Width="505">

<Grid>

<StackPanel Margin="0" Name="stackPanel1" Orientation="Horizontal">

<Button Content="Button1" Name="button1" VerticalAlignment="Top" />

<Button Content="Button2" Name="button2" VerticalAlignment="Bottom"/>

<Button Content="Button3" Name="button3" VerticalAlignment="Center" />

<Button Content="Button4" Name="button4" VerticalAlignment="Stretch" />

<Button Content="Button5" Name="button5" VerticalAlignment="Top" />

</StackPanel>

</Grid>

</Window>

2. WrapPanel环绕面板

Wrappanel面板的使用和stackpanel面板一样，但是如果wrappanel面板内部没有足够的空间，其子元素超出了其内部可容纳的宽度，可以换行显示.

效果图:

代码

<Window x:Class="WpfPanel.wrappanelOne"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="wrappanelOne" Height="300" Width="300">

<Grid>

<WrapPanel Height="100" HorizontalAlignment="Left" Margin="30,82,0,0" Name="wrapPanel1" VerticalAlignment="Top">

<Button Content="Button" Height="23" Name="button1" Width="75" />

<Button Content="Button" Height="23" Name="button2" Width="75" />

<Button Content="Button" Height="23" Name="button3" Width="75" />

<Button Content="Button" Height="23" Name="button4" Width="75" />

</WrapPanel>

</Grid>

</Window>

3. Dockpanel布局面板

Dockpanel面板主要用来拉伸其内部控件并使控件停靠在内部的某个位置，主要用来做整体布局设计使用。

Dockpanel提供了四个属性，用来设置其内部控件布局

Left:位于DOCKPANEL左侧的子元素

Top:位于DOCKPANEL顶部的子元素

Right:位于DOCKPANEL右侧的子元素

BUTTON：位于DOCKPANLE底部的子元素.

效果图

代码

<Window x:Class="WpfPanel.dockpanelOne"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="dockpanelOne" Height="300" Width="300">

<Grid>

<DockPanel Name="dockPanel1">

<Button Content="顶£¤部?" Name="button1" DockPanel.Dock="Top"/>

<Button Content="左Á¨®侧¨¤" Name="button2" DockPanel.Dock="Left"/>

<Button Content="右®¨°侧¨¤" Name="button3" DockPanel.Dock="Right" />

<Button Content="底Ì¡Á部?" Height="23" Name="button4" DockPanel.Dock="Bottom" />

<Button Content="剩º¡ê余®¨¤空?间?" Name="button5"/>

</DockPanel>

</Grid>

</Window>

如果将DOCKPANEL的LastChildFill="False"，则最后一个子元素不会占满剩余空间,默认情况下为true

效果图

代码

<Window x:Class="WpfPanel.dockpanelOne"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="dockpanelOne" Height="300" Width="300">

<Grid>

<DockPanel Name="dockPanel1" LastChildFill="False">

<Button Content="顶£¤部?" Name="button1" DockPanel.Dock="Top"/>

<Button Content="左Á¨®侧¨¤" Name="button2" DockPanel.Dock="Left"/>

<Button Content="右®¨°侧¨¤" Name="button3" DockPanel.Dock="Right" />

<Button Content="底Ì¡Á部?" Height="23" Name="button4" DockPanel.Dock="Bottom" />

<Button Content="剩º¡ê余®¨¤空?间?" Name="button5"/>

</DockPanel>

</Grid>

</Window>

当然，你可以设置其内部的元素的HorizontalAlignment和VerticalAlignment属性来具体设置其内部排列方式,读者可以自己试验

demo下载：http://download.csdn.net/source/2474542

在下一节中我们将为大家讲解其他控件的用法

【转】wpf从我炫系列1----布局控件的使用（上）相关推荐

【转】WPF从我炫系列4---装饰控件的用法
在这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollVie ...
【转】WPF从我炫系列3---内容控件的用法
今天我来给大家讲解WPF中内容控件的用法,在WPF中的内容控件,通俗的讲,是指具有Content属性的控件,在content属性里面可以嵌套放置任意其他类型的控件,但是Content只能接受单个元素, ...
【转】wpf从我炫系列2----布局控件的使用(下)
4. GRID控件 Grid控件可以是说是wpf中功能最强大和使用最多的控件.它有点类似于HMTL网页布局中的表格,可以自定义行列显示,并可以合并某些行和列. 使用<Grid.Ro ...
【愚公系列】2023年07月 WPF+上位机+工业互联 002-WPF布局控件
文章目录前言一.WPF布局控件 1.无边框设计 2.理解布局 2.1 WPF的布局处理 2.1 布局原则 2.3 布局过程 3.布局控件 3.1 Grid控件 3.1.1 属性 3.1.2 案例 ...
【转】WPF从我炫系统5---基本控件的用法
今天我来给大家讲解WPF中一些基本控件的用法,所谓基本控件,就是我们最常用用到的一些控件,通过这一节的讲解,大家会对WPF中的控件的用法有一个更深入的了解. 1. 基本控件 LABEL控件 ...
WPF基础系列二：控件简介
控件简介文章目录控件简介前言一.控件二.控件类型三.控件详解 1.ContentControl 类 2.HeaderedContentControl 类 3.ItemsControl 类 ...
WPF 自定义控件-布局控件
自定义布局控件 1.添加自定义控件添加新项->WPF->自定义控件(WPF) 在Themes文件夹下Generic.xaml会自动生成自定义控件的模板样式 2.实现自定义布局控件功能 1 ...
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系
WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...
Expression Blend实例中文教程(3) - 布局控件快速入门Grid
上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Sil ...

【转】wpf从我炫系列1----布局控件的使用（上）

【转】wpf从我炫系列1----布局控件的使用（上）相关推荐

最新文章

热门文章