wpf ItemsControl.ItemsPanelTemplate作为网格，并在不同的列中添加新项

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++;
    }
}

当我单击该按钮时，该命令运行良好，所以我有一个新的项目控制项，我的网格作为项目面板模板正在使用新的列定义进行更新，但该项目不在右列中。

Answer 1

我知道这是一个

迟到的答案:)
更优雅的解决方案是将两个依赖项属性行和列添加到项目视图模型

然后在 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);
}

Answer 2

事实上，canvas_loaded的东西是没有用的......

问题来自 ColumnCountChanged 中的 GridHelpers 类。

我在 SetStarColumns（grid） 之后的 ColumnCountChanged 事件的末尾添加了这个，以便在相应的单元格中添加项目：

for (int i = 0; i < childCount; i++)
{
    var child = grid.Children[i] as FrameworkElement;
    Grid.SetColumn(child, i);
}

它奏效了！

编辑：我还使用了一个转换器（在上面的 Xaml 示例中称为"conv"）用于 ColumnCount ViewModel 属性上的 GridHelper.StarColumns 属性的单向绑定，以使所有新创建的列的大小相等：

public class StarsConverter : IValueConverter
{
    public object Convert(object value, Type TargetType, object parameter, CultureInfo culture)
    {
        int i = (int)value;
        string s = "0";
        for (int j = 1; j < i; j++)
        {
            s = s + ',' + j;
        }
        return s;
    }
    public object ConvertBack(object value, Type TargetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}