2010-07-14 3 views
5

새로 워진 WPF ...WPF의 표 패널 요소에 대한 datatemplate이 있습니까?

나는 그리드 패널에 바인딩하고자하는 데이터 콜렉션을 가지고있다. 각 객체에는 모눈 행과 열뿐만 아니라 모눈 위치에 채울 물건이 들어 있습니다. 목록 상자 XAML에서 데이터 템플릿을 만들어서 UI 뒤에 코드가 거의없는 UI를 만드는 방법을 정말 좋아합니다. 그리드 패널 요소에 대한 데이터 템플릿을 만들고 패널을 데이터 컬렉션에 바인딩하는 방법이 있습니까?

답변

13

ItemsControlGrid을 패널로 사용할 수 있습니다. 다음은 그 예입니다. XAML :

<ItemsControl x:Name="myItems"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <Grid.RowDefinitions> 
         <RowDefinition /> 
         <RowDefinition /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
       </Grid> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <TextBlock Text="{Binding MyText}" /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
     <ItemsControl.ItemContainerStyle> 
      <Style> 
       <Style.Setters> 
        <Setter Property="Grid.Row" Value="{Binding MyRow}" /> 
        <Setter Property="Grid.Column" Value="{Binding MyColumn}" /> 
       </Style.Setters> 
      </Style> 
     </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 

Codebehind가 (테스트 용) :

public Window1() 
    { 
     InitializeComponent(); 
     myItems.ItemsSource = new[] { 
      new {MyRow = 0, MyColumn = 0, MyText="top left"}, 
      new {MyRow = 1, MyColumn = 1, MyText="middle"}, 
      new {MyRow = 2, MyColumn = 2, MyText="bottom right"} 
     }; 
    } 
+4

알려진 행 수가 표시되지만 데이터가있는 행 수를 기반으로 임의의 행 수를 표시 할 수없는 경우 제대로 작동합니다. – LJNielsenDk

+1

DataTemplate (템플릿의 루트 요소에 있음)에서 행과 열을 설정하려고했는데 왜 작동하지 않는지 궁금합니다. 이것은 대단히 도움이되었습니다. 감사! – qJake

0

이 당신을 도울 것입니다, 그런데 왜 당신이 ItemsControl에의 ItemsPanel (목록 상자, 목록보기)를 설정하지 않는 경우 확실하지 않음 UniformGrid. 다음과 같은 내용 :

<ItemsControl> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

이것은 이전 솔루션과 비슷하지만 좀 더 동적입니다.