Question

我正在尝试使用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>

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

Result

虽然应该这样做：

intention

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

Answer 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>

Answer 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/

ItemsControl Grid.Row Grid.Column在Silverlight中绑定

2 个答案: