How to set VerticalContentAlignment to top in WrapPanel?

Question

I have a WrapPanel which is vertically aligned.

My problem is, whenever an elements overflows, it goes to next column. So the items in First column becomes uniformly aligned vertically.

Example: Suppose I have 170px Height for WrapPanel and 35px Height for items of WrapPanel. So it will show first 4 elements in first column which will be uniformly spaced. Rest items will be transferred to next column and so on. In the 170px height, I want these items to use their required height and leave the extra space as it is. So after 140px, I should get 30px space free.

I am not getting any way to do this from the properties of WrapPanel, As it is having very less properties to support the layout and styling of its items.

How can I do this?

If you have to display items in uniform number of rows and columns then UniformGrid allows you to do that. For example you can have 4 elements in each row and then the next 4 will occupy the next row and so on. The only thing that I am not sure of is that you wan't column to fill first and then spill over to next column. For that I think LayoutTransform should work. — Jatin, May 24 '13 at 10:46

score 4 · Answer 1 · answered May 24 '13 at 12:31

You could use a VariableSizedWrapGrid, just like from the Contoso Cookbook Windows 8 examples. State a MaximumRowsOrColumns there, and it will wrap your items onto another column (or row).

    <VariableSizedWrapGrid Orientation="Vertical"
                           MaximumRowsOrColumns="4" />

Is this what you want?

score 0 · Answer 2 · answered May 24 '13 at 11:27

Here is a example of using UniformGrid that may be close to what you are trying to achieve.

XAML

<Grid>
    <ListBox ItemsSource="{Binding GridItemsList}" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding ItemName}" />
                    <StackPanel.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </StackPanel.LayoutTransform>
                </StackPanel>

            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </ListBox.LayoutTransform>
    </ListBox>
</Grid>

Code Behind

public partial class UniformGridWindow : Window {
    public UniformGridWindow() {

        //Sample Data
        GridItemsList = new List<GridItem> {
            new GridItem("Item 1"),
            new GridItem("Item 2"),
            new GridItem("Item 3"),
            new GridItem("Item 4"),
            new GridItem("Item 5"),
            new GridItem("Item 6"),
            new GridItem("Item 7"),
            new GridItem("Item 8")
        };

        InitializeComponent();
        this.DataContext = this;
    }

    public List<GridItem> GridItemsList { get; set; }

}

public class GridItem {
    public string ItemName { get; set; }
    public GridItem(string itemName) {
        this.ItemName = itemName;
    }
}

How to set VerticalContentAlignment to top in WrapPanel?

2 Answers2