zoukankan      html  css  js  c++  java
  • ItemsControl 使用Grid布局

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

    1.先看运行效果

    2.xaml代码如下

      1 <Window x:Class="GridHelperDemo.MainWindow"
      2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      4         xmlns:GridHelperDemo="clr-namespace:GridHelperDemo"
      5         Title="MainWindow"
      6         Height="350"
      7         Width="525">
      8     <Window.DataContext>
      9         <GridHelperDemo:StatisticItemList>
     10             <GridHelperDemo:StatisticItem Index="0"
     11                                           Name="张三"
     12                                           Value="65" />
     13             <GridHelperDemo:StatisticItem  Index="1"
     14                                            Name="李四"
     15                                            Value="91" />
     16             <GridHelperDemo:StatisticItem Index="2"
     17                                           Name="老王"
     18                                           Value="37" />
     19             <GridHelperDemo:StatisticItem  Index="3"
     20                                            Name="小李"
     21                                            Value="81" />
     22             <GridHelperDemo:StatisticItem  Index="4"
     23                                            Name="大强"
     24                                            Value="64" />
     25             <GridHelperDemo:StatisticItem Index="5"
     26                                           Name="崔颢"
     27                                           Value="43" />
     28             <GridHelperDemo:StatisticItem  Index="6"
     29                                            Name="明月"
     30                                            Value="82" />
     31             <GridHelperDemo:StatisticItem  Index="7"
     32                                            Name="阿辉"
     33                                            Value="13" />
     34         </GridHelperDemo:StatisticItemList>
     35     </Window.DataContext>
     36     <Grid>
     37         <Grid.RowDefinitions>
     38             <RowDefinition Height="auto" />
     39             <RowDefinition />
     40             <RowDefinition Height="auto" />
     41             <RowDefinition />
     42         </Grid.RowDefinitions>
     43         <TextBlock HorizontalAlignment="Center"
     44                    FontSize="20"
     45                    Text="根据ItemsSource生成行" />
     46         <!--根据ItemsSource生成行-->
     47         <ItemsControl ItemsSource="{Binding}"
     48                       Grid.Row="1">
     49             <ItemsControl.ItemsPanel>
     50                 <ItemsPanelTemplate>
     51                     <Grid GridHelperDemo:GridHelper.RowsCount="{Binding Count}">
     52                     </Grid>
     53                 </ItemsPanelTemplate>
     54             </ItemsControl.ItemsPanel>
     55             <ItemsControl.ItemTemplate>
     56                 <DataTemplate>
     57                     <Grid>
     58                         <Grid.ColumnDefinitions>
     59                             <ColumnDefinition />
     60                             <ColumnDefinition />
     61                         </Grid.ColumnDefinitions>
     62 
     63                         <Border BorderBrush="Black"
     64                                 BorderThickness="1">
     65                             <TextBlock Text="{Binding Name}" />
     66                         </Border>
     67 
     68                         <Border BorderBrush="Black"
     69                                 BorderThickness="1"
     70                                 Grid.Column="1">
     71                             <TextBlock Text="{Binding Value}" />
     72                         </Border>
     73                     </Grid>
     74                 </DataTemplate>
     75             </ItemsControl.ItemTemplate>
     76             <ItemsControl.ItemContainerStyle>
     77                 <Style>
     78                     <Setter Property="Grid.Row"
     79                             Value="{Binding Index}" />
     80                 </Style>
     81             </ItemsControl.ItemContainerStyle>
     82 
     83         </ItemsControl>
     84 
     85         <TextBlock HorizontalAlignment="Center"
     86                    FontSize="20"
     87                    Grid.Row="2"
     88                    Text="根据ItemsSource生成列" />
     89         <!--根据ItemsSource生成列-->
     90         <ItemsControl ItemsSource="{Binding}"
     91                       Grid.Row="3">
     92             <ItemsControl.ItemsPanel>
     93                 <ItemsPanelTemplate>
     94                     <Grid GridHelperDemo:GridHelper.ColumnsCount="{Binding Count}">
     95                     </Grid>
     96                 </ItemsPanelTemplate>
     97             </ItemsControl.ItemsPanel>
     98             <ItemsControl.ItemTemplate>
     99                 <DataTemplate>
    100                     <Grid>
    101                         <Grid.RowDefinitions>
    102                             <RowDefinition />
    103                             <RowDefinition />
    104                         </Grid.RowDefinitions>
    105 
    106                         <Border BorderBrush="Black"
    107                                 BorderThickness="1">
    108                             <TextBlock Text="{Binding Name}" />
    109                         </Border>
    110 
    111                         <Border BorderBrush="Black"
    112                                 BorderThickness="1"
    113                                 Grid.Row="1">
    114                             <TextBlock Text="{Binding Value}" />
    115                         </Border>
    116                     </Grid>
    117                 </DataTemplate>
    118             </ItemsControl.ItemTemplate>
    119             <ItemsControl.ItemContainerStyle>
    120                 <Style>
    121                     <Setter Property="Grid.Column"
    122                             Value="{Binding Index}" />
    123                 </Style>
    124             </ItemsControl.ItemContainerStyle>
    125 
    126         </ItemsControl>
    127     </Grid>
    128 </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
        }
    
  • 相关阅读:
    Minimum Inversion Number
    作业四
    牛客小白月赛18 G Forsaken的三维数点
    The Accomodation of Students HDU
    03-Bootstrap学习
    jquery 单击和双击事件冲突解决方案
    13-JS中的面向对象
    12-关于DOM操作的相关案例
    IO多路复用
    python读取excel文件
  • 原文地址:https://www.cnblogs.com/moonlight-zjb/p/4719359.html
Copyright © 2011-2022 走看看