WPF : 사용자 지정 항목 제어판을 만드는 방법은 무엇입니까?

Question

ListBox에 대한 사용자 지정 항목 제어판을 디자인하고 싶습니다.

1. 그것은 패널이 구성되어 세포의 매트릭스를 정의 할 속성 int rows 및 int columns이 있어야합니다 3 개 가지 요구 사항이 있습니다. 이 패널이 어떻게 보일지입니다 (색상 무관, 난 그냥 패널은 3 × 4 매트릭스 (12 개) 빈 셀이 구성되어 있음을 보여주고 싶었다된다) : 항목의 항목 수는 제어 할 경우

2. 정의 된 셀의 수보다 작 으면 모든 셀을 그려야합니다. 예 : 그림에 표시된 3x4 행렬에 배치 할 항목이 4 개만있는 경우 모든 셀을 그려야하며 그 중 4 개만 항목을 포함해야합니다.

3. 일부 데이터 바인딩을 통해 어떤 셀에서 어떤 항목을 호스팅할지 설정할 수 있어야합니다. 예를 들어 내가 사람 목록을 가지고 있다고 가정 해 봅시다. 이 목록에는 유형이 Person이고 Person 클래스의 항목에는 X 및 Y의 두 가지 속성이 포함되어 있습니다. 셀의 row에 X을 데이터 바인딩하고 셀의 column에 Y을 바인딩하여 패널의 어느 셀에 목록의 어느 셀이 포함될 것인지 설정할 수 있습니다.

항목 제어판을 만드는 것이 의미가 없으면 더 나은 방법을 제안하십시오. 솔직히 말하면 나는 이것을 시작하는 방법에 대해서도 당황 스럽다. 모든 도움에 감사드립니다. 건배!

Answer 1

이런 종류의 문제를 해결하는 유용한 전략은 소스 데이터를 ItemsControl으로 더 적합한 형식으로 조작하는 것입니다. 예를 들어 항목의 2 차원 배열이나 자체 2 차원 좌표가 포함 된 항목의 선형 컬렉션은 활용하기가 어렵습니다.

대신 간단한 데이터 구조 변환을 사용하면 ItemsSource을 컬렉션 집합에 바인딩 할 수 있습니다. 외부 컬렉션에는 세 개의 행이 있고 각 내부 컬렉션에는 네 개의 항목이 들어 있습니다. 각 항목에는 실제 행 및 열 좌표가 포함될 수 있으며 해당 셀에 데이터가 표시되어야하는지 여부를 처리 할 수 ​​있습니다.

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

생산되는 : 답장을 보내

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