0

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

这是它的简化版本：

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>

这是结果（它将所有椭圆放在彼此之上）：

结果

虽然它应该这样做：

意图

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

4

2 回答 2

0

尝试在 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>
于 2012-08-29T14:04:21.787 回答
0

这是因为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-项目控制/

于 2013-06-23T03:07:59.487 回答