DataTemplate for ItemTemplate of a Grid displaying its content in columns
I have HeaderedItemsControl
which ItemsSource is bound to a ObservableCollection<Person>
. I would like to display it's content like:
*Name* Müller Schmid Weber *FirstName* Peter Hans Willhelm *Age* 32 56 78 *Country* Switzerland Austria Liechtenstein
My xaml-Code so far:
<HeaderedItemsControl ItemsSource="{Binding Path=PersonCollection}">
<HeaderedItemsControl.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Name"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="FirstName"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="Age"/>
<TextBlock Grid.Column="0" Grid.Row="3" Text="Country"/>
<StackPanel Grid.RowSpan="4" Grid.Column="1" Orientation="Horizontal">
<ItemsPresenter/>
</StackPanel>
</Grid>
</ControlTemplate>
</HeaderedItemsControl.Template>
<HeaderedItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Grid.RowDefinitions>
<Row开发者_运维技巧Definition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="{Binding Path=Name}" />
<Label Grid.Row="1" Content="{Binding Path=FirstName}" />
<Label Grid.Row="2" Content="{Binding Path=Age}" />
<Label Grid.Row="3" Content="{Binding Path=Country}"/>
</StackPanel>
</DataTemplate>
</HeaderedItemsControl.ItemTemplate>
</HeaderedItemsControl>
This gives me something like:
*Name* Müller Schmid Weber *FirstName* Peter Hans Willhelm *Age* 32 56 78 *Country* Switzerland Austria Liechtenstein
Is there a way to let the items be presented in a column?
In your ControlTemplate you've wrapped your ItemsPresenter in a StackPanel, which in this case is doing nothing because it has a single child: the ItemsPresenter. What you actually want is for the ItemsPresenter to use that StackPanel to do its internal layout which you achieve using the ItemsControl.ItemsPanel to define template for a panel that will host the items generated by the control:
<HeaderedItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</HeaderedItemsControl.ItemsPanel>
You also need to change the StackPanel declaration in your ItemTemplate to Grid so that it will lay out each item into Rows.
It looks like within your ItemTemplate
you are setting the row of your Labels instead of the columns, so your content would stack vertically. Also, you have the Labels sitting in a StackPanel
with vertical orientation, which will make them display in a single column. I'm guessing you are looking for a layout like this for your ItemTemplate
.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Path=Name}" />
<Label Grid.Column="1" Content="{Binding Path=FirstName}" />
<Label Grid.Column="2" Content="{Binding Path=Age}" />
<Label Grid.Column="3" Content="{Binding Path=Country}"/>
</Grid>
精彩评论