Wpf ItemsControl.ItemsPanelTemplate 作为 Grid 并在不同列中添加新项目

Question

我正在处理一个动态创建的网格，在每个新列中包含一个添加到 ItemsControl 的新项目。

我正在使用 Rachel Lim 的 GridHelper

现在，我有一个如下所示的主窗口，

Xaml 代码:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:StarsConverter x:Key="conv"/>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="9*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Command="{Binding Add}"/>
        <ItemsControl x:Name="list" Grid.Column="1" ItemsSource="{Binding Oc}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid x:Name="grid" Background="Black"
                      local:GridHelpers.StarColumns="{Binding ColumnCount, Converter={StaticResource conv}, Mode=OneWay}" local:GridHelpers.ColumnCount="{Binding ColumnCount}"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Canvas Loaded="canvas_Loaded" x:Name="canvas" Background="White">
                        <Border  Canvas.Left="25" Canvas.Top="25" Height="25" Width="50" Background="Red">
                            <TextBlock Text="{Binding}"/>
                        </Border>
                    </Canvas>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

和 Xaml.cs

public partial class MainWindow : Window
{
    private Canvas canvas;
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new ViewModel();
    }

    private void canvas_Loaded(object sender, RoutedEventArgs e)
    {
        ViewModel vm = this.DataContext as ViewModel;
        canvas = sender as Canvas;
        Binding b = new Binding();
        b.Source = vm;
        b.Path = new PropertyPath(ViewModel.ColumnCountProperty);
        b.Mode = BindingMode.OneWay;
        canvas.SetBinding(Grid.ColumnProperty, b);
    }
}

这个 MainWindow 有一个 ViewModel 作为 DataContext:

public class ViewModel : DependencyObject
{
    private RelayCommand add;

    public ViewModel()
    {
    }

    public ObservableCollection<String> Oc
    {
        get { return (ObservableCollection<String>)GetValue(OcProperty); }
        set { SetValue(OcProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Oc.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty OcProperty =
        DependencyProperty.Register("Oc", typeof(ObservableCollection<String>), typeof(ViewModel), new UIPropertyMetadata(new ObservableCollection<string>()));

    public int ColumnCount
    {
        get { return (int)GetValue(ColumnCountProperty); }
        set { SetValue(ColumnCountProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ColumnCount.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ColumnCountProperty =
        DependencyProperty.Register("ColumnCount", typeof(int), typeof(ViewModel), new UIPropertyMetadata(0));

    public RelayCommand Add
    {
        get
        {
            if (this.add == null)
                this.add = new RelayCommand(param => this.AddString(), param => this.CanAddString());
            return this.add;
        }
    }

    private bool CanAddString()
    {
        return true;
    }

    private void AddString()
    {
        this.Oc.Add("test" + ColumnCount);
        ColumnCount++;
    }
}

当我单击该按钮时，该命令运行正常，因此我有一个新的 itemscontrol 项目和我的网格，因为 ItemsPanelTemplate 正在使用新的 ColumnDefinition 进行更新，但该项目不在正确的列中。

Answer 1

我知道这是一个迟到的答案:)
一个更优雅的解决方案是将两个依赖属性 Row 和 Column 添加到您的 Items ViewModel

然后在您的 ItemsControl 中定义一个 ItemContainerStyle:

<ItemsControl>
     <ItemsControl.ItemContainerStyle>
       <Style>                            
          <Setter Property="Grid.Row" Value="{Binding Path=Row}" />
          <Setter Property="Grid.Column" Value="{Binding Path=Column}" />
       </Style>                  
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

当您填充 ItemsSource 集合时，您已经设置了行和列属性:

for (uint i = 0; i < yourCollection.Count; ++i )
{
    var item = yourCollection[i];
    item.Row = (int)(i / ColumnCount);
    item.Column = (int)(i % ColumnCount);
}