文档章节

WPF界面布局的10个例子

北风其凉
 北风其凉
发布于 2017/04/27 16:29
字数 1018
阅读 142
收藏 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
博文 498
码字总数 463468
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

JSCH会大量使用服务器内存吗?会

java实现一个需求用到了jsch,发现服务器内存会被占满。 写了个50进程的jsch-sftp测试连接 put一个文件 ExecutorService fixedThreadPool = Executors.newFixedThreadPool(50);for (int j =...

just-coding
5分钟前
0
0
聊聊redis的数据结构的应用

序 本文主要研究一下redis的数据结构的应用 string 最常用的就是incr操作,比如可以用来维护用户在某个抽奖活动的剩余抽奖次数 setnx方法可以用来实现分布式锁 hashmap 可以用来存储session...

go4it
5分钟前
0
0
《将博客搬至CSDN》

搬到csdn

我风依旧
8分钟前
1
0
源码编译安装最新版 Subversion 1.10.x

一、使用包管理器自动安装 官方网站提供了常见 Linux 发行版的安装命令,此处仅以 CentOS、Debian 及 Ubuntu 为例进行说明,其它系统详见官网:https://subversion.apache.org/packages.html...

whoru
12分钟前
0
0
liquibase

今天在看springboot源码时发现一个好东西。 LiquibaseServiceLocatorApplicationListener Liquibase是一个用于跟踪、管理和应用数据库变化的开源的数据库重构工具。它将所有数据库的变化(包...

jack_peng
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部