Question

I have a user control that has 5 rectangle shapes in it. I would like to be able to change the size of this control when I use it, but the rectangles don’t scale with the control when I put it in the designer and resize it there, they just get covered up or don’t expand. This seems like it should be very simple but it’s eluding me.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="WpfControlLib.CellUserControl"
Height="179.333" Width="160" x:Name="CellControl" mc:Ignorable="d">
<UserControl.Resources>
    <Storyboard x:Key="Ani"/>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Ani}"/>
    </EventTrigger>
</UserControl.Triggers>
<Grid Margin="0,0,8,8" d:LayoutOverrides="HorizontalAlignment">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="gridCon" Margin="14,13,8,8">
        <Rectangle x:Name="rectangle" Stroke="Black" Margin="0,0,111,14.333" VerticalAlignment="Bottom" Height="29">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF3B46B5" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="rectangle1" Stroke="Black" Margin="23,0,88,14.333" VerticalAlignment="Bottom" Height="55">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF3B46B5" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="rectangle2" Stroke="Black" Margin="46,0,64.96,14.333" VerticalAlignment="Bottom" Height="77">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF3B46B5" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="rectangle3" Stroke="Black" Margin="69.04,0,41.96,14.333" VerticalAlignment="Bottom" Height="105">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF3B46B5" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="rectangle4" Stroke="Black" Margin="92.04,0,18.96,14.333" VerticalAlignment="Bottom" Height="136">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FF3B46B5" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>

</Grid>

Answer 1

Answer from Ben Ronco of Microsoft:

“Put the root Grid in a Viewbox”

Just as simple as I thought it would be.