[RESOLVED] Resizing WPF Form Error

[Shaggy Hiker]

I have a form with a series of buttons in two columns down the left side, with a listbox to the right of that. Below the buttons are some labels, and at the bottom of the form is a single button for Finished. Nothing all that spectacular.

At the top level, there are two rows in a grid. The bottom row has that single Finished button, the top row has everything else. The top row has a grid that has three columns, the first column holds one column of buttons, the second column holds the second column of buttons, and the third column holds the listbox.

The form looks fine when first displayed. Today, for the first time, I tried resizing the form, and it promptly goes pretty much haywire, but in a consistent fashion (I've tried it a few times). The best that I can say is that the bottom row, which holds the Finished button, now becomes an almost fixed size. Initially, when displayed properly, it is perhaps a bit more than 1/10th the height of the form. As soon as I even slightly adjust the size of the form, it jumps to about half the height of the form, thereby overrunning some of the buttons, and the labels. Interestingly, the listbox shrinks down to the occupy the remaining space, as far as height is concerned.

The vertical spacing between elements remains the same, as far as I can tell, it's just that the bottom row has jumped from 1/10th the form to about half the form. As I shrink the form, the bottom row with the Finished button shrinks in size until it begins to not fully show the button, though by then none of the other controls are particularly visible, either.

The other thing that happens is that the width gets weird. The form jumps to considerably wider than it had been, with the columns of buttons getting excessive space between them, and the listbox being pushed so far to the right that half of it is off the edge of the form, thereby making the vertical scroll bar unreachable.

This jump happens as soon as I click on the border of the form. I don't have to actually resize it by any noticeable amount, it just jumps right away to this new configuration.

I saw something about not using hard heights and widths, so I removed all of that from the form, but it had no impact on this issue.

Any suggestions as to what is happening? It's quite the mess, because it makes a usable form unusable.

[Niya]

My IQ is too low to keep all those details in my head at the same time while trying to mentally synthesize an image.

What would help is to see a picture of what of your UI, better if it also shows the problem.

[Niya]

You know what, I just realized, it's WPF. Just post the XAML lemme play with it.

[Shaggy Hiker]

Good idea:

<Window x:Class="TestBed"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SGS_III"
        mc:Ignorable="d"
        Title="TestBed" SizeToContent="WidthAndHeight">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="MainArea" Height="*"/>
            <RowDefinition Name="DepartureRow" Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0">
                <Button x:Name="bDataStoreTests"  Content="DATA STORE TESTS" MinHeight="45"  Margin="20,8,20,0"/>
                <Button x:Name="bCheckAllSurveys"  Content="CHECK ALL SURVEYS" MinHeight="45"   Margin="20,8,20,0"/>
                <Button x:Name="bBuildASurvey" Content="BUILD SURVEY TESTS" MinHeight="45"  Margin="20,8,20,0"/>
                <Button x:Name="bFileHolderTests" Content="FILE HOLDER TESTS" MinHeight="45"  Margin="20,8,20,0"/>
                <Button x:Name="bServiceTests" Content="SERVICE TESTS" MinHeight="45"  Margin="20,8,20,0"/>
                <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
                    <TextBlock Text="Good:" Foreground="#FF07B407" FontSize="16" Margin="20,0,0,0" />
                    <TextBlock x:Name="lNoGood" Foreground="#FF07B407"  FontSize="16" Margin="10,0,20,0"></TextBlock>
                    <TextBlock Text="Bad:" Foreground="#FFFF0000" FontSize="16" />
                    <TextBlock x:Name="lNoBad" Foreground="#FFFF0000"  FontSize="16" Margin="10,0,20,0"></TextBlock>
                </StackPanel>
            </StackPanel>
            <StackPanel Grid.Column="1">
                <Button x:Name="bWaypointIDTests"  Content="WPT ID TESTS" MinHeight="45"  Margin="20,8,20,0"/>
            </StackPanel>
            <ListBox x:Name="lbResults" MinWidth="400" Grid.Column="2" Margin="8,0,8,0"/>
        </Grid>
        <Button Content="FINISHED" HorizontalAlignment="Center" Margin="0,10,10,10" Grid.Row="1" VerticalAlignment="Center" IsDefault="True" IsCancel="True" MinHeight="45" MinWidth="195" Click="Finished_Click"/>
    </Grid>
</Window>

[Niya]

Ah I see the problem. Now I can only guess as to your intent but the behavior can be cleaned up a bit.

For the outer Grid:-

        <Grid.RowDefinitions>
            <RowDefinition Name="MainArea" Height="auto"/>
            <RowDefinition Name="DepartureRow" Height="*"/>
        </Grid.RowDefinitions>

And for the inner Grid:-

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

Highlighted in red are the changes I made. You should see better layout behavior.

[Shaggy Hiker]

I'm quite new to WPF, and that was one of the very first forms I have ever created. I'm still playing around with the options for those heights and widths for rows and columns. I haven't found a good resource on them, either, so it's been a bit of trial and error.

That did fix it, though. Thanks.

[Niya]

There is plenty of documentation on WPF. The problem is that it is so powerful in it's flexibility as a layout engine that there are a damn near infinite combination of things you can do which means many edge cases where things can go wrong. It's impossible to document them all.

[Shaggy Hiker]

I wouldn't say quite 'plenty'. There certainly is a lot. I used to say that MS was really good about documentation...but then I tried to do some automating of Word, and realized that it's not a company wide standard. Some divisions within MS do a good job with documentation, others don't do it at all.

In general, there's quite a bit out there on WPF. The one item that I have never found a good explanation for is the different strategies for sizing rows and columns in grids. Your solution did solve the problem, and the way I had created those grids may be because this was quite possibly the second WPF form I had ever created (and the first is full screen, so it can't be resized). Still, while I have switched to making much more use of Auto for sizing rows and columns, I can't say that I have ever seen a solid description of what the options are for sizing rows and columns, and the different reasons for using them. It tends to be scattered. Somebody has an issue, as I have here, and a viable answer is provided, but not an explanation.

For example, why did the form look right until I attempted to resize by even one pixel? What was it about the way I had it where it was fine...until ANY sizing happened? What is it about Auto that fixes that?

[Niya]

The one item that I have never found a good explanation for is the different strategies for sizing rows and columns in grids.

Here.

Still, while I have switched to making much more use of Auto for sizing rows and columns, I can't say that I have ever seen a solid description of what the options are for sizing rows and columns, and the different reasons for using them.

Auto sizes the rows/columns according to their contents. * sizes the rows/columns according the the Grid's container. It will stretch the column to fill the remaining space. So for example in your XAML, I told WPF to size the first two columns according to the size of the controls contained within and the last column should be sized according to the remainder of space which can change when the Form is resized.

What you had before was with all three columns set to * was telling WPF to size each column equally such that their sum is equal to the width of the entire Form.

For example, why did the form look right until I attempted to resize by even one pixel? What was it about the way I had it where it was fine...until ANY sizing happened? What is it about Auto that fixes that?

Actually what happened when you attempted to resize was the right layout. All WPF controls are descended from a well defined hierarchy of classes that contain mechanisms for layout and rendering. Two of the key layout mechanisms are a couple of overridable functions, MeasureOverride and ArrangeOverride. All WPF controls use these overrides to determine exactly how they should be laid out. My guess is they were not called until you tried to resize your Form at runtime so they preserved the layout you wanted. But as soon as they were invoked by you moving or resizing the Form, these functions looked at what you had in the XAML and arranged themselves accordingly. It saw you wanted even columns that fit the whole Form in your Grid so it did just that.

[Shaggy Hiker]

So, it wasn't that it resized them wrong, it was that they were wrong to begin with and they snapped to 'right' when altered. That's quite believable, albeit somewhat annoying.

That's a good link, too. Thanks for that.

[Niya]

So, it wasn't that it resized them wrong, it was that they were wrong to begin with and they snapped to 'right' when altered.

Exactly!

That's a good link, too. Thanks for that.

Sure, no problem. I'll also say that the generally speaking you'd find a lot of useful information about using WPF from non-MS sources. Use MS sources if you want to know how things work on a technical level but for more aesthetic advice, that's mostly going to come from blogs, forum posts and the like.

[Shaggy Hiker]

I've certainly found that to be true for WPF. The best writing is not MS. What MS tends to put out is kind of boilerplate. I wouldn't say minimalist, but certainly not exhaustive, at least when it comes to WPF. The documentation for .NET in general, is quite good from MS. The documentation for WPF is skimpy. The documentation for Office VSTO is laughable.

[Niya]

What I found is that when it came to technical details about WPF, MS provides a lot of information. For example what events and properties do, how the layout system works, how the visual system works etc.

But if you want to figure out how to do some fancy UI trick, MS isn't going to give you that. You will have to find WPF enthusiasts who have labored to figured these things out and hope they have a blog or forum post somewhere.