WPF - How to stop an ItemsControl psuedo-grid's columns from dancing/jumping around during layout
- by Drew Noakes
Several other questions on SO have come to the same conclusion I have -- using an ItemsControl with a DataTemplate for each item constructed to position items such that they resemble a grid is much simpler (especially to format) than using a ListView.
The code resembles:
<StackPanel Grid.IsSharedSizeScope="True">
<!-- Header -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Column2" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Column Header 1" />
<TextBlock Grid.Column="1" Text="Column Header 2" />
</Grid>
<!-- Items -->
<ItemsControl ItemsSource="{Binding Path=Values, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Column2" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding ColumnProperty1}" />
<TextBlock Grid.Column="1" Text="{Binding ColumnProperty2}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
The problem I'm seeing is that whenever I swap the object to which the ItemsSource is bound (it's an ObservableCollection that I replace the reference to, rather than clear and re-add), the entire 'grid' dances about for a few seconds.
Presumably it is making a few layout passes to get all the Auto-width columns to match up.
This is very distracting for my users and I'd like to get it sorted out. Has anyone else seen this?