CODEWITHSUNDEEP
wpfxamluser-controlsresize
Freeker47
Freeker47

Reputation: 23

Extremely slow resizing of WPF UserControl

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>

Upvotes: 2

Views: 2895

Answers (1)

steveg89
steveg89

Reputation: 1827

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:

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />            
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>

I then modified your second label to set the Grid.Column property 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:

<Grid>
     <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />            
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="18"/>
  </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="1"
        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>

Upvotes: 2

Related Questions