小吃店网站建设,太原网站排名推广,wordpress文章保存目录,番禺制作网站技术了解
WPF中所有布局如下#xff0c;我们一一尝试实现#xff0c;本文档主要以图形化的形式展示每个布局的功能。 布局#xff1a; Border、 BulletDecorator、 Canvas、 DockPanel、 Expander、 Grid、 GridView、 GridSplitter、 GroupBox、 Panel、 ResizeGrip、 Separat…了解
WPF中所有布局如下我们一一尝试实现本文档主要以图形化的形式展示每个布局的功能。 布局 Border、 BulletDecorator、 Canvas、 DockPanel、 Expander、 Grid、 GridView、 GridSplitter、 GroupBox、 Panel、 ResizeGrip、 Separator、 ScrollBar、 ScrollViewer、 StackPanel、 Thumb、 Viewbox、 VirtualizingStackPanel、 Window和 WrapPanel。
布局
Border边框
主要用于绘制另一个元素四周的边框和/或背景样式。
Border 只能有一个子级。 若要显示多个子元素需要在父 Border内放置一个附加Panel元素。 然后可以在该 Panel 元素中放置子元素。以下展示存放两个元素就会出现报错 如果要在内容周围显示边框必须将元素放在父 Border 元素中。
效果 代码 !--margin为外边距--!--borderthickness为边框的厚度--Border BorderBrushGreen BorderThickness10 Margin10,10,663,322 BackgroundGrayLabel Contentborder展示//Border
BulletDecorator子弹头装饰
表示一个布局控件该控件将项目符号与另一个可视对象对齐。 BulletDecorator简单来说就是用来控制项目布局的其布局方式分为从左往右默认、从右往左是通过FlowDirection属性来设置的
效果 可能遇到的问题
读者如果遇到运行前图片可以显示但是运行后图片显示不了的情况右键图片属性将其生成操作更改为资源并重写生成项目解决方案 BulletDecorator只能添加一个子元素可以配合WrapPanel、StackPanel等控件一起使用进行布局。 代码 !--VerticalAlignment垂直对齐--BulletDecorator Margin0,118,0,0 VerticalAlignmentTop BackgroundYellowBulletDecorator.BulletImage Sourceimages\Z_W_H_.png Height20//BulletDecorator.Bullet!--TextWrapping文字换行 NoWrap不进行换行将所有元素都显示在同一行上 Wrap按字符换行 WrapWithOverflow按空格换行,并且即使该单词显示不出来也不换行--TextBlock FontSize20 Width264 TextWrappingNoWrap HorizontalAlignmentLeft Foreground PurpleA Simple BulletDecorator/TextBlock/BulletDecoratorBulletDecorator Margin0,148,0,0 VerticalAlignmentTop BackgroundYellow FlowDirectionRightToLeftBulletDecorator.BulletImage Sourceimages\Z_W_H_.png Height20//BulletDecorator.Bullet!--TextWrapping文字换行 NoWrap不进行换行将所有元素都显示在同一行上 Wrap按字符换行 WrapWithOverflow按空格换行,并且即使该单词显示不出来也不换行--TextBlock FontSize20 Width264 TextWrappingNoWrap HorizontalAlignmentLeft Foreground PurpleA Simple BulletDecorator/TextBlock/BulletDecorator
Canvas画布
定义一个区域可在其中使用相对于 Canvas 区域的坐标以显式方式来定位子元素。通过topleftbottomright设置相对于父元素的位置
效果 代码 Canvas Margin10,178,554,42Canvas Height100 Width100 Top0 Left0 BackgroundRed/Canvas Height100 Width100 Top100 Left100 BackgroundGreen/Canvas Height100 Width100 Top50 Left50 BackgroundBlue//Canvas
DockPanel停靠面板
定义一个区域从中可以按相对位置水平或垂直排列各个子元素。
停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序并将根据指定的边进行停靠多个停靠在同侧的元素则按顺序排序。在DockPanel中指定停靠边的控件会根据定义的顺序占领边角所有控件绝不会交叠。
默认情况下后添加的元素只能使用剩余空间无论对DockPanel的最后一个子元素设置任何停靠值该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域可以将DockPanel属性LastChildFill设置为false还必须为最后一个子元素显式指定停靠方向。
效果一 代码一 DockPanel Margin526,285,0,0Button DockPanel.DockLeft ContentButtonLeft/ButtonButton DockPanel.DockTop ContentButtonTop/ButtonButton DockPanel.DockRight ContentButtonRight/ButtonButton DockPanel.DockBottom ContentButtonBottom/ButtonButton ContentButtonTop/Button/DockPanel
效果二 代码二 DockPanel LastChildFillFalse Margin165,285,279,0 Button DockPanel.DockLeft ContentButtonLeft/ButtonButton DockPanel.DockTop ContentButtonTop/ButtonButton DockPanel.DockRight ContentButtonRight/ButtonButton DockPanel.DockBottom ContentButtonBottom/ButtonButton DockPanel.DockTop Content最后一个Button不填充剩余空间/Button/DockPanel
Expander扩展器
表示一种控件该控件显示具有可折叠内容显示窗口的标题。
效果 代码 !--HorizontalAlignment水平对齐--!--ExpandDirection内容窗口的打开方向--!--Header设置控件的标题--!--IsExpanded初始的时候窗口是否可见--Expander NamemyExpander BackgroundTan HorizontalAlignmentLeft HeaderMy Expander ExpandDirectionDown IsExpandedTrue Width100 Margin165,10,0,322TextBlock TextWrappingWrapLorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua/TextBlock/Expander
Grid网格
定义由列和行组成的灵活的网格区域。
效果 代码 !--ShowGridLines网格线在此 Grid 中是否可见。--Grid VerticalAlignmentTop HorizontalAlignmentLeft ShowGridLinesTrue Width250 Height100 Margin362,13,0,0!--ColumnDefinitions列定义--Grid.ColumnDefinitionsColumnDefinition /ColumnDefinition /ColumnDefinition //Grid.ColumnDefinitions!--RowDefinitions行定义--Grid.RowDefinitionsRowDefinition /RowDefinition /RowDefinition /RowDefinition //Grid.RowDefinitions!--ColumnSpan指示 Grid 中的子内容所跨越的总列数。--TextBlock FontSize20 FontWeightBold Grid.ColumnSpan3 Grid.Row02005 Products Shipped/TextBlock!--Row显示 Grid 中的哪个子内容行。--!--Column显示 Grid 中的子内容的列。--!--FontWeight指定所需的字体粗细--TextBlock FontSize12 FontWeightExtraLight Grid.Row1 Grid.Column0Quarter 1/TextBlockTextBlock FontSize12 FontWeightBlack Grid.Row1 Grid.Column1Quarter 2/TextBlockTextBlock FontSize12 FontWeightBold Grid.Row1 Grid.Column2Quarter 3/TextBlockTextBlock Grid.Row2 FontWeightDemiBold Grid.Column050000/TextBlockTextBlock Grid.Row2 FontWeightExtraBlack Grid.Column1100000/TextBlockTextBlock Grid.Row2 FontWeightExtraBold Grid.Column2150000/TextBlockTextBlock FontSize16 FontWeightHeavy Grid.ColumnSpan3 Grid.Row3Total Units: 300000/TextBlock/Grid
GridView显示数据表格
表示 ListView 控件的以列形式显示数据项的视图模式。
GridView视图模式是ListView控件的视图模式中的一种。
效果 代码
前端 ListView x:NameUserListView Margin236,148,350,156ListView.ViewGridViewGridView.ColumnsGridViewColumn DisplayMemberBinding{Binding UserName} Header用户名/GridViewColumn DisplayMemberBinding{Binding Password} Header密码/GridViewColumn DisplayMemberBinding{Binding Level} Header权限等级//GridView.Columns/GridView/ListView.View/ListView
后台 public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Window_Loaded(object sender, RoutedEventArgs e){UserListView.ItemsSource GetNameList();}public ListUserList GetNameList(){ListUserList list new ListUserList();list.Add(new UserList() { Level 1, UserName John, Password Doe });list.Add(new UserList() { Level 2, UserName Jane, Password Doe });list.Add(new UserList() { Level 3, UserName Tom, Password Smith });list.Add(new UserList() { Level 4, UserName Jerry, Password Wang });list.Add(new UserList() { Level 5, UserName Linda, Password Li });return list;}}public class UserList{ public string UserName { get;set; }public string Password { get;set; }public int Level {get;set; }}
GridSplitter
表示重新分布 Grid 控件的列间距或行间距的控件。
效果 代码 Grid Margin487,217,67,176 ShowGridLinesTrue BackgroundAliceBlueGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition//Grid.ColumnDefinitions!--通过 GridSplitter 覆盖列的边缘来调整 中 Grid 列的大小。--GridSplitter Grid.Column 0 BackgroundBlue Height10 HorizontalAlignmentStretch VerticalAlignmentTop/GridSplitter Grid.Column 0 BackgroundBlue Width10 HorizontalAlignmentRight VerticalAlignmentStretch/GridSplitter Grid.Column 0 BackgroundBlue Width10 HorizontalAlignmentLeft VerticalAlignmentStretch/GridSplitter Grid.Column 1 BackgroundBlue Width10 HorizontalAlignmentRight VerticalAlignmentStretch/Border Grid.Row0 Grid.Column0 BorderBrushRed BorderThickness2/Border/GridGrid Margin514,63,40,330 ShowGridLinesTrue BackgroundAliceBlueGrid.ColumnDefinitionsColumnDefinition/ColumnDefinition WidthAuto/ColumnDefinition//Grid.ColumnDefinitions!--定义 一个 GridSplitter 以重设中的 Grid 列大小并占用 中的 Grid列。--!--ShowsPreview指示 GridSplitter 控件在用户拖动控件时是否更新列大小或行大小。--GridSplitter Grid.Column1 HorizontalAlignmentCenter VerticalAlignmentStretch BackgroundBlack ShowsPreviewTrue Width5 /Border Grid.Row0 Grid.Column0 BorderBrushRed BorderThickness2/Border/Grid
GroupBox
表示一个控件该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。
效果 代码
前端 GroupBox Margin1070,0,685,0GroupBox.HeaderLabelEmployee Data/Label/GroupBox.HeaderStackPanelTabControl NamemyTabControl TabStripPlacementTop Margin0, 0, 0, 10 Height350 TabItem NamePersonalInfoTabItem.Header_Personal Info/TabItem.HeaderStackPanelTextBlockEmployee/TextBlockTextBlockSelect your name/TextBlockListBox NameempName SelectionChangedupdateSummaryListBoxItem IsSelectedtrueEsther/ListBoxItemListBoxItemGeorge/ListBoxItemListBoxItemAlan/ListBoxItemListBoxItemEric/ListBoxItem/ListBox/StackPanel/TabItemTabItemTabItem.Header_Job Info/TabItem.HeaderStackPanelTextBlockSelect a job/TextBlockListBox Name job SelectionChangedupdateSummaryListBoxItem IsSelectedtrueProgrammer/ListBoxItemListBoxItemTester/ListBoxItemListBoxItemWriter/ListBoxItemListBoxItemManager/ListBoxItem/ListBox/StackPanel/TabItemTabItem NameSkillTabItem.Header_Skill/TabItem.HeaderStackPanelTextBlockSelect your strongest skill/TextBlockListBox Nameskills SelectionChangedupdateSummaryListBoxItem IsSelectedtrueC#/ListBoxItemListBoxItemVisual Basic/ListBoxItemListBoxItem.NET/ListBoxItemListBoxItemJScript/ListBoxItem/ListBox/StackPanel/TabItemTabItem NameSummary TabItem.HeaderSu_mmary/TabItem.HeaderStackPanelTextBlock Nameemp/TextBlock Nameejob/TextBlock Nameeskill//StackPanel/TabItem/TabControlButton ContentShow Summary ClickgoToSummaryTab//StackPanel/GroupBox
Panel
为所有 Panel 元素提供基类。 使用 Panel 元素放置和排列 WPF应用程序中的子对象。
效果 代码 StackPanel Margin832,48,1083,288ButtonButton 1/ButtonButtonButton 2/Button/StackPanel
ResizeGrip
表示 Thumb 控件的一种实现该控件使 Window 能改变其自身的大小。
ResizeGrip 定义为 的可视化树的一 Window部分。
效果
代码
Separator
用于分隔项控件中各个项的控件。
效果 代码 ToolBarTray BackgroundWhite Margin839,131,1083,276ToolBar Band1 BandIndex1Button Content1/ButtonButton Content1/ButtonButton Content1/ButtonSeparator/Button Content1/ButtonButton Content1/ButtonButton Content1/ButtonSeparator/Button Content1/ButtonButton Content1/Button/ToolBar/ToolBarTray
ScrollBar
表示提供滚动条的控件该滚动条具有一个滑动 Thumb其位置对应于一个值。
效果 代码
ScrollBar OrientationHorizontal Width 4inScrollOnScroll Minimum1 Maximum100 /
ScrollViewer
表示可包含其他可视元素的可滚动区域。
效果 代码 ScrollViewer HorizontalScrollBarVisibilityAuto Margin1446,28,421,197StackPanel VerticalAlignmentTop HorizontalAlignmentLeftTextBlock TextWrappingWrap Margin0,0,0,20Scrolling is enabled when it is necessary. Resize the window, making it larger and smaller./TextBlockRectangle FillRed Width500 Height500/Rectangle/StackPanel/ScrollViewer
StackPanel 效果 代码 StackPanel Margin832,48,1083,288ButtonButton 1/ButtonButtonButton 2/Button/StackPanel Thumb
表示可以由用户拖动的控件。 Thumb还可用于调整控件的大小。 例如 Thumb 窗口一角的控件可以提供一个位置供用户使用鼠标单击以开始调整大小操作。
效果
代码
Viewbox
定义一个内容修饰器以便拉伸或缩放单一子项使其填满可用的控件。
效果
代码
VirtualizingStackPanel
在水平或垂直的一行中排列并显示内容。
效果
代码
Window窗口
提供创建、配置、显示和管理窗口和对话框的生存期的能力。
我们新建一个wpf应用程序后就包含一个window布局元素
用户与独立应用程序之间的交互点是一个窗口。 效果 代码
Window x:ClassWpfApp2.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:localclr-namespace:WpfApp2mc:IgnorabledTitleMainWindow Height450 Width800/WindowWrapPanel
按从左到右的顺序位置定位子元素在包含框的边缘处将内容切换到下一行。 后续排序按照从上至下或从右至左的顺序进行具体取决于 Orientation 属性的值。
效果 代码 Border HorizontalAlignmentLeft VerticalAlignmentTop BorderBrushBlack BorderThickness2 Margin1766,88,0,0WrapPanel BackgroundLightBlue Width200 Height100Button Width200Button 1/ButtonButtonButton 2/ButtonButtonButton 3/ButtonButtonButton 4/Button/WrapPanel/Border
参考文献
WPF 介绍 | Microsoft Learn
WPF 介绍 | Microsoft Learn
WPF图片问题运行前可以看见运行后不见了_wpf运行图片不显示-CSDN博客
WPF教程四布局之DockPanel面板 - .NET开发菜鸟 - 博客园 (cnblogs.com)
C# Wpf Binding 使用详解_c# binding-CSDN博客
