漳州微信网站建设,简单个人网站开发,高安网站制作,wordpress 分享到微信C# WPF编程-布局 布局WPF布局原则布局过程布局容器布局属性Border控件 常用布局StackPanel布局WrapPanel布局DockPanel布局Grid布局UniformGrid布局Canvas布局InkCanvas布局 布局
WPF布局原则
WPF窗口只能包含单个元素。为在WPF窗口中放置多个元素并创建更贴近实用的用户界面… C# WPF编程-布局 布局WPF布局原则布局过程布局容器布局属性Border控件 常用布局StackPanel布局WrapPanel布局DockPanel布局Grid布局UniformGrid布局Canvas布局InkCanvas布局 布局
WPF布局原则
WPF窗口只能包含单个元素。为在WPF窗口中放置多个元素并创建更贴近实用的用户界面需要在窗口上放置一个容器然后在这个容器中添加其他元素。 造成这一限制的原因是Window类继承自ContentControl类。
在WPF窗口布局需要遵循以下几条重要原则
不应显示设定元素的尺寸元素应当可以改变尺寸以适合他们的内容。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围。不应使用屏幕坐标指定元素的位置元素应当由它们的容器根据它们之间的尺寸、顺序以及其他特定于具体布局容器的信息进行排列。元素之间添加空白空间可使用Margin属性。布局容器的子元素“共享”可用的空间如果空间允许布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸。可嵌套的布局容器典型的用户界面使用Grid面板作为开始Grid面板是WPF中功能最强大的容器Grid面板可包含其他布局容器包含的这些容器以更小的分组排列元素如带有标题的文本框、列表框中的项、工具栏上的图标以及一列按钮等。
布局过程
WPF布局包括两个阶段测量(measure)阶段和排列(arrange)阶段。测量阶段容器遍历所有子元素并询问子元素它们所期望的尺寸。排列阶段容器在合适的位置放置子元素。 注意布局容器不能提供任何滚动支持。滚动是由特定的内容控件-ScrollViewer提供。
布局容器
所有WPF布局容器都是派生自System.Windows.Controls.Panel抽象类的面板。Panel类添加了少量成员包括三个共有属性。 Panel类的共有属性
Background该属性是用于为面板背景着色的画刷。Children该属性是在面板中存储的条目集合。IsItemsHost该属性是一个布尔值如果面板用于显示与ItemsControls控件关联的项该属性值为true。
核心布局面板
StackPanel在水平或垂直的堆栈中放置元素。WrapPanel在一系列可换行的行中放置元素。水平方向从左到右放置元素。垂直方向从上到下放置元素。DockPanel更加容器的整个边界调整元素。Grid根据不可见的表格在行个列中排列元素这是最灵活、最常用的容器之一。UniformGrid在不可见但是强制所有单元格具有相同尺寸的表中放置元素。Canvas使用固定坐标绝对定位元素。对于尺寸可变的窗口不适合使用该布局容器。
StackPanel和WrapPanel面板主要用来控制用户界面中一小部分的布局细节并非用于控制整个窗口布局。
更专业的面板
TabPanel在TabPanel面板中包含多个选项卡。ToolbarPanel工具栏中的多个按钮。ToolbarOverflowPanelToolbar控件的溢出菜单中的多个命令。VirtualizingStackPanel数据绑定列表控件使用该面板以大幅降低开销。InkCanvas该控件和Canvas控件类似但该控件支持处理平板电脑上的手写笔输入。
布局属性
名称说明HorizontalAlignment当水平方向上有额外的空间时该属性决定了子元素在布局中如何定位。可选值Center、Left、Right或Stretch等属性值VerticalAlignment当垂直方向上有额外的空间时该属性决定了子元素在布局中如何定位。可选值Center、Top、Bottom或Stretch等属性值Margin该属性用于在元素的周围添加一定的空间。顶部、底部、左边、右边添加空间MinWidth和MinHeight这两个属性用于设置元素的最小尺寸MaxWidth和MaxHeight这两个属性用于设置元素的最打尺寸Width和Height这两个属性用于设置元素的尺寸
Border控件
Border控件不是布局面板而是非常便于使用的元素经常与布局面板一起使用。 Border类的属性
Background使用Brush对象设置边框中所有内容后面的背景。BorderBrush和BroderThickness使用Brush对象设置位于Border对象边缘的边框的颜色并设置边框的宽度。为显示边框必须设置这两个属性CornerRadius该属性设置边框圆角Padding该属性在边框和内部的内容之间添加空间
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid Namegrid1Border Margin5 Padding5 BackgroundLightGreenBorderBrushSteelBlue BorderThickness3,5,3,5CornerRadius8 VerticalAlignmentTopStackPanel OrientationVertical Margin5Label Margin3 HorizontalAlignmentCenter按钮 StackPanel布局/LabelButton Margin3,0,0,0 MaxWidth200 MinWidth100按键1/ButtonButton HorizontalAlignmentRight按键2/ButtonButton HorizontalAlignmentStretch按键3/Button/StackPanel/Border/Grid
/Window常用布局
StackPanel布局
Window x:ClassWpfHelloWorld.Window1xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleWindow1 Height450 Width800StackPanelLabel按钮 StackPanel布局/LabelButton按键1/ButtonButton按键2/ButtonButton按键3/Button/StackPanel
/Window 通过设置Orientation属性改变排列方向 StackPanel Orientation“Horizontal” 水平方向 StackPanel Orientation“Vertical” 垂直方向
StackPanel OrientationVerticalLabel HorizontalAlignmentCenter按钮 StackPanel布局/LabelButton HorizontalAlignmentLeft按键1/ButtonButton HorizontalAlignmentRight按键2/ButtonButton HorizontalAlignmentStretch按键3/Button
/StackPanelWrapPanel布局
WrapPanel面板在可能得空间中以一次一行或一列的方式布局控件。
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid Namegrid1WrapPanel Margin10Button VerticalAlignmentTopTop Button/ButtonButton MinHeight80 Tall Button/ButtonButton VerticalAlignmentBottomBottom Button/ButtonButtonStretch Button/ButtonButton VerticalAlignmentCenterCentered Button/Button/WrapPanel/Grid
/Window DockPanel布局
DockPanel面板沿着一条外边缘来拉伸所包含的控件。
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid Namegrid1DockPanel LastChildFillTrueButton DockPanel.DockTopTop Button/ButtonButton DockPanel.DockBottomBottom Button/ButtonButton DockPanel.DockLeftLeft Button/ButtonButton DockPanel.DockRightRight Button/ButtonButtonRemaining Space/Button/DockPanel/Grid
/Window Grid布局
Grid面板是WPF中功能最强大的布局容器。Grid面板也是将窗口分割成更小区域的理想工具。Grid面板常作为窗口的顶级容器。Grid.ShowGridLines属性设置为true,可以显示面板网格线。 Grid面板通过使用对象填充Grid.ColumnDefinitions和Grid.RowDefinitions集合来创建网格。
Grid布局定义
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesTrue Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitions!-- 三列 --ColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitions/Grid
/Window Grid布局添加元素
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesTrue Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitions!-- 三列 --ColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinitionColumnDefinition/ColumnDefinition/Grid.ColumnDefinitions!-- 网格布局添加元素 --Button Grid.Row0 Grid.Column0Top Left/ButtonButton Grid.Row0 Grid.Column1Middle Left/ButtonButton Grid.Row1 Grid.Column2Bottom Right/ButtonButton Grid.Row1 Grid.Column1Bottom Middle/Button/Grid
/Window 调整行和列 Grid面板支持一次三种设置尺寸的方式
绝对设置尺寸方式使用设备无关点位的准确地设置尺寸。难以适应内容大小和容器大小的改变。自动设置尺寸方式每行和每列的尺寸刚好满足需要。这是最有用的尺寸设置方式。按比例设置尺寸方式按比例将空间分割到一组行和列中。这是对所有行和列的标准设置。
绝对宽度 ColumnDefinition Width“100” /ColumnDefinition自动尺寸 ColumnDefinition Width“Auto” /ColumnDefinition比例尺寸 ColumnDefinition Width“*” /ColumnDefinition
如有两行时按比例设置尺寸第一行的高度是第二行高度的一半 RowDefinition Height“*” /RowDefinition RowDefinition Height“2*” /RowDefinition
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesTrue Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition Height*/RowDefinitionRowDefinition Height2*/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitions!-- 三列 --ColumnDefinition Width100/ColumnDefinitionColumnDefinition WidthAuto/ColumnDefinitionColumnDefinition Width*/ColumnDefinition/Grid.ColumnDefinitions!-- 网格布局添加元素 --Button Grid.Row0 Grid.Column0Top Left/ButtonButton Grid.Row0 Grid.Column1Middle Left/ButtonButton Grid.Row1 Grid.Column2Bottom Right/ButtonButton Grid.Row1 Grid.Column1Bottom Middle/Button/Grid
/Window Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesTrue Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition Height*/RowDefinitionRowDefinition HeightAuto/RowDefinition/Grid.RowDefinitionsTextBox Margin10 Grid.Row0测试文本/TextBoxStackPanel Grid.Row1 HorizontalAlignmentRight OrientationHorizontalButton Margin10,20,2,20 Padding3确认/ButtonButton Margin2,10,10,10 Padding5取消/Button/StackPanel/Grid
/Window 跨越行和列 使元素跨越多个单元格的属性RowSpan和ColumnSpan。
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesTrue Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition Height*/RowDefinitionRowDefinition HeightAuto/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width*/ColumnDefinitionColumnDefinition WidthAuto/ColumnDefinitionColumnDefinition WidthAuto/ColumnDefinition/Grid.ColumnDefinitionsTextBlock Margin10 Grid.Row0 Grid.Column0 Grid.ColumnSpan3 BackgroundGreen测试文本/TextBlockButton Margin10,10,10,10 Padding3 Grid.Row1 Grid.Column1OK/ButtonButton Margin2,20,20,20 Padding5 Grid.Row1 Grid.Column2Cancel/Button/Grid
/Window 分割窗口 在WPF中分割条由GridSplitter类表示它是Grid面板的功能之一。
GridSplitter对象必须放在Grid单元格中。GridSpliiter对象总是改变整行或整列的尺寸。最初GridSplitter对象很小不易看见。对于垂直分割条需要将VerticalAlignment属性设为Stretch并将Width设置为固定值。对于水平分割条需要设置HorizontalAlignment属性来拉伸并将Height属性设置为固定值。GridSplitter对齐方式还决定了分割条是水平的还垂直的。
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height450 Width800Grid ShowGridLinesFalse Namegrid1Grid.RowDefinitions!-- 两行 --RowDefinition/RowDefinitionRowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition MinWidth100/ColumnDefinitionColumnDefinition WidthAuto/ColumnDefinitionColumnDefinition MinWidth50/ColumnDefinition/Grid.ColumnDefinitionsButton Grid.Row0 Grid.Column0 Margin3Left/ButtonButton Grid.Row0 Grid.Column2 Margin3Right/ButtonButton Grid.Row1 Grid.Column0 Margin3Left/ButtonButton Grid.Row1 Grid.Column2 Margin3Left/ButtonGridSplitter BackgroundGreen Grid.Row0 Grid.Column1 Grid.RowSpan2Width10 VerticalAlignmentStretch HorizontalAlignmentCenterShowsPreviewFalse /GridSplitter/Grid
/Window
ShowsPreview“False”
ShowsPreview“True” 共享尺寸组 还有一种确定一行或一列尺寸的方法–与其他行或列的尺寸相匹配。共享尺寸的目标是保持用户界面独立部分的一致性。
UniformGrid布局
UniformGrid Rows2 Columns2ButtonTop Left/ButtonButtonTop Right/ButtonButtonBottom Left/ButtonButtonBottom Right/Button
/UniformGridCanvas布局
Canvas面板允许使用精确的坐标放置元素。可以构建如为图形工具创建绘图表面。为在Canvas面板中定位元素需要设置Canvas.Left和Canvas.Top附加属性也可以设置Canvas.Right和 Canvas.Bottom附加属性。
Window x:ClassWpfHelloWorld.Window1xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleWindow1 Height450 Width800CanvasButton Canvas.Left10 Canvas.Top10(10,10)/ButtonButton Canvas.Left120 Canvas.Top30(120,30)/ButtonButton Canvas.Left60 Canvas.Top80 Width50 Height50(60,80)/ButtonButton Canvas.Left70 Canvas.Top120 Width100 Height50(70,120)/ButtonButton Canvas.Right200 Canvas.Bottom200 Width100 Height100(R200,B200)/Button/Canvas
/Window Z顺序 如果Canvas面板中有多个相互重叠的元素可通过设置Canvas.ZIndex附加属性来控制它们的层叠方式。添加的元素通常默认具有相同的ZIndex值0。如果元素ZIndex值相同就按他们在Canvas.Children集合中的顺序进行显示依赖于元素在XAML标记中的定义顺序。 代码调用Canvas.SetZIndex(val)方法,亦可设置新的ZIndex值。
Button Canvas.Left60 Canvas.Top80 Canvas.ZIndex1 Width50 Height50(60,80)/ButtonInkCanvas布局
InkCanvas元素的主要目的是用于接收鼠标和手写笔输入。例如包含一幅图片的InkCanvas元素可以通过鼠标或手写板进行涂鸦。
Window x:ClassWpfHelloWorld.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:sysclr-namespace:System;assemblymscorlibxmlns:localclr-namespace:WpfHelloWorldmc:IgnorabledTitleMainWindow Height600 Width800InkCanvas NameinkCanvas BackgroundLightYellow EditingModeInkImage Sourceimages/1.jpg InkCanvas.Top10 InkCanvas.Left10 Width500 Height600/Image/InkCanvas/Window InkCanvasEditingMode枚举值
名称说明InkInkCanvas元素允许用户绘制批注默认。GestureOnlyInkCanvas元素不允许用户绘制画笔批注。但支持特定手势如拖动。能识别的手势由System.Windos.Ink.ApplicationGesture枚举定义。InkAndGesture允许用户绘制画笔也可也识别预定手势EraseByStroke当单击笔画时InkCanvas元素会擦除画笔。EraseByPoint当单击笔画时擦除笔画中被点击的部分笔画上的一个点Select允许用户选择保存在Children集合中的元素。None忽略鼠标和手写板输入
