不知道是谁做的网站 输入学号,软件开发计划模板,微信小程序开发基础,wordpress博客主题中文在日常开发中#xff0c;有些布局非常具有规律性#xff0c;比如相同的列宽#xff0c;行高#xff0c;均匀的排列等#xff0c;为了简化开发#xff0c;WPF提供了UniformGrid布局和ItemsControl容器#xff0c;本文以一个简单的小例子#xff0c;简述#xff0c;如何…在日常开发中有些布局非常具有规律性比如相同的列宽行高均匀的排列等为了简化开发WPF提供了UniformGrid布局和ItemsControl容器本文以一个简单的小例子简述如何在WPF开发中应用UniformGrid和ItemsControl实现均匀的布局仅供学习分享使用如有不足之处还请指正。 什么是UniformGrid? 在WPF开发中提供了一种Grid网格布局此布局应用灵活形式多样在使用之前需要定义行列设置高度宽度等内容使用相对复杂。为了简化布局针对具有等宽等高的布局提供了一种更加简化的布局容器UniformGrid。
UniformGrid【统一布局】提供一种在网格(网格中的所有单元格都具有相同的大小)中排列内容的方法。 UniformGrid常用属性 UniformGird中同一行中列等宽同一列中行等高。常用属性为
Margin获取或设置元素的外边距。Name元素的标识名称Opacity透明度Width/Height宽度和高度Visibility该元素可见性Rows获取或设置网格中的行数Columns获取或设置网格中的列数FirstColumn 获取或设置网格第一行中前导空白单元格的数量必须小于属性的值 Columns
注意UniformGrid相当于简化版的Gird但并不是Grid的子类而是和Grid同级都继承于与Panel类。 UniformGrid示例 UniformGrid中如果不设置子元素的控件大小会根据容器的大小和行列数自动填充。如下所示
UniformGrid Columns4 Margin5Button Content按钮1 Margin2/ButtonButton Content按钮2 Margin2/ButtonButton Content按钮3 Margin2/ButtonButton Content按钮4 Margin2/ButtonButton Content按钮5 Margin2/ButtonButton Content按钮6 Margin2/Button
/UniformGrid 关于UniformGrid有以下几点需要注意
如果设置了Columns没有设置Rows则会根据元素个数和列数自动计算行数。
如果设置了Rows没有设置Columns则会根据元素个数和行数自动计算列数。
如果RowsColumns都没有设置则会根据元素个数自动匹配建议至少设置一个否则可能与预期的布局不符。
如果没有设置容器中元素的大下则自动填充如果设置了容器中元素的大小且小于容器为该元素分配的平均大小则以元素为准其他以空白填充如果设置了元素大小且元素的大小大于容器为该元素分配的平均大小则多余部分会隐藏只显示能够显示的那部分。 什么是ItemsControl? ItemsControl条目控件用于显示数据项集合它允许按照自定义方式呈现任何类型的对象可以在其中使用不同的布局和面板来展示数据。ItemsControl非常灵活可以满足各种需求。 ItemsControl涉及知识点 ItemsControl的常用知识点如下
ItemTemplate是DataTemplate类型可以通过ItemTemplate设置条目项的呈现方式。ItemsPanel是ItemsPanelTemplate类型可以通过ItemsPanel设置容器中各个条目项的布局方式。ItemsSource可以通过绑定数据源为ItemsControl设置内容。Items条目列表如果设置了ItemsSource则此属性不生效。 ItemsControl示例 以下示例以文本的形式展示了每一个条目项且默认元素以横向排列。如下所示
ItemsControl ItemsSource{Binding Customers}ItemsControl.ItemTemplateDataTemplateTextBlock Text{Binding Name} //DataTemplate/ItemsControl.ItemTemplateItemsControl.ItemsPanelItemsPanelTemplateStackPanel //ItemsPanelTemplate/ItemsControl.ItemsPanel
/ItemsControl ItemsControl和UniformGrid结合 结合ItemsControl【数据绑定条目项自定义设置】和UniformGrid【等高等宽】各自的优点创建一个图片列表。具体步骤如下
自动识别文件夹中的图片然后将数据源绑定到ItemsControl中进行呈现。ItemsControl中的条目项中展示图片缩略图和名称且条目项中的图片等比缩放。条目布局采用UniformGrid且每行显示5张图。图片较多时要有滚动条所以需要设置ScrollViewer。
在Xaml中页面布局如下所示
ScrollViewer VerticalScrollBarVisibilityAutoItemsControl ItemsSource{Binding ImageItems} Background#eeeeeeItemsControl.ItemsPanelItemsPanelTemplateUniformGrid Columns5/UniformGrid/ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateStackPanel OrientationVertical Margin3Image Source{Binding ImagePath} StretchUniform/ImageTextBlock Text{Binding ImageName} HorizontalAlignmentCenter VerticalAlignmentBottom/TextBlock/StackPanel/DataTemplate/ItemsControl.ItemTemplate/ItemsControl
/ScrollViewer 其中ItemsSource属性用于绑定数据源在ViewModel层进行构造如下所示
public class MainWindowViewModel
{public ObservableCollectionImageItem ImageItems { get; set; }public MainWindowViewModel(){ImageItems new ObservableCollectionImageItem();for(int i 0; i 8; i){for(int j 0; j 5; j){var imageName ${i1}.{j1}.jpg;var imagePath Path.Combine(Environment.CurrentDirectory, imgs, imageName);ImageItems.Add(new ImageItem(){ImageName imageName,ImagePath imagePath});}}}
} 运行示例如下所示 以上就是【浅谈WPF之UniformGrid和ItemsControl】的全部内容关于更多详细内容可参考官方文档。希望能够一起学习共同进步。
