불규칙한 레이아웃 ItemsControl

Question

ItemsControl에 이상한 레이아웃이 있습니다.

1 2 3 4 
13 14 15 16 
5 6 7 8 
17 18 19 20 
9 10 11 12 
21 22 23 24 

이 작업을 수행 할 수있는 간단한 방법이 있을까요 :

나는 다음과 같은 패턴으로 4 × 6 그리드가? 6 Items Controls를 사용하고 목록의 "섹션"을 가져야합니까? 이것을 할 수있는 좋은 방법이 있습니까? 통보는 어떻습니까?

그것은 모든 24 개 항목이 현재 가지고, 나는 할 수있다, 또는하지 않을 수 있습니다하는 것이 중요하지만, 레이아웃이 유지 될 필요가있다 (빙고 카드 또는 뭔가 채워진 슬롯처럼 생각)

편집 :

이상적으로는 목록을 가져 와서 목록의 항목에 대한 속성을 정렬/채우기 유형을 재미있게 할 수 있기를 바랍니다.

예를 들어 ObservableCollection에 몇 개의 단위가 있고 Unit에 "Index"속성이있는 경우 색인을 자동으로 사용하여 채워진 목록을 만드는보기 소모품 모음을 만들고 싶습니다. 나는 관찰 가능한 사전이 작동 할 수 있다고 생각하지만, 그것은 심하게 보인다. 어쩌면 새로운 맞춤 레이아웃 패널이 주문 상태일까요?

Answer 1

순수 XAML에서 ItemsControl에 대한 사용자 지정 템플릿을 사용하여이를 수행하는 영리한 방법이 있습니다. 그것은 가장 쉬운 모든 "카드"고정 된 크기가있는 경우, 말 100 × 100 :

<!-- Wrap each card in a decorator twice as high as the card cell --> 
<DataTemplate x:Key="ItemInDoubleHighBox"> 
    <Decorator Width="100" Height="200"> 
    <Decorator Width="100" Height="100" ClipToBounds="True"> 
     <ContentPresenter /> 
    </Decorator> 
    </Decorator> 
</DataTemplate> 

<!-- Define a template for use with WrapPanel --> 
<ItemsPanelTemplate x:Key="WrapPanelTemplate"> 
    <WrapPanel /> 
</ItemsPanelTemplate> 

<!-- Now the actual ItemsControl template --> 
<ControlTemplate TargetType="ItemsControl"> 
    <Grid Width="600" Height="600" ClipToBounds="True"> 

    <!-- Items 1 to 12 --> 
    <ItemsControl ItemsSource="{TemplateBinding ItemsSource}" 
        ItemsPanel="{StaticResource WrapPanelTemplate}" 
        ItemTemplate="{StaticResource ItemInDoubleHighBox}" /> 

    <!-- Items 13 to 24 --> 
    <ItemsControl ItemsSource="{TemplateBinding ItemsSource}" 
        ItemsPanel="{StaticResource WrapPanelTemplate}" 
        ItemTemplate="{StaticResource ItemInDoubleHighBox}" 
        RenderTransform="1 0 0 1 0 -500" /> 

    </Grid> 
</ControlTemplate> 

어떻게 작동 : DataTemplate을은으로 RenderTransform 만 1-12 표시와 함께 "이중 간격"으로 항목을 유발하고, 두 번째 ItemsControl은 항목의 첫 번째 행 사이의 공백에 "이중 공백"으로 나타나는 항목 13-24를 만듭니다.

참고 : 높이 및 너비를 데이터 바인딩 가능으로 만들 수는 있지만 XAML이 더 많이 걸립니다. ScaleTransforms를 추가하면 XAML에 "200", "500"또는 "600"이 나타납니다. 예를 들어, "200"을 다루기 위해 ScaleY = "0.5"인 내부 데코레이터와 ScaleY = "2"인 각 ItemsControl에서 스케일 변환을 설정할 수 있습니다. 이제 외부 데코레이터의 높이는 100으로 데이터 바인딩이 가능합니다. 다른 상수는 내용의 유사한 사전 및 사후 비율 조정을 통해 처리 될 수 있습니다. WPF는 렌더링하기 전에 모든 변환을 결합하므로 추가 변환에는 기본적으로 비용이 들지 않습니다.

Answer 2

WPF는 매우 사소한 것입니다. 기본적으로 ItemsPanelTemplate을 지정하면됩니다.

<ListBox> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Columns="4" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
</ListBox> 

이제 ListBox에 추가하는 항목은 패널의 레이아웃 논리에 따라 정렬됩니다.이 경우에는 UniformGrid입니다.

컬렉션의 항목을 원하는 순서대로 유지해야합니다. 그래서 나는 그들을 ListBox에 추가하기 전에 먼저 정렬 할 것입니다. 컬렉션에 "구멍"을 만들어야한다면 복잡한 레이아웃 논리를 사용하여 항목을 분산시키지 않고 일부 유형의 자리 표시 자 객체 (어쩌면 새로운 객체()가 사용)를 사용합니다.