Stretch WrapPanel items

Question

I have WrapPanel and very similar items within it. Maybe WrapPanel is a wrong container, just describing what I have.

I want all items have equal width; minimum width of 120. Also, I want items to stretch, that is the point.

If WrapPanel width is 150 (less than 2*minimum) there will be one column and items' width will be 150.

If WrapPanel width is 350 (less than 3*minimum) there will be two columns and items' width will be 175 (350/2).

If WrapPanel width is 370 (less than 4*minimum) there will be three columns and items' width will be 123 (370/3). It can be also two items of 123 and one of 124, does not really matter.

The question is how can I get this behavior?

Is it setting column number automatically? I did not find this functionality. — adontz, Oct 29 '12 at 19:06
yes and if you set its Rows to "1", then you don't even have to set row or column for each element. — Bizhan, Oct 29 '12 at 19:09
Can't get it work. Can you please drop a small example as an answer? — adontz, Oct 29 '12 at 19:12
Did you try just setting MinWidth=120 Width=* Horizontal/ContentAlignment=Stretch per object? — Chris W., Oct 29 '12 at 19:26
see [VirtualizingWrapPanel](https://github.com/sbaeumlisberger/VirtualizingWrapPanel)(with demo.exe), your progrom seems like [AdaptiveGridView](https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/adaptivegridview). — CodingNinja, Mar 15 '22 at 02:59

score 4 · Accepted Answer · edited May 19 '21 at 16:33

C# code:

public MainWindow()
{
    DataContext = this;
    SomeList.Add(new SomeType());
    SomeList.Add(new SomeType());
    SomeList.Add(new SomeType());
    SomeList.Add(new SomeType());
    SomeList.Add(new SomeType());
    InitializeComponent();
}
//SomeList Observable Collection
private ObservableCollection<SomeType> _someList =
    new ObservableCollection<SomeType>();
public ObservableCollection<SomeType> SomeList { get { return _someList; } }
private void UniformGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var grid = sender as UniformGrid;
    if (grid.ActualWidth > 370) grid.Columns = 3;
    else if (grid.ActualWidth > 150) grid.Columns = 2;
    else grid.Columns = 1;
}
public class SomeType : DependencyObject
{
    //Title Dependency Property
    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }
    public static readonly DependencyProperty TitleProperty =
        DependencyProperty.Register("Title", typeof(string), typeof(SomeType),
        new UIPropertyMetadata("unset yet"));
}

XAML code:

<Window.Resources>
    <DataTemplate x:Key="SomeTemplate" DataType="{x:Type local:SomeType}">
        <Border BorderBrush="Black" BorderThickness="2" CornerRadius="4">
            <TextBlock Text="{Binding Title}"/>
        </Border>
    </DataTemplate>
</Window.Resources>
<ItemsControl
    ItemsSource="{Binding SomeList}"
    ItemTemplate="{StaticResource SomeTemplate}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid SizeChanged="UniformGrid_SizeChanged"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Stretch WrapPanel items

1 Answers1