如何将 ItemsControl（网格外）绑定到网格？

Question

我有一个视图模型，其中包含一个名为 MyLabel 的对象的 ObservableCollection。这些对象有 3 个属性（content、rowNr、columnNr）应该分别绑定到 Content、Grid.Row 和 Grid.Column 属性。

我定义 ItemsControl 的原因是因为它在我的网格中不起作用，即我无法绑定 rowNr 和 columnNr，因为网格 Grid.Column /Grid.Row 属性不断覆盖我的数据。

如何才能使我的标签位于网格内？

<StackPanel>
    <ItemsControl ItemsSource="{Binding Path=MyLabelList}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding content}" Grid.Column="{Binding columnNr}" Grid.Row="{Binding rowNr}" Style="{StaticResource MyLabel}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
</StackPanel>

Answer 1

尝试使用Grid 作为ItemsPanel 的ItemsControl：

<ItemsControl ItemsSource="{Binding Path=MyLabelList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Column" Value="{Binding columnNr}" />
            <Setter Property="Grid.Row" Value="{Binding rowNr}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding content}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

Grid 和 ItemsControl 一起玩不太好，但您可以参考以下博文：

使用网格作为 ItemsControl 的面板： http://blog.scottlogic.com/2010/11/15/using-a-grid-as-the-panel-for-an-itemscontrol.html

另一个选项可能是在视图中“手动”将<RowDefinition> 和<ColumnDefinition> 元素动态添加到网格中。

Answer 3

您必须在GetContainerForItemOverride() 上以编程方式将绑定设置为ItemContainer

public class GridItemsControl : ItemsControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        FrameworkElement fwE = base.GetContainerForItemOverride() as FrameworkElement;
        fwE.SetBinding(Grid.ColumnProperty, "columnNr");
        fwE.SetBinding(Grid.RowProperty, "rowNr");

        return fwE;
    }
}

在这样的视图中：

<custom:GridItemsControl>
    <custom:GridItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <!-- Add here -->
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <!-- Add here -->
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </custom:GridItemsControl.ItemsPanel>
</custom:GridItemsControl>

您还可以实现自己的网格，以生成所需数量的行和列。

这个伎俩是相当合法的。

其他信息 您的ItemTemplate 不会直接添加到您的ItemsPanel（在您的情况下为Grid），总是有ContentPresenter 或类似的东西，因为您使用的是DataTemplate。所以你必须这样走。

为了使其更易于理解，您可以这样想象：

                <Grid> <!-- This is the ItemsPanel -->
                    <ContentPresenter>
                        <!-- This needs the Binding on Grid.Row, but doesn't know shit without my solution -->
                        <!-- This is your ItemContainer that has the DataContext of your ViewModelItem -->
                        <ContentPresenter.ContentTemplate>
                            <DataTemplate>
                                <!-- Here is your ItemTemplate -->
                            </DataTemplate>
                        </ContentPresenter.ContentTemplate>
                    </ContentPresenter>
                </Grid>

Answer 4

如果您不想像@Peter 在他的回答中建议的那样子类化ItemsControl，您可以简单地使用ItemsControl.ItemContainerStyle 绑定Grid.Column 和Grid.Row 属性：

<ItemsControl ItemsSource="{Binding Path=MyLabelList}">
    <ItemsPanelTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <!-- Add here -->
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <!-- Add here -->
            </Grid.RowDefinitions>
        </Grid>
    </ItemsPanelTemplate>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding content}" Style="{StaticResource MyLabel}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding rowNr}" />
            <Setter Property="Grid.Column" Value="{Binding columnNr}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

但是，正如其他人已经提到的，列和行定义不会自动添加，您要么需要在设计时知道它并静态添加它们，要么需要找到某种方法来动态添加它们在运行时。