Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn một cách để hiển thị dữ liệu của ItemsControl dưới dạng Grid Panel. Đầu tiên mình sẽ tạo một class để hiển thị dữ liệu :

    public class fruit
    {
        public int Column { get; set; }
        public int Row { get; set; }
        public int ColumnSpan { get; set; }
        public int RowSpan { get; set; }
        public string Name { get; set; }
        public string Price { get; set; }
    }

Như các bạn thấy ở trên 4 dòng đầu dùng để xác định vị trí hiển thị dữ liệu tương ứng trên Grid, các dòng sau là dữ liệu cần hiển thị. Sau đó mình sẽ tạo một list data và gán vào datacontext.

List<fruit> fruits = new List<fruit>();
            fruits.Add(new fruit() { Name = "orange", Price = "5$", Column = 0, Row = 0,ColumnSpan=1 });
            fruits.Add(new fruit() { Name = "apple", Price = "15$", Column = 1, Row = 0, ColumnSpan = 1 });
            fruits.Add(new fruit() { Name = "mango", Price = "35$", Column = 0, Row = 1, ColumnSpan = 1 });
            fruits.Add(new fruit() { Name = "banana", Price = "25$", Column = 1, Row = 1, ColumnSpan = 1 });
            fruits.Add(new fruit() { Name = "coconut", Price = "45$", Column = 0, Row = 2, ColumnSpan = 1 });
            fruits.Add(new fruit() { Name = "pumpkin", Price = "5$", Column = 1, Row = 2, ColumnSpan = 1 });
            this.DataContext = fruits;

Bên phần Xaml mình sẽ config như sau:

<ItemsControl ItemsSource="{Binding}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid ShowGridLines="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding Price}"/>
                    </StackPanel>
                    
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="Grid.Row" Value="{Binding Row}" />
                    <Setter Property="Grid.Column" Value="{Binding Column}" />
                    <Setter Property="Grid.ColumnSpan" Value="{Binding ColumnSpan}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>

Trong đoạn code trên ItemsPanelTemplate là nơi mình config số dòng số cột cho Grid Panel, ItemContainerStyle là nơi mình gán vị trí tương ứng của các item dữ liệu vào Grid Panel.

Nội dung bài hôm nay mình xin kết thúc tại đây. Hẹn gặp lại các bạn trong các bài sau.