Hello everyone, today I will show you a way to display the data of ItemsControl as a Grid Panel. First I will create a class to display data:

    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; }
    }

As you can see above, the first 4 lines are used to determine the position to display the corresponding data on the Grid, the following lines are the data to display. Then I will create a list of data and assign it to the 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;

In the Xaml, I will configure the following:

<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>

In the above code, ItemsPanelTemplate is where I configure the number of rows and columns for the Grid Panel, ItemContainerStyle is where I assign the corresponding position of the data items to the Grid Panel.

Today's content I would like to end here. See you in the next posts.