3

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

我正在使用 Rachel Lim 的GridHelper

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

Xml代码：

<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 进行更新，但该项目不在右列中。

4

2 回答 2

3

我知道这是一个迟到的答案 :)
一个更优雅的解决方案是将两个 Dependency Properties 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 集合时，您已经设置了 The Row 和 Column 属性：

for (uint i = 0; i < yourCollection.Count; ++i )
{
    var item = yourCollection[i];
    item.Row = (int)(i / ColumnCount);
    item.Column = (int)(i % ColumnCount);
}
于 2013-08-21T12:06:24.360 回答
1

事实上 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 属性的 OneWay 绑定，以使所有新创建的列的大小相同：

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();
    }
}
于 2012-07-04T20:56:47.943 回答