Align a viewbox while maintaining stretch

StackOverflow https://stackoverflow.com/questions/23105180

  •  04-07-2023
  •  | 
  •  

Question

I have a grid(see images below) that contains some text(in a another grid (pink area)) and a Datagrid which contains a few rows with categorized data (blue area).

The blue area is always located at the bottom and has a fixed height and is working properly. However, the pink grid is located inside a viewbox so that is stretches depending on the size of the screen/browser. The stretch is working the way I want it, but I want to align the viewbox to the top-left. The problem is that if I align the viewbox to the top left, the stretch is gone.

What I tried so far..

Stretch is ok, but not aligned:

<Border BorderThickness="1" BorderBrush="Black">
    <Grid Background="Gold">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Viewbox Grid.Row="0">
            <Grid Background="HotPink">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
            </Grid>
        </Viewbox>
        <Rectangle Grid.Row="1" Height="50" HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
    </Grid>
</Border>

Results in.. enter image description here

Alignment is ok, but stretch is gone:

<Border BorderThickness="1" BorderBrush="Black">
    <Grid Background="Gold">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Viewbox Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top">
            <Grid Background="HotPink">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="20"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
            </Grid>
        </Viewbox>
        <Rectangle Grid.Row="1" Height="50" HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
    </Grid>
</Border>

Results in.. enter image description here

But what I actually want is: (what I hoped the code above would achieve) enter image description here

Any help is greatly appreciated.

Was it helpful?

Solution

Apparently the problem occurred because the UserControl this code is in, was loaded into a ScollViewer.

After removing the ScrollViewer (didn't really need it), the stretching and aligning of the Viewbox worked properly.

OTHER TIPS

The first thing that comes to my mind is:

<Viewbox Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Stretch">
    ...
</Viewbox>

[Edit] I tested (Silverlight 4, IE11) both versions: VerticalAlignment="Stretch" and VerticalAlignment="Top" ...and both yield the visual result you want to accomplish. Not sure why you got different results with the VerticalAlignment="Top"

Just add HorizontalAlignment="Left" to your first code.

    <Border BorderThickness="1" BorderBrush="Black">
        <Grid Background="Gold">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <Viewbox Grid.Row="0" HorizontalAlignment="Left">
                <Grid Background="HotPink">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.Column="0" Grid.Row="0" Text="A"/>
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="B"/>
                    <TextBlock Grid.Column="0" Grid.Row="1" Text="C"/>
                    <TextBlock Grid.Column="1" Grid.Row="1" Text="D"/>
                </Grid>
            </Viewbox>
            <Rectangle Grid.Row="1" Height="50" 
HorizontalAlignment="Stretch" Fill="DeepSkyBlue"></Rectangle>
        </Grid>
    </Border>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top