I don’t like pasting rather long code snippets in here, but I have a problem with the following WPF UserControl (XAML at the end of this post). The provided code is simplified, but I tested it and it is reproducable.
The problem with this UserControl is, when added to a WPF Window, horizontal resizing is extremely slow. More precisely, when the window’s width is increased, resizing works as fast as expected. However, as soon as it’s width is decreased, the containing UserControl hangs and resizes only very slowly. On my PC it takes about 3 seconds to reach its final size.
My question now:
Why is this and what can I do about it? With this simplified control it may not be a huge problem, but if both ListViews are filled, operation is even slower.
Is this an issue with WPF itself or is there an error in the XAML? I don’t know. Any hints/solutions/workarounds/comments appreciated! 🙂 Thanks!
<UserControl x:Class="TestApplication.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
d:DesignHeight="768" d:DesignWidth="1280" mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<!-- [removed for clarity] -->
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName='uiCustomerOrderListView', Path='ActualWidth'}" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="{Binding ElementName='uiPackagingOrderListView', Path='ActualWidth'}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
BorderBrush="Black"
BorderThickness="1"
Content="Customer Orders"
FontWeight="Bold"
Grid.Column="0"
Grid.Row="0"
HorizontalContentAlignment="Center"
Margin="0,0,0,2"
SnapsToDevicePixels="True"
VerticalContentAlignment="Center" />
<Label
BorderBrush="Black"
BorderThickness="1"
Content="Packaging Orders"
FontWeight="Bold"
Grid.Column="2"
Grid.Row="0"
HorizontalContentAlignment="Center"
Margin="0,0,0,2"
SnapsToDevicePixels="True"
VerticalContentAlignment="Center" />
<Grid
Grid.Column="0"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
x:FieldModifier="private"
x:Name="uiCustomerOrdersColumn00HeaderTextBlock"
FontWeight="Bold"
Grid.Column="1"
Grid.Row="0"
Text="[Order No.]"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
ToolTip="" />
<!-- [similar TextBlocks for columns 2, 3, 4, 5, 6] -->
<!-- [removed for clarity] -->
</Grid>
<Grid
Grid.Column="2"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
x:FieldModifier="private"
x:Name="uiPackagingOrdersColumn00HeaderTextBlock"
FontWeight="Bold"
Grid.Column="1"
Grid.Row="0"
Text="[Order Nr.]"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
ToolTip="" />
<!-- [similar TextBlocks for columns 2, 3, 4, 5, 6, 7] -->
<!-- [removed for clarity] -->
</Grid>
<Border
BorderBrush="Black"
BorderThickness="0,2,0,0"
Grid.Column="0"
Grid.ColumnSpan="4"
Grid.Row="2"
Margin="1,1,1,1"
SnapsToDevicePixels="True" />
<ScrollViewer
Grid.Column="0"
Grid.ColumnSpan="4"
Grid.Row="3"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListView
x:FieldModifier="private"
x:Name="uiCustomerOrderListView"
Grid.Column="0"
Grid.Row="1"
ItemsSource="{Binding Path='.'}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Single"
VirtualizingStackPanel.IsVirtualizing="False">
<ListView.View>
<GridView
x:FieldModifier="private"
x:Name="uiCustomerOrderGridView"
AllowsColumnReorder="False">
<GridView.Columns>
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
<ListView
x:FieldModifier="private"
x:Name="uiPackagingOrderListView"
Grid.Column="2"
Grid.Row="1"
ItemsSource="{Binding Path='.'}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Single"
VirtualizingStackPanel.IsVirtualizing="False">
<ListView.View>
<GridView
x:FieldModifier="private"
x:Name="uiPackagingOrderGridView"
AllowsColumnReorder="False">
<GridView.Columns>
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
<GridViewColumn />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
It’s because you’re binding the width of your top grid (Customer orders/Packaging orders) to the actual width of other controls, so it goes through a ton of updates as you resize. To fix it in my test harness and keep the same look, I did the following:
Set the first grid’s columns as such:
I then modified your second label to set the
Grid.Columnproperty to 1 instead of 2. This gives you the same overall look. I will say though that you use a lot of grids and could probably simplify this design some. Here is my version of your code in it’s entirety: