CODEWITHSUNDEEP

Reputation: 1322

Use Viewbox to scale a control within a grid

I have a control that I want to scale both vertically and horizontally as the window is resized. Also, I have controls on both left and right sides of the middle control, that I want to align to it. How can I achieve this?

Currently I'm able to scale vertically, but not horizontally. The controls on left and right side are cut rather than the middle control being scaled.

In short, I want to achieve this, while also achieving the left image above.

Here's how the control looks in reality.

My current XAML:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid ShowGridLines="True" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Left" Grid.Column="1"
                BorderThickness="5" BorderBrush="Red"
                Height="100" Width="150"
                VerticalAlignment="Center">
            <TextBlock Text="Left" />
        </Border>
    </Grid>

    <Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
        <Border BorderThickness="2" BorderBrush="Black"
                Height="100" Width="60">
            <TextBlock Text="Middle" />
        </Border>
    </Viewbox>

    <Grid ShowGridLines="True" Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Right" Grid.Column="0"
                BorderThickness="5" BorderBrush="Red"
                Height="100" Width="150"
                VerticalAlignment="Center" HorizontalAlignment="Right">
            <TextBlock Text="Right" />
        </Border>
    </Grid>

</Grid>

Upvotes: 2

Views: 2010

Answers (2)

Reputation: 1322

Here's the final solution, based on @Rise's answer. This way I was able to remove the grids around the side controls as well.

<Grid ShowGridLines="True" HorizontalAlignment="Center">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Border x:Name="Left" Grid.Column="0"
            BorderThickness="5" BorderBrush="Red" 
            Height="100" Width="150"
            VerticalAlignment="Center">
        <TextBlock Text="Left" />
    </Border>

    <Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
        <Border BorderThickness="2" BorderBrush="Black"
                    Height="100" Width="60">
            <TextBlock Text="Middle" />
        </Border>
    </Viewbox>

    <Border x:Name="Right" Grid.Column="2"
            BorderThickness="5" BorderBrush="Red"
            Height="100" Width="150"
            VerticalAlignment="Center" HorizontalAlignment="Right">
        <TextBlock Text="Right" />
    </Border>

</Grid>

Upvotes: 1

cuongtd

Reputation: 3192

try this

<Grid>
    <Grid HorizontalAlignment="Center">
        <Grid ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Left"
                    Grid.Column="2"
                    Width="150"
                    Height="100"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="5">
                    <TextBlock Text="Left" />
                </Border>
            </Grid>

            <Viewbox x:Name="Middle"
                 Grid.Column="1"
                 Stretch="Uniform">
                <Border Width="60"
                    Height="100"
                    BorderBrush="Black"
                    BorderThickness="2">
                    <TextBlock Text="Middle" />
                </Border>
            </Viewbox>

            <Grid Grid.Column="2" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Right"
                    Grid.Column="0"
                    Width="150"
                    Height="100"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="5">
                    <TextBlock Text="Right" />
                </Border>
            </Grid>

        </Grid>
    </Grid>
</Grid>

Upvotes: 1

Related Questions