杭州做家教网站,网站建设思路,wordpress 哪些插件,C2C电子商务网站管理系统第3章#xff1a;布局
本章目标
理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用
理解 WPF 中的布局
WPF 布局原则
WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面#xff0c;需要在窗口上放置一个容器#x…第3章布局
本章目标
理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用
理解 WPF 中的布局
WPF 布局原则
WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面需要在窗口上放置一个容器然后在这个容器中添加其他元素。造成这一限制的原因是 Window 类继承自 ContentControl 类在后续章节中将进一步分析ContentControl类。
布局过程
WPF 布局包括两个阶段测量measure阶段和排列arange阶段。在测量阶段容器遍历所有子元素并询问子元素它们所期望的尺寸。在排列阶段容器在合适的位置放置子元素。
当然元素未必总能得到最合适的尺寸—有时容器没有足够大的空间以适应所含的元素。在这种情况下容器为了适应可视化区域的尺寸就必须剪裁不能满足要求的元素。在后面可以看到通常可通过设置最小窗口尺寸来避免这种情况。
注意 布局容器不能提供任何滚动支持.相反滚动是由特定的内容控件ScrollViewer—一提供的ScrollViewer 控件几乎可用于任何地方。 布局容器
所有 WPF 布局容器都是派生自 System.Windows.Controls.Panel 抽象类的面板见下图。Panel 类添加了少量成员包括三个公有属性下表列出了这三个公有属性的详情。 名称说明Background该属性是用于为面板背景着色的画刷。如果想接收鼠标事件就必须将该属性设置为非空值如果想接收鼠标事件又不希望显示固定颜色的背景那么只需要将背景色设置为透明即可Children该属性是在面板中存储的条目集合。这是第一级条目—换句话说这些条目自身也可以包含更多的条目。IsItemsHost该属性是一个布尔值如果面板用于显示与 ItemsControl 控件关联的项例如TreeView 控件中的节点或列表框中的列表项该属性值为 true。在大多数情况下甚至不需要知道列表控件使用后台面板来管理它所包含的条目的布局。但如果希望创建自定义的列表以不同方式放置子元素例如以平铺方式显示图像的 ListBox控件该细节就变得很重要了。
就Panel基类本身而言没有什么特别的但它是其他更多特类的起点。WPF提供了大量可用于安排布局的继承自Panel的类下表中列出了其中几个最基本的类。与所有 WPF控件和大多数可视化元素一样这些类位于 System. Windows.Controls 名称空间中。
名称说明StackPanel在水平或垂直的堆栈中放置元素。这个布局容器通常用于更大、更复杂窗口中的一些小区域.WrapPanel在一系列可换行的行中放置元素。在水平方向上WrapPanel 面板从左向右放置条目然后在随后的行中放置元素。在垂直方向上WrapPanel 面板在自上而下的列中放置元素并使用附加的列放置剩余的条目.DockPanel根据容器的整个边界调整元素Grid根据不可见的表格在行和列中排列元素这是最灵活、最常用的容器之一.UnitformGrid在不可见但是强制所有单元格具有相同尺寸的表中放置元素这个布局容器不常用.Canvas使用固定坐标绝对定位元素。这个布局容器与传统 Windows 窗体应用程序最相似但没有提供锚定或停靠功能。因此对于尺寸可变的窗口该布局容器不是合适的选择。如果选择的话需要另外做一些工作。
StackPanel 面板
StackPanel 面板是最简单的布局容器之一。该面板简单地在单行或单列中以堆栈形式放置其子元素。例如下面的代码段中窗口包含4个按钮。
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800StackPanelLabelA Button Stack/LabelButtonbutton1/ButtonButtonbutton2/ButtonButtonbutton3/ButtonButtonbutton4/Button/StackPanel
/Window 认情况下StackPane 面板按自上而下的顺序推列元素使每个元素的高度适合它的内≥。在这个示例中这底味老标签和技钮的大小刚好足够适应它们内部包含的文本。所有元素都被拉伸到 SatckPane 面板的整个宽度这也是窗口的宽度。如果加宽窗口StackPanel 面板也会变宽并且按钮也会拉伸自身以适应变化。
通过设置 Oricntation 属性StackPanel 面板也可用于水平排列元素
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800StackPanel OrientationHorizontalLabelA Button Stack/LabelButton MinWidth100button1/ButtonButton MinWidth100button2/ButtonButton MinWidth100button3/ButtonButton MinWidth100button4/Button/StackPanel
/Window 布局属性
尽管布局由容器决定但子元素仍有一定的决定权。实际上布局面板支持一小组布局属性以便与子元素结合使用下表中列出了这些布局属性。
名称说明HorizontalAlignment前水平方向上新额外的空闲时该属性决定了子元素在布局容器中如何定位。可选用 Center、Left、 Right 或 Stretch 等属性值。VerticalAlignment当垂直方向上有额外的空闲时该属性决定了子元素在布局容中如何定位。可选用 Center、Top、Bottom 或 Stretch 等属性值。Margin该属性用于在元素的周围添加一定的空间.Margin 属性是 System.Windows.Thickness结构的一个实例该结构具有分别用于为顶部、底部、左边和右边添加空间的独立组件。MinWidth 和 MinHeight这两个属性用于设置元素的最小尺寸。如果一个元素对于其他布局容器来说太大该元素将被剪裁以适合容器。MaxWidth 和 MaxHeight这两个属性用于设置元素的最大尺寸。如果有更多可以使用的空间那么在扩展子元素时就不会超出这一限制即使将 HorizontalAlignment 和 VerticalAlignment 属性设置为 Stretch 也同样如此。Width 和 Height这两个属性用于显式地设置元素的尺寸。这一设置会重写为 HorizontalAlignment 和VerticalAlignment 属性设置的 Stretch 值。但不能超出MinWidth、MinHeight、MaxWidth 和 MaxHeight 属性设置的范。
对齐方式
通常对于 Label 控件HorizontalAligament 属性的值默认为 Lef对于 Button 控件HorzontalAlignment 属性的售默认为 Streteh。这也是为什么每个技钮的宽度被调整为控列的宽度的原因所在。但可以改变这些细节 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800StackPanelLabel HorizontalAlignmentCenterA Button Stack/LabelButton HorizontalAlignmentLeftbutton1/ButtonButton HorizontalAlignmentRightbutton2/ButtonButtonbutton3/ButtonButtonbutton4/Button/StackPanel
/Window
现在前两个按钮的尺寸是它们应当具有的最小尺寸并进行了对齐而底部两个按钮被拉伸至整个 SiackPanel面板的宽度。如果改变窗口的尺寸就会发现标签保持在中间位置而前两个按钮分别被粘贴到两边。
注意 SiackPanel面板也有自己的HorizontalAlignment 和 VerticalAlignment 属性。这两个属性职认都被设置为 Stretch所以 StackPanel 面板完全充满它的容器、在这个示例中这意味着stackPanel西板充滿整个窗口。如果使用不同设置StackPanel 面板的尺寸将足够宽以容纳最宽的控件。 边距
在SackPane示例中在当前情况下存在一个明显的问题。设计良好的窗口不只是包含元素—还应当在元素之间包貪一定的额外空间。为了添加额外的空间并使StaokPanel 面板示例中的按钮不那么紧密可为控件设置边距。
当设置边距时可为所有边设置相同的宽度如下所示
Button Margin5button3/Button 相应地也可为控件的每个边以左、上、右、下的顺序设置不同的边距
Button Margin5,10,5,10Button 3/Button 在代码中使用 Thickness 结构来设置边距
btn. Margin new Thickness (5) ; 为得到正确的控件边距需要采用一些艺术手歐因內需要考慮相邻控件边距改置的相互影响。例如如果两个技钮堆在一起位于最高处的技钮的底部边距设置为5而下面技钮的顶部边距也设置为5那么在这两个按钮之间就有10个单位的空间。
理想情况是能尽可能始终如一地保持不同的边距设置避免为不同的边设置不同的值。 例如在StackPanel示例中为按钮和面板本身使用相同的边距是比较合适的如下所示
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800StackPanel Margin5Label Margin3 HorizontalAlignmentCenterA Button Stack/LabelButton Margin3 HorizontalAlignmentLeftbutton1/ButtonButton Margin3 HorizontalAlignmentRightbutton2/ButtonButton Margin3button3/ButtonButton Margin3button4/Button/StackPanel
/Window 尺寸设置
最后每个元素都提供了 Height 和 Width 属性用于显式地指定元素大小。但这种设置一般不是一个好主意。相反如有必要应当使用最大尺寸和最小尺寸属性将控件限制在正确范围内。
提示 在WPF中显式地设置尺寸之前一定要三思。在良好的布局设计中不必显式地设置尺寸. 如果确实添加了尺寸信息那就冒险创建了一种更不稳定的布局这种布局不能适应变化例如不能适应不同的语言和不同的窗口尺寸而且可能剪裁您的内容. 例如您可能决定拉伸 StackPanel 容器中的按钮使其适合 StackPanel但其宽度不能超过200单位也不能小于100单位默认情况下最初按钮的最小宽度是75单位。
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800StackPanel Margin5Label Margin3 HorizontalAlignmentCenterA Button Stack/LabelButton Margin3 MaxWidth200 MinWidth100button1/ButtonButton Margin3 MaxWidth200 MinWidth100button2/ButtonButton Margin3 MaxWidth200 MinWidth100button3/ButtonButton Margin3button4/Button/StackPanel
/Window 当 StackPanel 调整按钮的尺寸时需要考虑以下几部分信息
最小尺寸: 每个按钮的尺寸始终不能小于最小尺寸。最大尺寸: 每个按钮的尺寸始终不能超过最大尺寸除非执行错误操作使最大尺寸比最小尺寸还小内容: 如果按钮中的内容需要更大的宽度StackPanel 容器会尝试扩展技钮可以通过检查 DesiredSized 属性确定所需的按钮大小该属性返回最小宽度或内容的宽度返回两者中较大的那个。容器尺寸: 如果最小宽度大于 StackPanel 面板的宽度按钮的一部分将被剪裁掉。否则不允许按钮比 StackPanel 面板更宽即使不能适合按钮表面的所有文本也同样如此。水平对齐方式: 因为默认情况下按钮的 HorizontalAlignment 属性值设置为Stretch所以 StackPanel 面板将尝试放大按钮以占满 StackPanel 面板的整个宽度。
Border 控件
Border控件不是布局面板而是非常便于使用的元素经常与布局面板一起使用。所以在继续介绍其他布局面板之前现在先介绍一下 Border 控件是有意义的。
Border 类非常简单。它只能包含一段嵌套内容通常是布局面板并为其添加背景或在其周围添加边框。为了深入地理解Border 控件只需要掌握下表中列出的属性就可以了。
名称说明Barckground使用Brush 对象设置边框中所有内容后面的背景。可使用固定颜色背景也可使用其他更特殊的背景.BorderBush和BorderThickness使用Brush 对象设置位于Border 对象边缘的边框的颜色并设置边框的宽度。为显示边框必须设置这两个属性.CornerRadius该属性可使边框具有雅致的圆角。ComerRadius 的值越大圆角效果就越明显.Padding该属性在边框和内部的内容之间添加空间与此相对Margin 属性在边框之外添加空间.
下面是一个具有轻微圆角效果的简单边框该边框位于一组按钮的周围这组按钮包含在一个StackPanel 面板中
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Border Margin5 Padding5 BackgroundLightYellowBorderBrushSteelBlue BorderThickness3,3,3,5 CornerRadius3VerticalAlignmentTopStackPanel Button Margin3button1/ButtonButton Margin3button2/ButtonButton Margin3button3/Button/StackPanel/Border
/Window WrapPanel 和 DockPanel 面板
WrapPanel 面板
WrapPanel 面板在可能的空间中以一次一行或一列的方式布置控件。默认情况下WrapPanel.Orientation 属性设置为 Horizontal控件从左向右进行排列再在下一行中排列。但可将 WrapPanel.Orientation 属性设置为 Vertical从而在多个列中放置元素。
提示 与StackPanel 面板类似WrapPanel 面板实际上主要用来控制用户界面中一小部分的布局细节并非用于控制整个窗口布局。例如可能使用 WrapPanel面板以类似工具栏控件的方式将所有按钮保持在一起。 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800WrapPanel Margin3Button VerticalAlignmentTopButton1/ButtonButton MinHeight60Button2/ButtonButton VerticalAlignmentBottomButton3/ButtonButtonButton4/ButtonButton VerticalAlignmentCenterButton5/Button/WrapPanel/Window
注意 WrapPanel 面板是唯一一个不能通过灵活使用Grid 面板代替的面板。 DockPanel 面板
DockPanel 面板是更有趣的布局选项。它沿着一条外边缘来拉伸所包含的控件。理解该面板最简便的方法是考虑一下位于许多 Windows 应用程序窗口顶部的工具栏。这些工具栏停靠到窗口顶部。与 StackPanel 面板类似被停靠的元素选择它们布局的一个方面。例如如果将一个按钮停靠在DockPanel 面板的顶部该按钮会被拉伸至 DockPanel 面板的整个宽度但根据内容和 MinHfeight 属性为其设置所需的高度。而如果将一个按钮停靠到容器左边该技钮的高度将被拉伸以适应容器的高度而其宽度可以根据需要自由增加。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800!--LastChildFill最后一个子元素填充--DockPanel LastChildFillTrueButton DockPanel.DockTop上/ButtonButton DockPanel.DockBottom下/ButtonButton DockPanel.DockLeft左/ButtonButton DockPanel.DockRight右/ButtonButton中间/Button/DockPanel/Window
案例2 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800!--DockPanel.Dock停靠方向LastChildFill最后一个子元素填充HorizontalAlignment水平对齐方式MinWidth:最小宽度--DockPanel LastChildFillTrueButton DockPanel.DockTop上-1/ButtonButton DockPanel.DockTop HorizontalAlignmentCenter MinWidth200上-2/ButtonButton DockPanel.DockTop HorizontalAlignmentLeft MinWidth200上-3/ButtonButton DockPanel.DockBottom下/ButtonButton DockPanel.DockLeft左/ButtonButton DockPanel.DockRight右/ButtonButton中间/Button/DockPanel/Window
嵌套布局容器
很少单独使用 StackPanel、WrapPanel 和 DockPanel 面板。相反它们通常用来设置一部分用户界面的布局。例如可使用 DockPanel 面板在窗口的合适区域放置不同的 StackPanel 和WrapPane 面板容器。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800!--LastChildFill:最后一个子元素填充DockPanel.Dock:停靠方向HorizontalAlignment:水平对齐方式Orientation排列方向(水平/垂直)Margin外边距Padding内边距--DockPanel LastChildFillTrueStackPanel DockPanel.DockBottom HorizontalAlignmentRight OrientationHorizontalButton Margin10,10,2,10 Padding3OK/ButtonButton Margin2,10,10,10 Padding3Cancel/Button/StackPanelTextBox DockPanel.DockTop这是一个文本框/TextBox/DockPanel/Window
提示 如果有一棵茂密的嵌套元素树很可能看不到整个结构。Visual Studio 提供了一个方使的功能用于显示一棵表示各个元素的树并允许您通过逐步单击进入希望查看或修改的元素。 这一功能是指 Document Outline 窗口可通过选择 View | Other Windows | Document Outline 菜单项来显示该窗口。 Grid 面板
Grid 面板是WPF 中功能最强大的布局容器。很多使用其他布局控件能完成的功能用Grid面板也能实现。Grid 面板也是将窗口分割成可使用其他面板进行管理的更小区域的理想工具。实际上由于 Grid 面板十分有用因此在 Visual Studio 中为窗口添加新的XAML 文档时会自动添加 Grid 标签作为顶级容器并嵌套在 Window 根元素中。
Grid 面板将元素分隔到不可见的行列网格中。尽管可在一个单元格中放置多个元素这时这些元素会相互重叠但在每个单元格中只放置一个元素通常更合理。当然在Grid 单元格中的元素本身也可能是另一个容器该容器组织它所包含的一组控件。
提示 尽管Grid面板被设计成不可见的但可将 Grid.ShowGridlines 属性设置汐 true从而更清晰她观察Gird 面板。这一特性并不是真正试图美化窗口反而是为了方便调试设计该特性旨在帮助理解 Grid 面板如何将其自身分制成多个较小的区域。这一特性十分童要因为通过该特性可准确控制 Grid 面板如何选择列宽和行高。 需要两个步骤来创建基于 Crd 面板的布局。首先选择希望使用的行和列的数厭。然后为每个包含的元素指定恰当的行和列从而在合适的位置放置元素。
Grid 面板通过使用对象填充 Grid.ColumnDefinitions和 Grid. Row Definiti ons 集合来创建网格和行。例如如果确定需要两行和三列可添加以下标签 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid ShowGridLinesTrue!--行--Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitions!--列--Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions/Grid/Window
为在单元格中放置各个元素需要使用 Row 和Columm 附加属性。这两个属性的值都是从0开始的索引数。例如以下标记演示了如何创建Grid面板并使用按钮填充Grid 面板的部分单元格。
此处存在例外情况。如果不指定 Grid Row 属性Grid 面板会假定该属性的值为0。对于Crid. Column 属性也是如此。因此在 Grid 面板的第一个单元格中放置元素时可不指定这两个属性。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid ShowGridLinesTrue!--行--Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitions!--列--Grid.ColumnDefinitionsColumnDefinition/ColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsButton Grid.Row0 Grid.Column0button1-1/ButtonButton Grid.Row0 Grid.Column1button1-2/ButtonButton Grid.Row1 Grid.Column1button2-2/ButtonButton Grid.Row1 Grid.Column2button2-3/Button/Grid/Window
调整行和列
Grid 面板支持以下三种设置尺寸的方式 绝对设置尺寸方式: 使用设备无关单位准确地设置尺寸。这是最无用的策略因为这种策略不够灵活难以适应内容大小和容器大小的改变而且难以处理本地化。 自动设置尺寸方式: 每行和每列的尺寸刚好满足需要。这是最有用的尺寸设置方式。 按比例设置尺寸方式。按比例将空间分割到一组行和列中。这是对所有行和列的标准设置。
可通过将ColumnDefinition 对象的Width 属性或 RowDefinition 对象的 Height 属性设置为数值来确定尺寸设置方式。例如下面的代码显示了如何设置100 设备无关单位的绝对宽度。
ColumnDefinition Width100/ColumnDefinition为使用自动尺寸设置方式可使用Auto值
ColumnDefinition WidthAuto/ColumnDefinition最后为了使用按比例尺寸设置方式需要使用*号
ColumnDefinition Width*/ColumnDefinition 如果希望不均匀地分割剩余空间可指定权重权重必须放在星号之前。例如如果有两行是按比例设置尺寸并希望第一行的高度是第二行高度的一半那么可以使用如下设置来分配剩余空间
RowDefinition Height*/RowDefinition
RowDefinition Height2*/RowDefinition案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid ShowGridLinesTrue!--行--Grid.RowDefinitionsRowDefinition Height*/RowDefinition HeightAuto//Grid.RowDefinitions!--HorizontalAlignment:水平对齐方式Orientation:排列方向Margin外边距--TextBox Margin10 Grid.Row0这是一个文本框/TextBoxStackPanel Grid.Row1 HorizontalAlignmentRight OrientationHorizontalButton Margin10,10,2,10OK/ButtonButton Margin2,10,10,10Cancel/Button/StackPanel/Grid/Window
跨越行和列
您已经看到如何使用 Row 和 Calum 附加属性在单元格中放置元素。还可以使用另外两个附加属性使元素跨越多个单元格这两个附加属性是 RowSpan和ColurmSpan。这两个属性使用元素将会占有的行数和列数进行设置。
例如下面的按钮将占据第一行中的第一个和第二个单元格的所有空间
Button Grid.Row0 Grid.Column0 Grid.RowSpan2跨行/Button 下面的代码通过跨越两列和两行拉伸按钮使其占据所有4个单元格
Button Grid.Row0 Grid.Column0 Grid.RowSpan2 Grid.ColumnSpan2跨行并跨列/Button案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid UseLayoutRoundingTrue Grid.RowDefinitionsRowDefinition Height*/RowDefinition HeightAuto//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition Width*/ColumnDefinition WidthAuto/ColumnDefinition WidthAuto//Grid.ColumnDefinitionsTextBox Margin10 Grid.Row0 Grid.Column0 Grid.ColumnSpan3这是一个文本框/TextBoxButton Margin10,10,2,10 Padding3 Grid.Row1 Grid.Column1OK/ButtonButton Margin2,10,10,10 Padding3 Grid.Row1 Grid.Column2Cancel/Button/Grid/Window
分割窗口
每个 Windows 用户都见过分割条一能将窗口的一部分与另一部分分离的可拖动分割器 例如当使用Windows 资源管理器时会看到一系列立件实在左边和一系列文件在右边、可拖动它们之间的分割条来确定每部分占据窗口的比例。
理解如何使用 GridSplitter 类,从而得到所期望的效果需要一定的经验。下面列出几条指导原则
GrdSpliter 对象必须放在Grid 单元格中。可与已经存在的内容一并放到单元格中这时循要调整边距设置使它们不相互重叠。更好的方法是预留一列或一行专门用于放置 Gridspliter对象并将预留行或列的Heigh 或 Width 属性的值设置为 Auto。Gridspliter 对象总是改变整行或整列的尺寸而非改变单个单元格的尺寸。为使Cridspliter对象的外观和行为保持一致需要拉伸Gridsplitter 对象使其穿越整行或整列而不是将其限制在单元格中。为此可使用前面介绍过的RowSpan或ColumnSpan 属性。最初GridSpliter 对象很小不易看见。为了使其更可用需要为其设置最小尺寸。对于竖直分割条需要将 VericalAlignment 属性设置为stretch使分割条填满区域的整个高度并将 Width 设置为固定值如10个设备无关单位。对于水平分割条需要设置 HorizontalAlignmeat 属性来拉伸并将 Height 属性设置为固定值。Gridspliter 对齐方式还决定了分割条是水平的用于改变行的尺寸还是竖直的用于改变列的尺寸。对于水平分割条需要将 VerticalAlignment 属性设置为Center这也是默认值以指明拖动分割条改变上面行和下面行的尺寸。对于竖直分割条需要将 HorizontalAlignment 属性设置为 Center以改变分割条两侧列的尺寸。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid UseLayoutRoundingTrue !--行设置--Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitions!--列设置--Grid.ColumnDefinitionsColumnDefinition MinWidth100/ColumnDefinition WidthAuto/ColumnDefinition MinWidth50//Grid.ColumnDefinitions!--按钮--Button Grid.Row0 Grid.Column0 Margin3left-1/ButtonButton Grid.Row0 Grid.Column2 Margin3right-1/ButtonButton Grid.Row1 Grid.Column0 Margin3left-2/ButtonButton Grid.Row1 Grid.Column2 Margin3right-1/Button!--分割线--!--ShowsPreview:是否显示预览--GridSplitter Grid.Row0 Grid.Column1 Grid.RowSpan2 Width3 VerticalAlignmentStretch HorizontalAlignmentCenter ShowsPreviewFalse/GridSplitter/Grid/Window
上面的标记还包含了一处额外的细节。在声明GridSplitter 对象时将 ShowsPreview 属性设置为 false .因此当把分割线从一边拖到另一边时会立即改变列的尺寸。但是如果将 ShowsPreview 属性设置为 true,当拖动分割条时就会看到一个灰色的阴影跟随鼠标指针用于显示将在何处进行分割。并且直到释放了鼠标键之后列的尺寸才改变。如果GridSplitter 对象获得了焦点可可以使用箭头改变相应的尺寸。
如果希望分割条以更大的幅度如每次10个单位进行移动可调整DragIncrement 属性。
提示 可以改变 GridSplitter 对象的填充方式使其不只是具有阴影的灰色矩形。技巧是使用Background 属性应用填充该属性接受简单的颜色或更复杂的画刷。 Grid 面板通常包含多个 GridSpliter 对象。然而可以在一个 Grid 面板中嵌套另一个Grid面板而且如果确实在 Grid 面板中嵌套了Grid 面板那么每个Grid 面板可以有自己的GridSplitter对象。这样就可以创建被分割成两部分如左边窗格和右边窗格的窗口然后将这些区域如右边的窗格进一步分成更多的部分例如可调整大小的上下两部分。
案例2 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid UseLayoutRoundingTrue !--列设置:3列--Grid.ColumnDefinitionsColumnDefinition MinWidth100/ColumnDefinition WidthAuto/ColumnDefinition MinWidth50//Grid.ColumnDefinitions!--左侧Grid--Grid Grid.Column0!--行设置2行--Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitionsButton Margin3 Grid.Row0Top Left/ButtonButton Margin3 Grid.Row1Bottom Left/Button/Grid!--分割线--!--ShowsPreview:是否显示预览--GridSplitter Grid.Column1 Grid.RowSpan2 Width3 VerticalAlignmentStretch HorizontalAlignmentCenter ShowsPreviewFalse/GridSplitter!--右侧Grid--Grid Grid.Column2!--行设置3行--Grid.RowDefinitionsRowDefinition/RowDefinition HeightAuto/RowDefinition//Grid.RowDefinitionsButton Margin3 Grid.Row0Top Right/ButtonButton Margin3 Grid.Row2Bottom Right/ButtonGridSplitter Grid.Row1 Height3 VerticalAlignmentCenter HorizontalAlignmentStretch ShowsPreviewFalse/GridSplitter/Grid/Grid/Window
共享尺寸组
正如在前面看到的Grid 面板包含一个行列集合可以明确地按比例确定行和列的尺寸或根据其子元素的尺寸确定行和列的尺寸。还有另一种确定一行或一列尺寸的方法—与其他行或列的尺寸相匹配。这是通过称为“共享尺寸组”Shared size groups的特性实现的。
共享尺寸组的目标是保持用户界面独立部分的一致性。例如可能希望改变一列的尺寸以适应其内容并改变另一列的尺寸使其与前面一列改变后的尺寸相匹配。然而共享尺寸组的真正优点是使独立的Grid 控件具有相同的比例。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid Grid.IsSharedSizeScopeTrue Margin3!--设置行3行--Grid.RowDefinitionsRowDefinition/RowDefinition Heightauto/RowDefinition//Grid.RowDefinitions!--上方Grid--Grid Margin3 BackgroundLightYellow ShowGridLinesTrue!--设置列3列--!--SharedSizeGroup共享尺寸组--Grid.ColumnDefinitionsColumnDefinition Widthauto SharedSizeGroupTextLabel/ColumnDefinition Widthauto/ColumnDefinition//Grid.ColumnDefinitionsLabel Margin5 Grid.Column0这是一个长的文本/LabelLabel Margin5 Grid.Column1其他文本/LabelTextBox Margin5 Grid.Column2这是一个文本框/TextBox/Grid!--中间标签--Label Grid.Row1这是中间的标签/Label!--下方Grid--Grid Grid.Row2 Margin3 BackgroundLightCoral ShowGridLinesTrue!--设置列2列--!--SharedSizeGroup共享尺寸组--Grid.ColumnDefinitionsColumnDefinition Widthauto SharedSizeGroupTextLabel/ColumnDefinition//Grid.ColumnDefinitionsLabel Margin5 Grid.Column0短的/LabelTextBox Margin5 Grid.Column1这是一个文本框/TextBox/Grid/Grid/Window
UnitformGrid 面板
有一种网格不遵循前面讨论的所有原则–UniformGrid 面板。与Grid 面板不同UaifommCrid 面板不需要(甚至不支持)预先定义的列和行。相反通过简单地设置Rows 和Colurs 属性来设置其尺寸。每个单元格始终具有相同的大小因为可用的空间被均分。最后元素根据定义的顺序被放置到适当的单元格中。UniformGrid 面板中没有 Row和 Column 附加属性也没有空白单元格。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800!--Rows:行数Columns列数--UniformGrid Rows2 Columns2ButtonTop Left/ButtonButtonTop Right/ButtonButtonButtom Left/ButtonButtonButtom Right/Button/UniformGrid/Window
Canvas 面板
Canvas 面板允许使用精确的坐标放潭元案如果设计数据驱动的富窗体和标准对话框这并非好的选择但如果需要构建其他一些不同的内容例如为图形工具创建绘图表面Canvas 面板可能是个有用的工具。Canvas面板还是最轻量级的布局容器。这是因为 Canvas面板没有包含任何复杂的布局逻辑用以改变其子元素的首选尺寸。Canvas 面板只是在指定的位置放置其子元素并且其子元素具有所希望的精确尺寸。
为在 Canvas 面板中定位元素需要设置 Canvas.Left 和 Canvas,Top 附加属性。Canvas.Left 属性设置元素左边和 Canvas 面板左边之间的单位数Canvas.Top 属性设置子元素顶边和Canvas 面板顶边之间的单位数。同样这些数值也是以设备无关单位设置的当将系统DPI设置为 96 dpi 时设备无关单位恰好等于通常的像素。
注意 另外可使用 Canvas.Right 属性而不是 Canvas.Lef 属性来确定元素和 Canvas 面板右边缘间的距离可使用 Canvas.Bottom 属性而不是 Canvas.Top 属性来确定元素和 Canvas 面板底部边缘的距离。不能同时使用 Canvas.Right 和 Canvas. Left 属性也不能同时使用 Canvas.Top 和Canvas.Bottom 属性。 案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800!--Canvas.Left: 左边距Canvas.Top: 上边距Width: 宽度Height: 高度--CanvasButton 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)/Button/Canvas/Window
Z 轴坐标
如果 Canvas 面板中有多个互相重叠的元素可通过设置Canvas ZIndex 附加属性来控制它们的层叠方式。
添加的所有元素通常都具有相同的 Zlndex 值—0。如果元素具有相同的 ZIndex 值就按它们在Canvas.Children 集合中的顺序进行显示这个顺序依赖于元素在 XAMIL 标记中定义的顺序。
lnkCanvas 元素
WPF 还提供了 InkCanvas 元素它与 Canvas 面板在某些方面是类似的而在其他方面却完全不同。和 Canvas 面板一样InkCanvas 元素定义了4个附加属性Top、Left、Bottom 和 Righn可将这4个附加属性应用于子元素以根据坐标进行定位。然而基本的内容区别很大—零际上InkCanvas 类不是派生自 Canvas类甚至也不是派生自 Pane 基类而是直接派生自FrameworkElement类。
InkCanvas元素的主要目的是用于接收手写笔输入。手写笔是一种在平板 PC 中使用的类似于钢笔的输入设备然而InkCanvas 元素同时也可使用鼠标进行工作就像使用手写笔一样。因此用户可使用鼠标在 InkCanvas 元素上绘制线条或者选择以及操作 InkCanvas 中的元素。
InkCanvas 元素实际上包含两个子内容集合。一个是为人熟知的Children集合它保存任意元素就像 Canvas 面板一样。每个子元素可根据Top、Lef、Bottom 和 Right属性进行定位。另一个是Strokes 集合它保存 System.Windows.Ink.Stroke 对象该对象表示用户在 InkCanvas。元素上绘制的图形输入。用户绘制的每条直线或曲线都变成独立的 Stroke 对象。得益于这两个集合可使用 InkCanvas 让用户使用存储在 Strokes 集合中的笔画stroke为保存在Children 集合中的内容添加注释。
根据为 EditingMode 属性设置的值可以采用截然不同的方式使用 InkCanvas 元素。下表列出了所有选项
名称说明InkInkCanvas 元素允许用户绘制批注这是默认模式。当用户用鼠标或手写笔绘图时会绘制笔画.GestureOnlyInkCanvas 元素不允许用户绘制笔画批注但会关注预先定义的特定姿势例如在某个方向拖动手写笔或涂画内容•能识别的姿势的完整列表由 System.Windows. Ink.Application Gesture 枚举给出.InkAndGestureInkCanvas元素允许用户绘制笔画批注也可以识别预先定义的姿势.EraseByStroke当单击笔画时InkCanvas 元素会擦除笔画。如果用户使用手写笔可使用手写笔的底端切换到该模式可使用只读的 ActiveEditingMode 属性确定当前编辑模式也可通过改变EditingModelinverted 属性来改变手写笔的底端使用的工作模式EraseByPoint当单击笔画时InkCanvas 元素会擦除笔画中被单击的部分笔画上的一个点SelectInkCanvas 面板允许用户选择保存在Children集合中的元素。要选择一个元素用户必须单击该元素或拖动“套索”选择该元素。一旦选择一个元素就可以移动该元素、改变其尺寸或将其删除NoneInkCanvas 元素忽略鼠标和手写笔输入。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800InkCanvas NameinkCanvas BackgroundLightYellow EditingModeInk/InkCanvas/Window
inkCanvas 元素会引发多种事件当编辑模式改变时会引发 ActiveEditingModeCbanged 事件在 GestureOnly 或 InkAndGesture 模式下删除姿势时会引发Gesture 事件绘制完笔画时会引发SrokeColleoted 事件擦除笔画时会引发 StokeErasing 事件和StrokeErased 事件在 Select 模式下选择元素或改变元素时会引发 SelectionChanging 事件、SelectionChanged 事件、SelectionMoving 事件、SelectionMoved 事件、SelectionResizing 事件和 SelectionResized 事件。其中名称以 “ing”结尾的事件表示动作将要发生但可以通过设置 EventATgs 对象的Cancel属性取消事件。
在Select 模式下InkCanvas 元素可为拖动以及操作内容提供功能强大的设计界面。下图显示了 InkCanvas 元素中的一个按钮控件左图中显示的是该按钮被选中的情况而右图中显示的是选中该按钮后改变其位置和尺寸的情况。
案例2 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800InkCanvas NameinkCanvas BackgroundLightYellow EditingModeSelectButton InkCanvas.Top20 InkCanvas.Left50hello/Button/InkCanvas/Window
布局示例
列设置
布局容器如Grid面板使得窗口创建整个布局结构变得非常容易。例如下图中显示的窗口及设置。该窗口在一个表格结构中排列各个组件–标签、文本框以及按钮。
案例1 Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid Margin3,3,10,3 ShowGridLinesFalse!--行设置--Grid.RowDefinitionsRowDefinition Heightauto/RowDefinition Heightauto/RowDefinition Heightauto/RowDefinition Heightauto//Grid.RowDefinitions!--列设置--Grid.ColumnDefinitionsColumnDefinition Widthauto/ColumnDefinition Width*/ColumnDefinition Widthauto//Grid.ColumnDefinitionsLabel Grid.Row0 Grid.Column0 Margin3 VerticalAlignmentCenterHome:/LabelTextBox Grid.Row0 Grid.Column1 Margin3 Heightauto VerticalAlignmentCenterc:\/TextBoxButton Grid.Row0 Grid.Column2 Margin3 Padding2Browser/ButtonLabel Grid.Row1 Grid.Column0 Margin3 VerticalAlignmentCenterNetwork:/LabelTextBox Grid.Row1 Grid.Column1 Margin3 Heightauto VerticalAlignmentCentere:\work/TextBoxButton Grid.Row1 Grid.Column2 Margin3 Padding2Browser/ButtonLabel Grid.Row2 Grid.Column0 Margin3 VerticalAlignmentCenterWeb:/LabelTextBox Grid.Row2 Grid.Column1 Margin3 Heightauto VerticalAlignmentCenterc:\/TextBoxButton Grid.Row2 Grid.Column2 Margin3 Padding2Browser/ButtonLabel Grid.Row3 Grid.Column0 Margin3 VerticalAlignmentCenterSecondary:/LabelTextBox Grid.Row3 Grid.Column1 Margin3 Heightauto VerticalAlignmentCenterc:\/TextBoxButton Grid.Row3 Grid.Column2 Margin3 Padding2Browser/Button/Grid/Window
动态内容
在以下示例中用户界面可选择短文本和长文本。当使用长文本时包含文本的按钮会自动改变其尺寸而其它内容也会相应的调整位置。并且因为改变了尺寸的按钮共享同一布局容器所以整个用户界面都会改变尺寸。最终的结果是所有按钮保持一致的尺寸—最大按钮的尺寸。
案例1 xaml代码
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width800Grid!--行设置--Grid.RowDefinitionsRowDefinition Height*/RowDefinition Heightauto//Grid.RowDefinitions!--列设置--Grid.ColumnDefinitionsColumnDefinition Widthauto/ColumnDefinitionColumnDefinition Width*/ColumnDefinition/Grid.ColumnDefinitionsStackPanel Grid.Row0 Grid.Column0Button x:NamecmdPrev Margin10,10,10,3Prev/ButtonButton x:NamecmdNext Margin10,3,10,3Next/ButtonCheckBox x:NamechkLong Margin10,10,10,10 UncheckedchkLong_Unchecked CheckedchkLong_Checked Show Long Text/CheckBox/StackPanelTextBox Grid.Row0 Grid.Column1 Grid.RowSpan2 Margin0,10,10,10 TextWrappingWrapWithOverflowComputer viruses are artificially created programs that are destructive, infectious, and latent, causing damage to computer information or systems. It does not exist independently, but is hidden within other executable programs. After being infected with a virus in a computer, it can affect the running speed of the machine, and in severe cases, it can cause system crashes and damage; Therefore, viruses cause significant losses to users, and typically, these destructive programs are referred to as computer viruses/TextBoxButton Grid.Row1 Grid.Column0 NamecmdClose Margin10,3,10,10Close/Button/Grid
/Window
c#代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace WpfApp1
{/// summary/// Window1.xaml 的交互逻辑/// /summarypublic partial class Window1 : Window{public Window1(){InitializeComponent();}private void chkLong_Checked(object sender, RoutedEventArgs e){this.cmdPrev.Content --Go to the previous Window;this.cmdNext.Content Go to Next Window--;}private void chkLong_Unchecked(object sender, RoutedEventArgs e){this.cmdPrev.Content Prev;this.cmdNext.Content Next;}}
}
组合式用户界面
许多布局容器如 StackPanel 面板、DockPanc面板以及 WrapPanel 面板可以采用灵活多变的柔性方式非常得体地将内容安排到可用窗口空间中。该方法的优点是它允许创建真正的组合式界面。换句话说可在用户界面中希望显示的恰当部分插入不同的面板而保留用户界面的其他部分。整个应用程序本身可以相应地改变界面这与Web 门户站点有类似之处。
下图展示了一个组合式用户界面在一个WrapPanel 面板中放置几个独立的面板。用户可以通过窗口顶部的复选框选择显示这些面板中的哪些面板。 视图代码
Window x:ClassWpfApp1.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:WpfApp1mc:IgnorabledTitleWindow1 Height450 Width700GridGrid.RowDefinitionsRowDefinition Heightauto/RowDefinition Height*//Grid.RowDefinitionsStackPanel Grid.Row0 Margin3 BackgroundLightYellow OrientationHorizontalCheckBox Namechb1 IsCheckedTrue ClickCheckBox_ClickPanel1/CheckBoxCheckBox Namechb2 IsCheckedTrue ClickCheckBox_ClickPanel2/CheckBoxCheckBox Namechb3 IsCheckedTrue ClickCheckBox_ClickPanel3/CheckBoxCheckBox Namechb4 IsCheckedTrue ClickCheckBox_ClickPanel4/CheckBox/StackPanelWrapPanel Namecontainer Grid.Row1 BackgroundLightBlueGrid MinWidth200 Namepnl1Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsButton Grid.Row0 Grid.Column0 MinWidth50 MinHeight50 Margin101/ButtonButton Grid.Row0 Grid.Column1 MinWidth50 MinHeight50 Margin102/ButtonButton Grid.Row1 Grid.Column0 MinWidth50 MinHeight50 Margin103/ButtonButton Grid.Row1 Grid.Column1 MinWidth50 MinHeight50 Margin104/Button/GridTabControl MinWidth400 Namepnl2TabItem HeaderPage1 VerticalAlignmentCenter HorizontalAlignmentCenterLabel内容1/Label/TabItemTabItem HeaderPage2Label内容2/Label/TabItem/TabControlStackPanel Width200 Namepnl3Label计算机病毒是人为制造的有破坏性又有传染性和潜伏性的对计算机信息或系统起破坏作用的程序。/LabelButton Width80 Margin5,40,5,5Ok/ButtonButton Width80 Margin5,5,5,5Cancel/Button/StackPanelGrid MinWidth200 Namepnl4Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitionsButton Grid.Row0 Grid.Column0 MinWidth50 MinHeight50 Margin101/ButtonButton Grid.Row0 Grid.Column1 MinWidth50 MinHeight50 Margin102/ButtonButton Grid.Row1 Grid.Column0 MinWidth50 MinHeight50 Margin103/ButtonButton Grid.Row1 Grid.Column1 MinWidth50 MinHeight50 Margin104/Button/Grid/WrapPanel/Grid/Window
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace WpfApp1
{/// summary/// Window1.xaml 的交互逻辑/// /summarypublic partial class Window1 : Window{public Window1(){InitializeComponent();}private void CheckBox_Click(object sender, RoutedEventArgs e){CheckBox chb sender as CheckBox;string index chb.Name.Substring(3,1);// 在适当的位置调用FindName方法FrameworkElement rootElement this.FindName(container) as FrameworkElement;FrameworkElement control LogicalTreeHelper.FindLogicalNode(rootElement, pnlindex) as FrameworkElement;if (chb.IsCheckedtrue){control.Visibility Visibility.Visible; }else{control.Visibility Visibility.Collapsed; }}}
}
Visibility 属性是 UIElement 基类的一部分因此放置于WPF窗口中的任何内容都支持该属性。该属性可使用三个值它们来自 System.Windows.Visibility 枚举如下表所示
值说明Visibility元素在窗口中正常显示Collapsed元素不显示也不占用任何空间。Hidden元素不显示但仍为其保留空间。
本章小结
本章详细介绍了 WPF布局模型并讨论了如何以堆栈、网格以及其他排列方式放置元素可使用嵌套的布局容器组合创建更复杂的布局可结合使用 GridSplitter 对象创建可变的分割窗口。本章一直非常关注这一巨大变化的原因—WPF 布局模型在保持、加强以及本地化用户界面方面所具有的优点。
布局内容远不止这些接下来的几章还将列举更多使用布局容器组织元素分组的示例还将学习允许在窗口中排列内容的几个附加功能
特殊容器可以使用 ScrdlIViewer、Tabltem 以及 Expander 控件滚动内容、将内容放到单独的选项卡中以及折叠内容。与布局面板不同这些容器只能包含单一内容。不过可以很容易地组合使用这些容器和布局面板以便准确实现所需的效果。第6 章将尝试使用这些容器。Viewbox需要一种方法来改变图形内容如图像和矢量图形的尺寸吗Viewbox 是另一种特殊容器可帮助您解决这一问题而且 Viewbox 控件内置了缩放功能。文本布局WPF 新增了用于确定大块格式化文本布局的新工具。可使用浮动图形和列表并且可以使用分页、分列以及更复杂、更智能的換行功能来获得非常完美的结果。
课后作业
无
