0

ItemsControl を使用して Grid.Row と Grid.Column の異なる X 値と Y 値を使用して Grid を塗りつぶそうとしています。私の 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

楕円を定義するDataTemplateの一部としてではなく、ContentPresenter内でGrid.RowとGrid.Columnのバインディングを設定してみてください。

    <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この場合、それらはコントロール階層の 2 レベルの深さであるため、関係ありません。

がレンダリングされるContentPresenter実行時に動的に追加されます。DataTemplateこれを機能させるには、アイテムの動的生成にフックし、含まれているアイテムにRowおよびColumn添付プロパティを設定する必要があります。

これを機能させる方法の 1 つを示すブログ投稿があります。アイテムコントロール/

于 2013-06-23T03:07:59.487 に答える