Grid with squares problem

How-to Discussions
1

Hi,

I’ve got a grid with equal squares as seen in added picture!

file
JI7EvfN1ze1u-image-1507126599490.15.05.png692×520

Code:

<Grid ColumnCount="4" Width="100%">
	<StackPanel Column="0">
		<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>
		<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>
		<Image Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey"/>		
	</StackPanel>
	<Image ColumnSpan="3" Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Width="100%" MinHeight="0" MaxHeight="100%" BoxSizing="FillAspect" Aspect="1" Color="ColorDarkGrey" Alignment="Top"/>
</Grid>

Because the total width of my grid divided by four (columns) isn’t a round number, the grid isn’t a perfect grid as seen at the bottom. Is there a way to force the width of the grid to be dividable by 4 so the grid is always perfect?

preferably by keeping width dynamic without setting width in points.

2

You should get rid of the StackPanel and just let Grid do its job in how it’s sizing and filling its cells. Also, it seems that you could just set the box-aspect right on the Grid, too?

Here’s a complete example that doesn’t suffer from any aliasing:

<App>
    <Grid Columns="1*,3*" RowCount="3" BoxSizing="FillAspect" Aspect="1">
        <Image Column="0" Row="0"
            Url="https://unsplash.it/400/400?image=1" StretchMode="UniformToFill" Color="#333" />
        <Image Column="0" Row="1"
            Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Color="#333" />
        <Image Column="0" Row="2"
            Url="https://unsplash.it/400/400?image=3" StretchMode="UniformToFill" Color="#333" />
        <Image Column="1" RowSpan="3"
            Url="https://unsplash.it/400/400?image=4" StretchMode="UniformToFill" Color="#333" />
    </Grid>
</App>
3

Thanks for the quick reply, i’ve tried your approach but that way i don’t have perfect square pictures. What do i need to add to get all squares.

4

I’m not sure what’s the cause of the not-perfect-square, but changing the Aspect property value (below 1, over 1) squashes it either vertically or horizontally.

5

The problem with the squares is with the images itself not with the grid. I want the images inside this grid to be perfect squares.

To be clear, the design i’m after:

file
ygZT8N9YBQNb-image-1507129931461.11.46.png1142×1420

6

Seems like a little math exercise around rows and columns then. Here’s your perfect squares:

<App>
    <Grid Columns="1*,2*" RowCount="4" BoxSizing="FillAspect" Aspect="1" CellSpacing="1">
        <Image Column="0" Row="0"
            Url="https://unsplash.it/400/400?image=1" StretchMode="UniformToFill" Color="#333" />
        <Image Column="0" Row="1"
            Url="https://unsplash.it/400/400?image=2" StretchMode="UniformToFill" Color="#333" />
        <Image Column="0" Row="2"
            Url="https://unsplash.it/400/400?image=3" StretchMode="UniformToFill" Color="#333" />
        <Image Column="1" ColumnSpan="2" RowSpan="3"
            Url="https://unsplash.it/400/400?image=4" StretchMode="UniformToFill" Color="#333" />
    </Grid>
</App>
7

The Aspect="#" is a ratio of the desired X to Y aspect. If you want square cells this number needs to be the ratio of horizontal to vertical cells. For example:

<Grid ColumnCount="4" RowCount="3" Aspect="4/3">

or

<Grid ColumnCount="3" RowCount="7" Aspect="3/7"/>

These will result in square cells. You then use Row,Column,RowSpan and ColumnSpan to fill up those cells with images.

I think you’re desired grid, the last image you posted, might be:

<Grid ColumnCount="4" RowCount="5" Aspect="4/5">

Most images will just fill one cell, but the large ones will be <Image Row="0" Column="0" RowSpan="2" ColumnSpan="2"> and <Image Row="2" Column="1" RowSpan="3" ColumnSpan="3"/>

8

Thanks to the both of you, that solved it completely!
Keep up the good work!

9

how to make grid in round shape ?

10

@Hiren: please don’t hijack forum threads and make a new forum post with your question. Include a screenshot or a picture to explain yourself better.