ItemsControl 使用Grid布局

时间:2022-09-15 10:23:00

ItemsControl控件经常用到,在ItemsPanel里大多是StackPanel,WrapPanel,以下项目演示如何使用Grid用于ItemsControl布局

1.先看运行效果

ItemsControl 使用Grid布局

2.xaml代码如下

 <Window x:Class="GridHelperDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:GridHelperDemo="clr-namespace:GridHelperDemo"
Title="MainWindow"
Height=""
Width="">
<Window.DataContext>
<GridHelperDemo:StatisticItemList>
<GridHelperDemo:StatisticItem Index=""
Name="张三"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="李四"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="老王"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="小李"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="大强"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="崔颢"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="明月"
Value="" />
<GridHelperDemo:StatisticItem Index=""
Name="阿辉"
Value="" />
</GridHelperDemo:StatisticItemList>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center"
FontSize=""
Text="根据ItemsSource生成行" />
<!--根据ItemsSource生成行-->
<ItemsControl ItemsSource="{Binding}"
Grid.Row="">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
51 <Grid GridHelperDemo:GridHelper.RowsCount="{Binding Count}">
52 </Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions> <Border BorderBrush="Black"
BorderThickness="">
<TextBlock Text="{Binding Name}" />
</Border> <Border BorderBrush="Black"
BorderThickness=""
Grid.Column="">
<TextBlock Text="{Binding Value}" />
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
76 <ItemsControl.ItemContainerStyle>
77 <Style>
78 <Setter Property="Grid.Row"
79 Value="{Binding Index}" />
80 </Style>
81 </ItemsControl.ItemContainerStyle>

</ItemsControl> <TextBlock HorizontalAlignment="Center"
FontSize=""
Grid.Row=""
Text="根据ItemsSource生成列" />
<!--根据ItemsSource生成列-->
<ItemsControl ItemsSource="{Binding}"
Grid.Row="">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
94 <Grid GridHelperDemo:GridHelper.ColumnsCount="{Binding Count}">
95 </Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions> <Border BorderBrush="Black"
BorderThickness="">
<TextBlock Text="{Binding Name}" />
</Border> <Border BorderBrush="Black"
BorderThickness=""
Grid.Row="">
<TextBlock Text="{Binding Value}" />
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
119 <ItemsControl.ItemContainerStyle>
120 <Style>
121 <Setter Property="Grid.Column"
122 Value="{Binding Index}" />
123 </Style>
124 </ItemsControl.ItemContainerStyle>

</ItemsControl>
</Grid>
</Window>

3 .cs代码如下

    /// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
} /// <summary>
/// 统计项
/// </summary>
public class StatisticItem
{
public int Index { get; set; } public string Name { get; set; } public int Value { get; set; }
} /// <summary>
/// 统计项列表
/// </summary>
public class StatisticItemList : List<StatisticItem>
{ }

 4.GridHelper.Cs定义

    public class GridHelper
{
#region RowsCount 附加属性
public static readonly DependencyProperty RowsCountProperty =
DependencyProperty.RegisterAttached("RowsCount", typeof(int), typeof(GridHelper), new PropertyMetadata(1, RowsCountPropertyChangedCallback)); public static void SetRowsCount(UIElement element, int value)
{
element.SetValue(RowsCountProperty, value);
} public static int GetRowsCount(UIElement element)
{
return (int)element.GetValue(RowsCountProperty);
} public static void RowsCountPropertyChangedCallback(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
int count = Convert.ToInt32(e.NewValue);
if (sender is Grid && count > 0)
{
Grid g = sender as Grid;
g.RowDefinitions.Clear();
for (int i = 0; i < count; i++)
{
g.RowDefinitions.Add(new RowDefinition());
}
}
}
#endregion #region ColumnsCount 附加属性
public static readonly DependencyProperty ColumnsCountProperty =
DependencyProperty.RegisterAttached("ColumnsCount", typeof(int), typeof(GridHelper), new PropertyMetadata(1, ClumnsCountPropertyChangedCallback)); public static void SetColumnsCount(UIElement element, int value)
{
element.SetValue(ColumnsCountProperty, value);
} public static int GetColumnsCount(UIElement element)
{
return (int)element.GetValue(ColumnsCountProperty);
} public static void ClumnsCountPropertyChangedCallback(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
int count = Convert.ToInt32(e.NewValue);
if (sender is Grid)
{
Grid g = sender as Grid;
g.ColumnDefinitions.Clear();
for (int i = 0; i < count; i++)
{
g.ColumnDefinitions.Add(new ColumnDefinition());
}
}
}
#endregion
}

ItemsControl 使用Grid布局的更多相关文章

  1. WPF中Grid布局

    WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...

  2. &lbrack;转&rsqb;使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  3. wpf后置代码中的Grid布局以及图片路径的设置

    之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...

  4. css grid布局的首次使用

    首先来看一下效果图 接下来废话不多说,先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 学习ExtJS的grid布局

    这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

  6. CSS字体渐变 &amp&semi; 隐藏浏览器滚动条 &amp&semi; grid布局(转载)

    字体渐变  https://www.zhangxinxu.com/study/201104/css3-text-gradient-2.html 隐藏浏览器滚动条  https://blog.csdn. ...

  7. CSS Grid 布局完全指南&lpar;图解 Grid 详细教程&rpar;

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. 快速使用CSS Grid布局,实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  9. 补发————grid布局

    CSS Grid布局是CSS中最强大的布局系统.与flexbox的一位布局不同的是CSS Grid布局是一个二维布局系统,即它可以同时处理列和行.通过将CSS规则应用于父元素和其子元素,就可以轻松使用 ...

随机推荐

  1. CSS 问题集锦

    [1]让DIV中的内容居中 1.文字垂直居中,关键代码:height:100px;line-height:100px(两个值要相等) <div style="margin:0 auto ...

  2. 我所了解的WEB开发 (1)

    开始接触网站开发的时候,概念里就对静态网站和动态网站有了简单的区分,静态网站仅仅是纯粹的HTML网页,动态网站是需要采用asp 连接数据库(比如access).那个时候听说高手都是使用 Notepad ...

  3. Number Game&lowbar;状态压缩

    Description Christine and Matt are playing an exciting game they just invented: the Number Game. The ...

  4. smarty 变量调节器

    变量调节器:<{$a|变量调节器}> 了解更多可以查询smarty手册 主要修改此页面的信息来了解变量调节器:main.php/main.html(0603) 1.利用给定的变量调节器 c ...

  5. XCode 打包问题巧遇

    XCode 打包问题巧遇 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句: ...

  6. hadoop MapReduce

    简单介绍 官方给出的介绍是hadoop MR是一个用于轻松编写以一种可靠的.容错的方式在商业化硬件上的大型集群上并行处理大量数据的应用程序的软件框架. MR任务通常会先把输入的数据集切分成独立的块(可 ...

  7. nginx禁止未绑定域名访问返回444

    来源于:http://blog.csdn.net/qq435792305/article/details/8298244

  8. java 生成Http 头部date格式的string-RFC 1123 Date Representation in java

    https://blog.csdn.net/lvzhuyiyi/article/details/51770148 ******************************************* ...

  9. C&num; windows服务&colon;如何获取服务程序所在的文件夹

    AppDomain.CurrentDomain.BaseDirectory 就这么一句话

  10. IntelliJ IDEA常用设置

    IntelliJ IDEA进入设置界面. “File”->“Settings”,进入如下界面: 界面主题设置    CTR+鼠标滚动键改变编辑区字体大小.设置鼠标在系统类上指定时间显示注释. 设 ...