Align a viewbox while maintaining stretch

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.

score 1 · Accepted Answer · answered Apr 16 '14 at 14:07

1

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.

answered Apr 16 '14 at 14:07

Deruijter

2,077
16
27

Martin · Answer 2 · 2014-04-16T11:33:15.020

0

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"

edited Apr 16 '14 at 11:33

answered Apr 16 '14 at 11:26

Martin

5,714
2
21
41

Thanks for your reply Martin, I just tried the code in a WPF project I have laying around and it works properly there as well.. I guess it's not code issue in this case. I'll try to find out if something's wrong with my setup. – Deruijter Apr 16 '14 at 12:44

score 0 · Answer 3 · answered Sep 08 '17 at 03:10

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>

Align a viewbox while maintaining stretch

3 Answers3