WPF学习之路（十一）布局

布局

Canvas

基本面板，传统布局方式，支持与设备无关的坐标定位元素

<Border BorderThickness="" BorderBrush="Black" Margin="">

        <Canvas>

            <Button Canvas.Left="" Canvas.Top="" Content="Left=20,Top=50" />

            <Button Canvas.Right="" Canvas.Bottom="" Content="Right=20,Bottom=50" />

        </Canvas>

    </Border>

效率高，适合矢量绘图

StackPanel

用于顺序垂直或水平排列子元素

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel>

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

</Grid>

WrapPanel

与StackPanel类似，当没有空间放置子元素时会自动放到下一行或下一列

<Border BorderThickness="" BorderBrush="Black" Margin="">

    <WrapPanel ItemHeight="">

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

    </WrapPanel>

</Border>

布局会随着窗口大小的改变一起改变

DockPanel

将元素放到面板的某一个边上，拉伸元素填满高度或者宽度，可以设置是否填充剩余空间

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <DockPanel Grid.Row="" Margin="">

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

    </DockPanel>

    <DockPanel Grid.Row="" Margin="" LastChildFill="False">

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

    </DockPanel>

</Grid>

Grid

最常用且功能强大的布局（之前的实例中已经有过使用），允许在一个列表中放置子元素

常用属性 Column\Row\ColumnSpan\RowSpan

尺寸：绝对尺寸、自动尺寸、比例尺寸

<Grid Margin="">

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="3*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=3*" />

    </Grid>

</Grid>

IsSharedSizeScope

通过对SharedSizeGroup命名，相同名字的Grid的高度或者宽度可以设置为相同

<Grid Margin="" Grid.IsSharedSizeScope="True">

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" SharedSizeGroup="a"/>

                    </Grid.ColumnDefinitions>

                  　...

                </Grid>

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" />

                        <ColumnDefinition Width="*" />

                        <ColumnDefinition Width="2*" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" />

                    </Grid.ColumnDefinitions>

　　　　　　　　　　　　...

GridSplitter

可以通过鼠标键盘改变尺寸

<Grid Margin="" Grid.IsSharedSizeScope="True">

    <Grid.RowDefinitions>

　　　　...

    </Grid.RowDefinitions>

    <GridSplitter Grid.Row="" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" ResizeDirection="Rows" Height="3" Background="Black" />

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

          ...

        </Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Stretch" ShowsPreview="True" Width="" Background="Black" />

        ...

    </Grid>

</Grid>

To be continue...

WPF学习之路（十一）布局的更多相关文章

WPF学习之路初识
WPF学习之路初识 WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...
WPF学习（一）--布局控件简介
WPF的4种基本布局介绍 1.Grid的布局这个就没啥特别好说的,其实,基本上复杂的布局,都需要用到Grid. 主要就是对行和列进行进行设置和定义. 1.行表格列表格: 包含行和列的表格 2.St ...
WPF学习（3）布局
今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...
【WPF学习】第二十一章特殊容器
内容控件不仅包括基本控件,如标签.按钮以及工具提示:它们还包含特殊容器,这些容器可用于构造用户界面中比较大的部分区域. 首先介绍ScrollViewer控件,该控件直接继承自ContentContro ...
WPF学习之路（十一）布局（续）
布局实际上是一个Slot模型,其中每个父对象分配给子对象一个Slot,子对象可以自由占用Slot中的空间,通过Margin\VerticalAlignment\HorizontalAlignment控 ...
WPF学习之路（三）属性与依赖
类型是DependencyProperty的属性是依赖属性依赖属性不同于普通的.Net属性,类似于一个计算过程,根据依赖的值得到最终值. 为什么引入依赖属性: MSDN原文 One of the p ...
WPF学习之路（二） XAML(续)
属性简单属性前面用到的Width/Height都是简单属性,其赋值一定要放到双引号里 XAML解析器会根据属性的类型执行隐式转换与C#的区别 SolidBrush.Color = Colors. ...
WPF学习之路（一）初识WPF
参考<葵花宝典-WPF自学手册> VS2012 先创建第一个WPF小程序 1.创建WPF程序 2.查看Solution,WPF中xaml文件和cs文件经常成对出现两个主要的类:APP(W ...
Wpf学习之路……
Wpf学习之路-- Wpf是 .net中一门做winform的技术,和传统的winform的区别在于: 1. 原来的winform就是拖控件,而wpf的控件都死自己拿标记语言(xaml ...

随机推荐

实现多表关联来方便你的SELECT查询功能
这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...
【VBS】vbs指定编码保存文本文件（含xml、ini什么的）
本文还是折腾安装包期间衍生出来的产物. 我那安装包在安装期间有这个动作: - 让用户填写一些信息,待安装完成后把这些信息写入软件安装目录中的指定ini.xml文件中上文说的是如何用vbs写ini,i ...
算法實例-C#-信箱排序-PigeonHoleSort
# 算法实例 # 排序算法Sort 信箱排序PigeonHoleSort https://en.wikipedia.org/wiki/Pigeonhole_sort 算法說明 1.信箱算法使用一個完整 ...
Debian7编译VIM7.4
[ 另: vim7.4源码在vs2013的编译方法 ] 1 安装libncurses5库: apt-get install libncurses5-dev 2 安装gvim需要的库: 方法一: apt ...
Scalaz（35）－ Free ：运算－Trampoline，say NO to StackOverflowError
在前面几次讨论中我们介绍了Free是个产生Monad的最基本结构.它的原理是把一段程序(AST)一连串的运算指令(ADT)转化成数据结构存放在内存里,这个过程是个独立的功能描述过程.然后另一个独立运算 ...
jQUery操作checkbox
1 2 3 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <s ...
2016读书List
2016年读书书单. 1. <华尔街漫步> + <战胜华尔街>+ <华尔街之狼> 2. <野蛮大陆> 3. <第三帝国的最后十四天> 4. ...
Java接口之间的继承
/** * Created by xfyou on 2016/11/3. * 多接口之间的继承 */ public class HorrorShow { static void u(Monster b ...
MyBatis入门（一）
一.MyBaris简介 1)MyBaris发展过程 MyBatis的前身叫iBatis,本是apache的一个开源项目, 2010年这个项目由apache software foundation 迁移 ...
神奇的Bank系统之旅哦
奋斗不能等待,我们不能等到垂暮之年再去“全力以赴”.让我们从现在开始,为理想而努力,为人生而拼搏.精诚所至,金石为开,相信奋斗会让我们的青春之花绽放得更加绚烂,让我们的人生之路走下来不留遗憾. ...

WPF学习之路（十一）布局

WPF学习之路（十一）布局的更多相关文章

随机推荐

热门专题