[WPF] Sử dụng Grid Panel cho ItemsControl

Nguyễn Xuân Luân viết ngày 21/07/2020

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.

 

Bài viết liên quan

Tổng hợp một số thư viện hỗ trợ thiết kế giao diện đẹp cho wpf

Để tạo ra một giao diện đẹp mắt cho một ứng dụng wpf là một việc đòi hỏi rất nhiều công sức , để có một giao diện đẹp như một trang web chúng ta càng phải bỏ nhiều công sức hơn...

Nguyễn Xuân Luân

[WPF] Setting global format datetime

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn cách thiết lập định dạng datetime trong wpf application...

Nguyễn Xuân Luân

[WPF] Tự động sắp xếp một GridView khi click vào header một column

Trong WPF để trình bày dữ liệu dưới dạng lưới ta có thể sử dụng GridView....

Nguyễn Xuân Luân