CODEWITHSUNDEEP
wpf
user2316154
user2316154

Reputation: 334

Creating two rectangles on top of each other that resize proportionally

EDIT: I made my example screen grabs more illustrative. They were conflicting with the text description.

I am a complete WPF newbie.

I want to have a thin rectangle with a dividing line that will resize as I expand and contract the window. Since I need to color the rectangle differently above and below the line I thought to do this with one rectangle overlaid on top of the other.

I can get a single rectangle that fills up the xaml control top to bottom ( called tallRectangle ) to resize properly with the window, but I can't figure out how to extend that behavior to the second rectangle:

<Grid>
    <Rectangle x:Name="tallRectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Margin="23,0,0,0" Stroke="Black" Width="56"/>
    <Rectangle x:Name="halfRectangle" Fill="#FF757576" HorizontalAlignment="Left" Margin="84,136,0,0" Stroke="Black" Width="53" StrokeThickness="0" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
        <Rectangle.LayoutTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.LayoutTransform>
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>

I wish the second one, halfRectangle, to be half the size of the first, but to also scale larger and smaller if the window is resized. But I don't know how to make it do that.

Here is how it starts out:

enter image description here

When I make the window smaller, the top of the second rectangle stays static:

enter image description here

I would like the second rectangle to resize itself proportionally as well, like the orange outline in this:

enter image description here

This is only a very first step to what I'd like to have eventually, but I hope once I understand how to get that behavior in the second rectangle I'd be able to figure out the remainder of it.

Eventually I'd need to set that second rectangle to be a percentage of the height of the first, and I'd also need to add a variable number of hash marks to the first rectangle dynamically, at variable positions. It seems that once I understand how to get that second rectangle resizing, I'd be able to figure out the hash marks too.

EDIT: Once the grid structure is in place as explained in the answer to this question, the code behind can be modified to dynamically set the ratio, for example:

    Dim realDepth = 8000
    Dim divideDepth = 2600

    Dim realScreenHeight = topRectangle.Height.Value + bottomRectangle.Height.Value
    Dim realHeightToScreenRatio = realScreenHeight / realDepth
    Dim divideScreenPoint = divideDepth * realHeightToScreenRatio

    topRectangle.Height = New GridLength(divideScreenPoint, GridUnitType.Star)
    bottomRectangle.Height = New GridLength(realScreenHeight - topRectangle.Height.Value, GridUnitType.Star)

The magic sprinkles is the second parameter to GridLength in order to preserve the dynamic resizing of the row's height.

Upvotes: 0

Views: 539

Answers (1)

Clemens
Clemens

Reputation: 128061

If you are already using a Grid, why not define two equally sized rows:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Grid.RowSpan="2" Fill="#FFF4F4F5" Stroke="Black" Width="56"/>
    <Rectangle Grid.Row="1" Fill="#FF757576" Stroke="Black" Width="56"/>
</Grid>

If you need to set the ratio of the row heights at runtime, you can simply assign a name to each row

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="row1"/>
        <RowDefinition x:Name="row2"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.RowSpan="2" Fill="#FFF4F4F5" Stroke="Black" Width="56"/>
    <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FF757576" Stroke="Black" Width="56"/>
</Grid>

and change their relative heights like this:

row1.Height = new GridLength(2, GridUnitType.Star); // 2/5
row2.Height = new GridLength(3, GridUnitType.Star); // 3/5

Upvotes: 1

Related Questions