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>

时间: 2024-10-06 15:56:28

WPF简单布局 浅尝辄止的相关文章

Wpf之布局

上一章大家有了自己的一个Hello World的wpf程序,今天咱们就一起走进WPF,一起来看看wpF的前台xaml这门语言的魅力. 写过web 的人都知道布局这个概念,在web中布局和样式是靠div+CSS来完成的,而在wpf中布局是靠容器来完成的,大家可以把wpf中的容器和web里面的div做对比,刚入门的同学也不要着急,没学过web一点不影响大家学习容器布局的概念的概念. 大家先来看个设计图吧 因为偷懒我直接切了个百度的图来看,更贴近大家的生活,哈哈. 咱们来分析一下,这张图片由4行2列来

WPF 之 布局(一)

WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进行排列组合. Pane类的公共属性太多了.就简单介绍几个常见的属性如下表. 名称 说明 Cursor 获取或设置在鼠标指针位于此元素上时显示的光标. DataContext 获取或设置元素参与数据绑定时的数据上下文. Dispatcher 获取与此 DispatcherObject 关联的 Disp

WPF UI布局之概述

在线演示:http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html 清晰版视频+代码下载:http://115.com/lb/5lbeer0m9lad 一.简单介绍 本篇对WPF的布局控件做一个初步的概览,并分别演示Grid.StackPanel.Canvas.DockPanel和WrapPanel五个布局控件.. 主要内容包含: 1.UI布局的方式和关系. 2.WPF的布局理念. 3.五种布局控件的概述和演示. 4.小结. 二.UI布局的方式和关系 1.三

二,WPF的布局

布局过程 WPF布局包含两个阶段:一个测量(measure)阶段和一个排列(arrange)阶段.在测量阶段,窗口遍历所有子元素,并询问子元素它们所期望的尺寸.在排列阶段,窗口在合适的位置放置子元素. ActualHeight属性和ActualWidth属性:在某些情况下,可能希望使用代码检查窗口中某个元素的尺寸,这时使用Height和Width是没有用的,因为这两个属性是所期望的尺寸设置,可能和实际的渲染尺寸不同,在理想情况下,应当让元素的尺寸适应它们的内容,所以不要设置Height和Widt

.NET CORE(C#) WPF简单菜单MVVM绑定

原文:.NET CORE(C#) WPF简单菜单MVVM绑定 微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 WPF中垂直导航菜单大家应该都常用,本文介绍使用MVVM的方式怎么绑定菜单,真的很简单. 2. 代码实现 使用 .Net Core 3.1 创建名为 "MenuMVVM" 的WPF模板项目,添加两个Nug

table 和 div 简单布局

table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

WPF 动态布局Grid

1 //开启线程加载 2 Action a = () => 3 { 4 var row = 7; 5 var column = 9; 6 7 var path = "../../face_img/"; 8 var files = Directory.GetFiles(path); 9 for (var i = 0; i < row; i++) 10 { 11 faceGrid.RowDefinitions.Add(new RowDefinition()); 12 } 13

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

WPF UI布局(Layout)

WPF是专门用户界面技术,布局是核心功能之一. 每个布局元素都有自己的特点,要灵活使用. WPF中布局元素有如下: Grid:网格 可以自行定义行和列并通过行列的数量.行高和列宽来调整布局.类似Table. Grid具有ColumnDefinitions和RowDefinitions属性,它们分别是ColumnDefinition和RowDefinition的集合, 表示Grid定义了多少行多少列. StackPanel:栈式面板 可以将包含的元素在垂直或水平方向上排成一条直线,移除前一个元素后