开发者

How to change orientation of UniformGrid control?

开发者 https://www.devze.com 2023-01-15 22:56 出处:网络
By default, UniformGrid displays it\'s children as follows: 1 2 3 4 5 6 7开发者_开发问答 8 9 I want to be as follows:

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?


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消