WPF: Cách tạo bảng điều khiển các mục tùy chỉnh?

Question

Tôi muốn thiết kế bảng điều khiển các mục tùy chỉnh cho một số ListBox. Có 3 yêu cầu:

1. Nó cần phải có các thuộc tính int rows và int columns đó sẽ xác định ma trận của các tế bào mà bảng được làm bằng. Đây là những gì bảng điều khiển sẽ như thế nào (màu sắc là không liên quan, tôi chỉ muốn cho thấy rằng bảng điều khiển bao gồm 12 ô trống trong một ma trận 3x4):

2. Nếu số lượng mục trong mục kiểm soát là ít hơn số ô được xác định, tất cả các ô sẽ được vẽ. Ví dụ. nếu chỉ có 4 mục được đặt trong ma trận 3x4 được hiển thị trong ảnh, tất cả các ô sẽ được vẽ và chỉ có 4 ô chứa các mục.

3. Bạn có thể đặt ô nào sẽ lưu trữ mục nào, thông qua một số ràng buộc dữ liệu. Ví dụ, giả sử tôi có một danh sách những người. Danh sách đó chứa các mục thuộc loại Person và lớp Person chứa hai thuộc tính X và Y. Tôi sẽ có thể kết nối dữ liệu X với số row của ô và Y tới số column của ô, do đó cho phép tôi đặt ô nào trong bảng điều khiển sẽ chứa người nào trong danh sách.

Nếu tạo bảng điều khiển mục không có ý nghĩa, vui lòng đề xuất cách tiếp cận tốt hơn. Thành thật mà nói, tôi đang bối rối về việc làm thế nào để bắt đầu với điều này. Cảm ơn vì sự giúp đỡ. Chúc mừng!

Answer 1

Một chiến lược hữu ích để giải quyết loại sự cố này là thao tác dữ liệu nguồn thành định dạng phù hợp hơn cho mức tiêu thụ theo số ItemsControl. Ví dụ, một mảng các mục hai chiều, hoặc một tập hợp các mục có chứa các tọa độ hai chiều của chúng, rất khó sử dụng.

Thay vào đó, với phép chuyển đổi cấu trúc dữ liệu đơn giản, bạn có thể ràng buộc ItemsSource để thu thập bộ sưu tập. Bộ sưu tập bên ngoài chứa ba hàng và mỗi bộ sưu tập bên trong chứa bốn mục. Mỗi mục có thể chứa tọa độ hàng và cột thực tế của nó và có thể xử lý xem ô tương ứng có hiển thị bất kỳ dữ liệu nào hay không.

Dưới đây là một ví dụ 2x2 để cho bạn thấy những gì tôi có nghĩa là:

<Grid> 
    <Grid.Resources> 
     <coll:ArrayList x:Key="sampleData"> 
      <x:Array Type="sys:String"> 
       <sys:String>1</sys:String><sys:String>2</sys:String> 
      </x:Array> 
      <x:Array Type="sys:String"> 
       <sys:String>3</sys:String<sys:String>4</sys:String> 
      </x:Array> 
     </coll:ArrayList> 
    </Grid.Resources> 
    <ItemsControl ItemsSource="{StaticResource sampleData}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <ItemsControl ItemsSource="{Binding}"> 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <StackPanel Orientation="Horizontal"/> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Border BorderBrush="Black" BorderThickness="1" Width="50" Height="50"> 
           <TextBlock Text="{Binding}"/> 
          </Border> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

trong đó sản xuất:

+---+---+ 
| 1 | 2 | 
+---+---+ 
| 3 | 4 | 
+---+---+