CODEWITHSUNDEEP
c#.netwpfgrid
Alexander Forbes-Reed
Alexander Forbes-Reed

Reputation: 2975

WPF UniformGrid in reverse order

I have an IList of strings, and i'd like to position each in a button in a sort of down and left grid order;

enter image description here

However I can't think of a way to do this, as the number of strings isn't finite, so I can't just use a grid with col/row definitions. Has anyone tried to do this in WPF?

Upvotes: 1

Views: 1277

Answers (1)

Mark Feldman
Mark Feldman

Reputation: 16119

You can do it with WrapPanel. WrapPanel doesn't normally support right-to-left but you can get around it by flipping the layout transform for the entire panel and then flipping it again for each of the children:

<Window.Resources >
    <x:Array Type="{x:Type sys:String}" x:Key="theItems" xmlns:sys="clr-namespace:System;assembly=mscorlib">
        <sys:String>1</sys:String>
        <sys:String>2</sys:String>
        <sys:String>3</sys:String>
        <sys:String>4</sys:String>
        <sys:String>5</sys:String>
        <sys:String>6</sys:String>
        <sys:String>7</sys:String>
    </x:Array>
</Window.Resources>

<Grid>
    <ItemsControl Name="itemsControl" FontSize="72" ItemsSource="{StaticResource theItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" HorizontalAlignment="Right">
                    <WrapPanel.LayoutTransform>
                        <ScaleTransform ScaleX="-1" ScaleY="1" />
                    </WrapPanel.LayoutTransform>
                </WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Button Width="100" Height="100" Margin="10">
                                <ContentPresenter Content="{Binding}"/>
                            </Button>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="-1" ScaleY="1" />
                    </Setter.Value>
                </Setter>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

Upvotes: 1

Related Questions