WPF: Jak utworzyć niestandardowy panel sterowania?

Question

Chcę zaprojektować niestandardowy panel sterowania dla elementu ListBox. Istnieją 3 wymagania:

1. Należy mieć właściwości int rows i int columns które definiują macierz komórek, panel jest wykonane. To właśnie panel powinien wyglądać (kolory są bez znaczenia, po prostu chciał pokazać, że panel jest składała się z 12 pustych komórek w macierzy 3x4):

2. Jeśli liczba przedmiotów w pozycji sterowania jest mniej niż liczba zdefiniowanych komórek, wszystkie komórki powinny zostać narysowane. Na przykład. jeśli na macierzy 3x4 widocznej na obrazku znajdują się tylko 4 elementy, wszystkie komórki powinny zostać narysowane, a tylko 4 z nich powinny zawierać elementy.

3. Powinna istnieć możliwość ustawienia, która komórka będzie obsługiwać dany element, poprzez pewne powiązanie danych. Na przykład, powiedzmy, że mam listę osób. Ta lista zawiera elementy typu Person, a klasa Person zawiera dwie właściwości: X i Y. Powinienem móc powiązać dane X z row komórki i Y z komórką column, pozwalając sobie ustawić, która komórka w panelu będzie zawierała osobę z listy.

Jeśli tworzenie panelu sterowania pozycji nie ma sensu, proszę polecić to, co byłoby lepszym rozwiązaniem. Szczerze mówiąc jestem zaskoczony, jak zacząć z tym. Dzięki za całą pomoc. Twoje zdrowie!

Answer 1

Przydatną strategią rozwiązania tego problemu jest manipulowanie danymi źródłowymi w formacie bardziej odpowiednim do konsumpcji przez ItemsControl. Na przykład trudno jest wykorzystać dwuwymiarową tablicę elementów lub liniową kolekcję elementów, które zawierają własne dwuwymiarowe współrzędne.

Zamiast tego, za pomocą prostej transformacji struktury danych można powiązać swoją kolekcję z ItemsSource. Zewnętrzna kolekcja zawiera trzy rzędy, a każda wewnętrzna kolekcja zawiera cztery przedmioty. Każda pozycja może zawierać rzeczywiste współrzędne wiersza i kolumny i może obsłużyć, czy odpowiednia komórka powinna wyświetlać jakiekolwiek dane.

Oto przykład 2x2, aby pokazać, co mam na myśli:

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

która produkuje:

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