Stretch WrapPanel项目

时间:2012-10-29 18:55:16

标签: .net wpf xaml .net-4.5 wrappanel

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

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

如果WrapPanel宽度为150(最小值小于2 *),则会有一列,项目的宽度为150.

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

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

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

1 个答案:

答案 0 :(得分:4)

    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>