Silverlight 中的 ItemsControl Grid.Row Grid.Column 绑定答案

【问题标题】：ItemsControl Grid.Row Grid.Column Binding in SilverlightSilverlight 中的 ItemsControl Grid.Row Grid.Column 绑定
【发布时间】：2012-08-23 23:54:38
【问题描述】：

我正在尝试使用 ItemsControl 为 Grid.Row 和 Grid.Column 使用不同的 X 和 Y 值填充网格，我从我的 WPF 项目中复制了它，但无法让它在 Silverlight 中工作（Windows电话）。

这是它的简化版本：

DataContext设置为的ViewModel：

public class ViewModel
{
    public ObservableCollection<GridItem> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<GridItem>();
        FillData();
    }

    // fill Data property with some random color GridItems
    private void FillData()
    {
        string[] colors = { "Red", "Green", "Yellow", "Blue" };
        Random r = new Random();

        for (int i = 0; i < 10; i++)
        {
            Data.Add(new GridItem(i, i, colors[r.Next(colors.Length)]));
        }
    }
}

public class GridItem
{
    public int X { get; set; }
    public int Y { get; set; }
    public string Color { get; set; }

    public GridItem(int x, int y, string color)
    {
        X = x;
        Y = y;
        Color = color;
    }
}

XAML：

<Grid x:Name="LayoutRoot" Background="Transparent">

    <ItemsControl ItemsSource="{Binding Data}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>                    
            <Grid Background="Orange">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse 
                    Grid.Row="{Binding Y}" 
                    Grid.Column="{Binding X}"
                    Fill="{Binding Color}"
                    Stroke="White" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

这是结果（它把所有的椭圆都放在了彼此的顶部）：

虽然它应该这样做：

有谁知道为什么这不起作用？

【问题讨论】：

您的视图模型何时设置？是在 InitializeComponent 之前还是之后？
ViewModel (DataContext) 需要设置之前 InitializeComponent。绑定时需要设置 X 和 Y 的值
@ShawnKendrot 我以前从未见过，但我还是试过了，没有任何区别。

标签： silverlight windows-phone-7 binding grid itemscontrol

【解决方案1】：

尝试在 ContentPresenter 中设置 Grid.Row 和 Grid.Column 的绑定，而不是作为定义 Ellipse 的 DataTemplate 的一部分：

    <ItemsControl.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding Y}"/>
            <Setter Property="Grid.Column" Value="{Binding X}"/>
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemTemplate> 
        <DataTemplate> 
            <Ellipse  
                Fill="{Binding Color}" 
                Stroke="White" /> 
        </DataTemplate> 
    </ItemsControl.ItemTemplate>

【讨论】：

当我这样做时，它会抛出 XamlParseException：“无法设置只读属性”

【解决方案2】：

这是因为DataTemplate 将其内容包装在ContentPresenter 中。 Grid.Row 和 Grid.Column 属性仅适用于直接后代，因此在这种情况下它们不相关，因为它们在控制层次结构中处于两个层次。

ContentPresenter 是在运行时在 DataTemplate 呈现时动态添加的。要完成这项工作，您需要挂钩项目的动态生成并在包含项目上设置 Row 和 Column 附加属性。

有一篇博客文章显示了一种实现此功能的方法：http://www.scottlogic.co.uk/blog/colin/2010/11/using-a-grid-as-the-panel-for-an-itemscontrol/

【讨论】：