How to change orientation of UniformGrid control?

Question

By default, UniformGrid displays it's children as follows:

1 2 3
4 5 6
7 8 9

I want to be as follows:

1 4 7
2 5 8
3 6 9

Any ideas?

Oil

Answer 1

Easiest must be to insert them in the order you want them to show up.

If you are using a UniformGrid as an ItemsPanel in a listbox and get the items through databinding, sort the collection you are data binding to your prefered order.

Finally, if you want to do it in the view, this link describes two ways: Building a Column-Major UniformGrid in WPF

---

The page keeps vanishing.

It's here (sans images) as of 2017-06-20.

What it's doing is rotating the grid 90 degrees with a layout transform, and then further rotating each item in the grid with another layout transform so they're right side up.

Imaginary

The link seems to be broken. Is there any mirror of the referenced page? (I didn't manage to get the page out of Google's cache eiter...) – Momentous

The link is broken again, which I suppose it is to be expected after a few years. Anyways here's the new link – Rounded

Answer 2

Solution not dependent on broken links:

Last answer has broken links throughout, but... to anyone that's stumbled upon this page, I've compiled a solution for you. I've applied this to my UniformGrid:

UniformGrid xaml example

<UniformGrid> <!--Remember to invert the number of rows and columns here-->
    <!--content here-->
    <UniformGrid.LayoutTransform>
        <TransformGroup>
            <RotateTransform Angle="90"/>
            <ScaleTransform ScaleX="-1"/>
        </TransformGroup>
    </UniformGrid.LayoutTransform>
</UniformGrid>

This will rotate the whole element for 90 degrees counter-clockwise and display it invertedly across its own X-axis(it's really Y to our eyes since it's rotated now). By doing this, the grid will be populated column-first, top left being the first cell to be populated.

Different orientations:

If you want this to work differently, you can always play with the TransformGroup values. For an example, column-first from the bottom right corner would be achieved with Angle="270" and ScaleX="-1". Other two corners are achieved by using last two angle values and deleting the ScaleX factor or just simply assigning it to ScaleX="1".

There's a second step though:

The children inside are rotated with the Grid, so we have to rotated them back, if we hope to see them "straight". We do this by giving each of them a negative angle(let's say the grid angle is Angle="90", we will use Angle="-90"), like such:

<Ellipse> <!--I put an ellipse just as an example,
              you will apply this to your desired control.-->
    <Ellipse.LayoutTransform>
        <TransformGroup>
            <RotateTransform Angle="90"/>
            <ScaleTransform ScaleX="-1"/>
        </TransformGroup>
    </Ellipse.LayoutTransform>
</Ellipse>

Good luck!

Hopefully you've seen this and it helped you before melting your brain trying to figure out why Microsoft still hasn't implemented this even in .NET 6

Unbearable