Align a viewbox while maintaining stretch

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

  •  04-07-2023
  •  | 
  •  

문제

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.

도움이 되었습니까?

해결책

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.

다른 팁

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top