WPF scrolling on ScaleTransform issue, multiple UI elements

Question

Also asked at http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f765d4c9-1719-4757-b467-2492d87bb4ab

All,

I have a slider that performs a scale-transform in my WPF App. Now I'm running into an issue where I have an element inside of a scrollviewer inside of a row that has Height="*" and another element in a subsequent row that has Height="Auto".

The goal is that we don't know the row heights until run-time (or even how big the elements will be), but that we will have both elements displayed on the screen, with the first element taking up as much space as it can and the bottom element always being visible, taking up whatever space it needs.

I have the following problem/solution statement (which I think best describes my issue) and, as you can see, I'm stuck at what to do when I want to achieve this goal and still allow access to all UI elements should the zoom be large enough to push one of the elements off the screen (hopefully that made sense).

Problem statement:
    ScaleTransform is causing top DG to disappear where RowDefinition Height="*"

Solution:
    Set Minimum height on RowDefinition to prevent DG from disappearing.

Problem statement:
    Setting Minimum height on RowDefinitoin causes lower rows to dissapear.

Solution:
    Add scrollviewer encapsulating grid.

Problem statement:
    Since top DG is in RowDefinition Height="*", if there is a lot of data in top DG, bottom DGs cannot be seen without scrolling.

Solution statement:
    ???

Here's my current code:

<Grid.RowDefinitions>
    <RowDefinition Height="*" MinHeight="120" />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0">
    <DataGrid ItemsSource="{Binding Path=SomePathThatCouldHaveLotsOfData}">
        <!--Note that DataGrid implements its own scrollviewer as long as it's not surrounded by another scrollviewer-->
        <!--...-->
    </DataGrid>
</GroupBox>
<GroupBox Grid.Row="1">
    <!--...-->
</GroupBox>

Hopefully that all made sense what my issue is and what I'm trying to do. Any ideas how I can get this done (hopefully in a clean way). I'm using MVVM if it helps.

EDIT: I should point out that I also won't know any max-height until run-time (and max-height is probably irrelevant anyway since we'll be using scale-transform).

Answer 1

All,

I managed to acheive my goal, but it was a bit of an ugly hack.

Basically, I had to trap the Loaded and SizeChanged event of my UserControl/Page/Window and use these events to set the ScrollViewer.ViewPortHeight value to a property in my VM. Then, it was simply a matter of subtracting a known value from this to use as my Max value. Then, it was simply a matter of multiplying the ViewPortHeight by the percentage that I wanted each UI element to take up on the screen and bind the UIs element to that.

Hopefully this will help someone else having the same business requirement.