Question

我有WrapPanel和非常相似的项目。也许WrapPanel是一个错误的容器，只是描述我拥有的东西。

我希望所有物品的宽度相等;最小宽度为120.此外，我希望物品伸展，这就是重点。

如果WrapPanel宽度为150（最小值小于2 *），则会有一列，项目的宽度为150.

如果WrapPanel宽度为350（最小值小于3 *），则会有两列，项目的宽度为175（350/2）。

如果WrapPanel宽度为370（最小值小于4 *），则会有三列，项目的宽度为123（370/3）。它也可以是123项中的两项和124中的一项，并不重要。

问题是如何才能得到这种行为？

Answer 1

    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"));
}


<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项目

1 个答案: