文档章节

WPF界面布局的10个例子

北风其凉
 北风其凉
发布于 2017/04/27 16:29
字数 1018
阅读 117
收藏 0
点赞 1
评论 0

最近在学习使用WPF开发应用程序。关于WPF程序布局,有很多博客和参考书可供学习。今天试着做了10个简单的WPF界面,将xaml代码和实际展示的界面列出,仅供参考。

1、使用按钮填充父容器,类似于Winform中将按钮的Dock设置为Fill

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window01"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="按钮填充整个工作区" Height="300" Width="300">
    <Grid Name="BaseGrid">
        <Button Content="Button" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" 
                Width="{Binding Path=ActualWidth,ElementName=BaseGrid}"
                Height="{Binding Path=ActualHeight,ElementName=BaseGrid}"/>
    </Grid>
</Window>

2、使用DockPanel进行布局,容器分上、下、左、右、中央五个部分

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window02"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

3、使用DockPanel进行布局,调整Dock声明的先后顺序可调整DockPanel内元素的结构

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window03"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" DockPanel.Dock="Top" Height="100"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="100"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

4、使用DockPanel进行布局,调整Dock声明的先后顺序可调整DockPanel内元素的结构

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window04"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel布局测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <Button Content="Button" />
    </DockPanel>
</Window>

5、使用DockPanel进行布局,每一部分可继续嵌套其他布局

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window05"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel嵌套测试" Height="300" Width="300">
    <DockPanel>
        <Button Content="Button" DockPanel.Dock="Top" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Bottom" Height="80"/>
        <Button Content="Button" DockPanel.Dock="Left"/>
        <Button Content="Button" DockPanel.Dock="Right"/>
        <DockPanel>
            <Button Content="Button" DockPanel.Dock="Top" Height="20"/>
            <Button Content="Button" DockPanel.Dock="Bottom" Height="20"/>
            <Button Content="Button" DockPanel.Dock="Left"/>
            <Button Content="Button" DockPanel.Dock="Right"/>
            <Button Content="Button"/>
        </DockPanel>
    </DockPanel>
</Window>

6、在Canvas上绘制控件,以左上角为坐标原点设置各控件位置

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window06"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas上绘制控件" Height="300" Width="300">
    <Canvas HorizontalAlignment="Left" Height="270" VerticalAlignment="Top" Width="292">
        <Button Content="Button" Canvas.Left="20" Canvas.Top="30" Width="75"/>
        <Button Content="Button" Canvas.Left="20" Canvas.Top="70" Width="75"/>
        <Button Content="Button" Canvas.Left="20" Canvas.Top="110" Width="75"/>
    </Canvas>
</Window>

7、Grid容器,以网格形式放置元素

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window07"
        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>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="135" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Margin="0,0,0,0" Grid.Row="0" Grid.Column="0">左上</Button>
        <Button Margin="0,0,0,0" Grid.Row="0" Grid.Column="1">右上</Button>
        <Button Margin="0,0,0,0" Grid.Row="1" Grid.Column="0">左下</Button>
        <Button Margin="0,0,0,0" Grid.Row="1" Grid.Column="1">右下</Button>
    </Grid>
</Window>

8、StackPanel容器,自上到下或自左到右显示元素

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window08"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel测试" Height="300" Width="300">
    <StackPanel>
        <Button Content="Button" Height="30"/>
        <Button Content="Button" Height="40"/>
        <Button Content="Button" Height="50"/>
        <Button Content="Button" Height="60"/>
        <Button Content="Button" Height="70"/>
    </StackPanel>
</Window>

9、StackPanel容器,添加滚动条以显示更多的元素

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window09"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="含滚动条的StackPanel" Height="300" Width="300">
    <ScrollViewer x:Name="scrolls" VerticalScrollBarVisibility="Auto">
        <ScrollViewer.Content>
            <StackPanel>
                <Button Content="Button" Height="30"/>
                <Button Content="Button" Height="40"/>
                <Button Content="Button" Height="50"/>
                <Button Content="Button" Height="60"/>
                <Button Content="Button" Height="70"/>
                <Button Content="Button" Height="80"/>
            </StackPanel>
        </ScrollViewer.Content>
    </ScrollViewer>
</Window>

10、WrapPanel容器,自左到右自上到下显示元素

XAML代码如下:

<Window x:Class="WpfLayoutDemo.Window10"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel测试" Height="300" Width="300">
    <WrapPanel HorizontalAlignment="Left" Height="270" VerticalAlignment="Top" Width="292">
        <Button Content="Button" Width="75" Height="50"/>
        <Button Content="Button" Width="75" Height="75"/>
        <Button Content="Button" Width="75" Height="100"/>
        <Button Content="Button" Width="75" Height="100"/>
        <Button Content="Button" Width="75" Height="75"/>
        <Button Content="Button" Width="75" Height="50"/>
    </WrapPanel>
</Window>

END

© 著作权归作者所有

共有 人打赏支持
北风其凉

北风其凉

粉丝 114
博文 497
码字总数 462457
作品 4
朝阳
程序员
WPF程序编译(从命令行到Visual Studio)

回过头,继续看看 WPF 程序 如何从 仅使用代码 过渡到 使用XAML 呢... 程序结构? C# 程序 需要有一个static的 Main() 成员函数作为入口点 GUI 程序至少需要有一个窗口 GUI 程序一般有一个 Ap...

晨曦之光
2012/05/08
618
0
WPF下的布局(Layout、Panel)小记

看了一周多了C#和.NET了,还没有搞清楚 visual C# 中WPF的界面设计器的布局怎么弄,以及常用的控件分别有哪些。 接下来看看WPF中的控件与布局。 继承关系? 没有图片,用表格凑活一下 布局 ...

晨曦之光
2012/05/08
2.1K
0
Actipro Ribbon For WPF 界面控件免费下载地址

Actipro Ribbon可以添加ribbon用户界面到你的程序中,功能包含:ribbon大小调整、程序菜单、QAT、嵌入的多种控件、多种布局选项、按键提示、屏幕提示、WPF命令模式用法、多种样式、XAML布局、...

yidongkaifa
2014/10/12
0
0
WPF基础到企业应用系列6——布局全接触

一. 摘要 首先很高兴这个系列能得到大家的关注和支持,这段时间一直在研究Windows Azure,所以暂缓了更新,同时也本着想把它写好、宁缺毋滥的精神,在速度上自然也就慢了下来,这篇文章拖拖拉...

晨曦之光
2012/03/09
0
0
SWT界面布局介绍之GridLayout

GridLayout网格布局时最常用的布局之一,类似于Html中使用table布局。通过使用GridData来设置布局参数。 做个例子看看。 代码: import org.eclipse.swt.SWT;import org.eclipse.swt.layout...

山东-小木
2013/01/17
0
1
WPF+WCF一步一步打造音频聊天室(二):文字聊天和白板共享

这篇文章将讲述实现WPF的UI和WCF中的双工通信。实现文字部分的聊天功能和实现共享白板的功能。 画WPF的界面其实是一件麻烦的事情。虽然WPF和WindowsForm一样,能将控件拖到哪,它就在哪。我们...

晨曦之光
2012/03/09
0
0
devexpress 15.2.3更新日志

下面是besy翻译的部分重要更新,要查看全部更新细节请访问英文官网。 | 下载DevExpress 2015.2 Diagram Control 新的DevExpress Diagram Control可以让用户利用复杂的信息图示展示信息,比如...

百mumu
2015/12/04
254
0
干货来了!2016年DevExpress资源汇总(更新、文档)

在2016年,著名软件界面解决方案专家DevExpress进行了重大升级,EVGET围绕版本升级推出了一系列干货资源,现将2016年所有Dev资源使用教程汇总于此,欢迎收藏转发点赞哦~ DevExpress WPF入门指...

Miss_Hello_World
2016/11/25
36
0
以Model为核心的表单设计器的思路

在之前的文章中介绍过一些表单设计器的思路和想法。在上一篇文章:零代码平台实现中说到我要实现一个功能强大的表单设计工具。经过几天思考,觉得以Model为核心去实现表单设计器思路既简单也...

晨曦之光
2012/03/09
0
0
有木有哪位大神给个qt 复杂布局的栗子来啃啃

rt, 小生有个界面的想法,但是写了一堆代码,也玩弄了半天qt creater,也没能达到我想要的效果。 能不能请哪位大神给个栗子,来帮助理解qt 的复杂布局。 下图大概是个例子,如果能实现这个,其...

Cosven
2014/08/27
467
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 配置时间和日期格式

你可以修改你 Confluence 为用户显示的时期和时间格式。设置的句法使用的是 SimpleDateFormat class,请参考 Java SimpleDateFormat 文档中的内容来设置日期和时间格式。 有下面 3 个时间和日...

honeymose
7分钟前
0
0
php seralize unserialize

关于PHP 序列化(serialize)和反序列化(unserialize)出现错误(Error at offset)的解决办法。 首先我们分析一下为什么会出现这个错误: 编码问题 UTF-8: ANSI: 我发现在我的机器上边编码改...

yeahlife
13分钟前
0
0
七、JSP九大内置对象和四个作用域

九大内置对象: request:类型是HttpServletRequest,和Servlet里的HttpServletRequest一模一样。 response:类型是HttpServletResponse,和Servlet里的HttpServletResponse一模一样。JSP里基...

Wakeeee_
16分钟前
0
0
第十四章NFS服务搭建与配置

14.1 NFS介绍 NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netap...

Linux学习笔记
48分钟前
0
0
双向认证-nginx

1、设置容器 docker run -it --name nginx-test2 -v /home/nginx:/apps -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro -p 8183:80 -p 7443:443 -d nginx:stable 2、修改nginx配......

hotsmile
49分钟前
0
0
深入了解 Java 自动内存管理机制及性能优化

一图带你看完本文 一、运行时数据区域 首先来看看Java虚拟机所管理的内存包括哪些区域,就像我们要了解一个房子,我们得先知道这个房子大体构造。根据《Java虚拟机规范(Java SE 7 版)》的规...

Java大蜗牛
51分钟前
4
0
SpringBoot | 第六章:常用注解介绍及简单使用

前言 之前几个章节,大部分都是算介绍springboot的一些外围配置,比如日志 配置等。这章节开始,开始总结一些关于springboot的综合开发的知识点。由于SpringBoot本身是基于Spring和SpringMvc...

oKong
52分钟前
9
0
云数据库架构演进与实践

如今,大型企业如金融企业和银行等,在下一代的微服务架构转型要求下,需要基础软件和数据平台能够实现原生的云化,以满足微服务架构的需求。 微服务,也就是一种面向服务的,有特定边界的松...

巨杉数据库
53分钟前
0
0
Linux系统梳理---系统搭建(一):jdk卸载与安装

1.去官网下载符合Linux版本的jdk,暂用jdk-8u171-linux-x64.rpm 2.登陆Linux,进入usr目录,创建java目录(方便管理,可以其他位置):mkdir java 3.上传下载的jdk包至Linux服务器,使用rz指令(sz f...

勤奋的蚂蚁
今天
0
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

六库科技
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部