ItemsControl 使用Grid布局

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

1.先看运行效果

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
    }