How to maintain the aspect ratio of Grid in this case?

Question

I am working on silverligth 5 and under a situation where I have 3 row in a grid. frst contains some text second contains a Scrollviewer and the third one contains buttons.

I want something like that when i resize the grid (suppose make it smaller) then button(on row 3) must persist but the data inside the scrollviewer (row2) can become smaller(which can be further view by scrollviewer) whereas UIelement on first row also must persist like buttons.

Here is my try of code:

<Grid x:Name="LayoutRoot" Background="{StaticResource BGBrush_1}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>



    <TextBlock Grid.Row="0" Text="EOD" FontWeight="Bold" Foreground="Orange" Margin="10" VerticalAlignment="Center" />

    <ScrollViewer x:Name="panelScrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Hidden" Height="600">
        <telerik:RadTreeView Name="RadTreeViewObj" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
            <telerik:RadTreeView.ItemTemplate>
                <telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
                    // here are some UI elements
                </telerik:HierarchicalDataTemplate>
            </telerik:RadTreeView.ItemTemplate>
        </telerik:RadTreeView>
    </ScrollViewer>

    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Command="{Binding ButtonCancelCommand}" Height="23" HorizontalAlignment="Left" Margin="30,10,10,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
        <Button Grid.Column="1" x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Command="{Binding ButtonValidateCommand}" Height="23" HorizontalAlignment="Right" Margin="10,10,30,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
    </Grid>
</Grid>

How to achieve this ?

Please see that second button is hidden behind. (only half visible). How to solve this ?

Answer 1

Change your rowdefinitions to this:

<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />

And remove the fixed Height from the ScrollViewer.

The first and last rows will be as small as possible, while the middle row will take up the remaining space.

To avoid the Buttons overlapping, you can position them like this:

<StackPanel Grid.Row="2" HorizontalAlignment="Right" Orientation="Horizontal">
        <Button x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Margin="10,10,30,10" VerticalAlignment="Bottom" Width="80"/>
        <Button x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Margin="30,10,10,10"  VerticalAlignment="Bottom" Width="80" />
</StackPanel>

Note: This will right-align the Cancel button. (I have also placed it to the right of the Validate button)