Grid with RowDefinitions based on content

Question

I am trying to get something like an image with adjustable margins done. The image itself is actually a path and resides in a StackPanel, stretching vertically. The StackPanel's width can be adjusted, and I want to keep the image's ratio and the ratio of path size to margin.

<StackPanel>
  <Grid HorizontalAlignment="Stretch">
    <Grid.RowDefinitions>
      <RowDefinition Height="0.25*"/>
      <RowDefinition Height="0.5*"/>
      <RowDefinition Height="0.25*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.25*"/>
      <ColumnDefinition Width="0.5*"/>
      <ColumnDefinition Width="0.25*"/>
    </Grid.ColumnDefintions>

    <Path Grid.Row="1"
          Grid.Column="1"
          Data="...blabla..."
          Fill="#FF0072C6"
          Stretch="UniformToFill"/>
  </Grid>
</StackPanel>

Now, the problem is, even though the path object gets drawn in the grid, the first and third rows are always of zero height, instead of getting set based on the height of the 2nd row. I know this happens because the Grid resides in a StackPanel, which ignores automatic height settings and doesn't even let the Grid stretch vertically (or horizontally depending on orientation). It does work if I set a fixed height to the grid but that would ruin the aspect ratio of the image when resizing. How can I get this to work?

This is what I have:

This is what I want:

EDIT:

It seems there is confusion concerning my question. So to hopefully clarify, here's the desired result after resizing the StackPanel:

As you can see, the whole grid is supposed to resize like it was an actual image. The Grid should keep its aspect ratio. This is not about the Path inside the Grid.

What if you use a grid with rows heigth set to Auto instead of a stackpanel? — Babbillumpa, Jul 09 '18 at 10:17
Do you want to have the Description and Source text boxes inside or outside of the StackPanel? — FrankM, Jul 09 '18 at 10:22
@FrankM That does not matter, actually. I could always wrap it in another Panel. Currently the boxes are inside the StackPanel. — Otto Abnormalverbraucher, Jul 09 '18 at 10:54

Babbillumpa · Accepted Answer · 2018-07-09T12:16:44.670

1

If i have correctly understood the problem, a simple solution could be fixing sizes and using a viewbox:

<StackPanel>

<!--The other rows-->

    <Viewbox>
        <Grid Width="100" Height="100">
            <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25"/>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="25"/>
            </Grid.ColumnDefinitions>
            <Path Grid.Row="1"  Grid.Column="1"   Data="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" Fill="Blue" Stretch="Uniform" />
        </Grid>
    </Viewbox>
</StackPanel>

edited Jul 09 '18 at 12:16

answered Jul 09 '18 at 10:22

Babbillumpa

1,854
1
16
21

The problem with this approach is that the image stretches vertically to the bottom and thus deforming the image ratio. The Grid height is supposed to change when resizing the StackPanel so that the image keeps its aspect ratio. – Otto Abnormalverbraucher Jul 09 '18 at 10:49
@OttoAbnormalverbraucher Even if you put stretch uniform and not UniformToFill?? If you set uniform it should mantain the ratio. See the edit – Babbillumpa Jul 09 '18 at 10:56
@OttoAbnormalverbraucher i think that this will maintain the space between the image and the surrounding area because the grid proportions are respected. The problem is the stretch property that has to be set to "Uniform" and not "uniformToFill" – Babbillumpa Jul 09 '18 at 11:08
Yes, even then. If I set it to Uniform the Path gets centered vertically in the grid cell, but the cell is now higher than the Path. Thus, the "Margin" (i.e. distance to the top and bottom, the white area surrounding the Path) are now taller. If I reduce the width of the outer Grid, this effect increases. The Path gets smaller but the Grid's height stays vertically stretched. – Otto Abnormalverbraucher Jul 09 '18 at 11:12
The middle Grid cell should **always** be the size of the Path inside it. The other cells should adjust. – Otto Abnormalverbraucher Jul 09 '18 at 11:15
@OttoAbnormalverbraucher i tried another way, now that i understand what you want to achieve... – Babbillumpa Jul 09 '18 at 12:09

Grid with RowDefinitions based on content

1 Answers1