Resizing ChildWindow height on-the-fly in Silverlight causes strange behavior

Question

I'm having a strange problem when resizing a canvas' parent, which happens to be a ChildWindow.

From a high level, this is what I'm trying to do when a user clicks on a button:

1. Unhide a row, by setting the RowDefinition height from 0 to something larger.
2. Resize the canvas, since everything inside is taller.
3. Resize the canvas' parent (a ChildWindow), since the canvas is taller.

Steps 1 and 2 work fine. The problem is with step 3: when I step through the F#/Silverlight code, all of the sizes appear to be set correctly. The problem is that the ChildWindow gets rendered on the screen as being much taller than it really should.

Take a look a the example below:

member this.btnWhatever_Click(sender : obj) (args : RoutedEventArgs) =
    let parentWindow = this.Parent :?> ChildWindow // get the canvas' parent, and cast it to a ChildWindow
    // if the RowDefinition height is set to our standard, the hide it by setting it to 0
    if this.aRowDefinition.Height.Value.Equals STANDARD_ROW_HEIGHT then
        this.aRowDefinition.Height <- new GridLength(0.)
        this.Height <- this.Height - HEDGE_ROW_HEIGHT
        parentWindow.Height <- parentWindow.Height - STANDARD_ROW_HEIGHT
        this.btnCreateOrRemoveHedge.Content <- "On"
    // otherwise, unhide the RowDefinition by setting it to the standard height
    else
        this.aRowDefinition.Height <- new GridLength(STANDARD_ROW_HEIGHT)
        this.Height <- this.Height + STANDARD_ROW_HEIGHT
        parentWindow.Height <- parentWindow.Height + STANDARD_ROW_HEIGHT
        this.btnWhatever.Content <- "Off"
    ()

In this case, my STANDARD_ROW_HEIGHT is only 23 pixels, and yet an empty space of 92 pixels is being added to the ChildWindow below the title bar after the user clicks the button. What's more, is that when the user clicks the button again (to toggle the row visibility), the row disappears but the extra space at the top of the window remains. Initially, this empty space is not there. See this image:

Any thoughts/help would be greatly appreciated. Thanks!

Answer 1

I am not an expert in this stuff, but a lot of WPF rendering/sizing happens automatically. I think there is a two-phase model, where first components are asked for their preferred size/constraints, and then a second pass lays things out given actual constraints. For many components you don't need to do any explicit sizing because they will be automatically sized based on the sizes of their children. It sounds like in general you may be exercising too fine/low-level control of sizes, and should left WPF do more of the work for you.

To 'hide' a row, I bet it is probably better to toggle the .Visible property than to set its height to zero.

It smells like maybe you're adding explicit height to the parent, but don't need to because WPF is already going to resize the parent since now it holds more visible content. Never setting the parent height to anything, anywhere, might fix it.

(These are random suggestions from a not-too-well-informed WPF user, so good luck :) )