Xaml windows phone 8上的棋盘式网格

Xaml windows phone 8上的棋盘式网格,xaml,windows-phone-8,Xaml,Windows Phone 8,我正在尝试制作一个类似于windows phone 8中棋盘的网格,但我对开发windows phone和使用xaml还不太熟悉,不知道从哪里开始我想更新一个更改“正方形”的颜色,我看到的大多数示例都在wpf中,它们使用UniformGrid,这在windows phone中是不可用的 到目前为止我发现的是 <Grid Margin="29,29.5,23,32.5" Height="500"> <Rectangle Stroke="Black">

我正在尝试制作一个类似于windows phone 8中棋盘的网格,但我对开发windows phone和使用xaml还不太熟悉,不知道从哪里开始我想更新一个更改“正方形”的颜色,我看到的大多数示例都在wpf中,它们使用UniformGrid,这在windows phone中是不可用的

到目前为止我发现的是

<Grid Margin="29,29.5,23,32.5" Height="500">
        <Rectangle Stroke="Black">
            <Rectangle.Fill>
                <SolidColorBrush Color="{DynamicResource color}"/>
            </Rectangle.Fill>
        </Rectangle>
        .
        . 
        .
</grid>

.
. 
.
但是他们是一种生成不同大小网格的方法,比如12x12或9x8如果我使用上面的代码,那么我需要为每个正方形创建一个矩形,这不是我想要的


所以我只是想知道xaml会是什么样子。我似乎还需要使用数据绑定来更新UI。是他们生成可视化网格并能够更新其中内容的任何方法。如果有人能为我指出正确的方向,那将非常有帮助。

创建一个行和单元格的两级视图模型。将行绑定到ItemsControl,然后在item模板中将单元格绑定到另一个ItemsControl。每个单元格都有一个属性来判断它是偶数还是奇数,因此可以实现棋盘格模式。您可以通过数据绑定,通过单元格的其他属性显示游戏状态,以显示棋盘位置

最后,由于单元格的大小是固定的,所以将整个内容包装在一个Viewbox中,以使其适合您的容器

视图模型:

public class BoardViewModel
{
    private readonly int _rows;
    private readonly int _columns;

    public BoardViewModel(int rows, int columns)
    {
        _rows = rows;
        _columns = columns;
    }

    public IEnumerable<RowViewModel> Rows
    {
        get
        {
            return Enumerable
                .Range(0, _rows)
                .Select(row => new RowViewModel(row, _columns))
                .ToList();
        }
    }
}

public class RowViewModel
{
    private readonly int _row;
    private readonly int _columns;

    public RowViewModel(int row, int columns)
    {
        _row = row;
        _columns = columns;
    }

    public IEnumerable<CellViewModel> Cells
    {
        get
        {
            return Enumerable
                .Range(0, _columns)
                .Select(column => new CellViewModel(_row, column))
                .ToList();
        }
    }
}

public class CellViewModel
{
    private readonly int _row;
    private readonly int _column;

    public CellViewModel(int row, int column)
    {
        _row = row;
        _column = column;
    }

    public bool IsEven
    {
        get { return (_row + _column) % 2 == 0; }
    }
}
XAML:

<Window.Resources>
    <local:CellColorValueConverter
        x:Key="CellColor" />
</Window.Resources>
<Grid>
    <Viewbox>
        <ItemsControl
            ItemsSource="{Binding Rows}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ItemsControl
                        ItemsSource="{Binding Cells}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Rectangle
                                    Width="50"
                                    Height="50"
                                    Fill="{Binding IsEven, Converter={StaticResource CellColor}}" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Viewbox>
</Grid>


您可以找到针对WP/Silverlight的UniformGrid的自定义实现,感谢您的回复。我是windows phone开发的新手,所以它似乎不可用,或者我遗漏了一些东西。
<Window.Resources>
    <local:CellColorValueConverter
        x:Key="CellColor" />
</Window.Resources>
<Grid>
    <Viewbox>
        <ItemsControl
            ItemsSource="{Binding Rows}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <ItemsControl
                        ItemsSource="{Binding Cells}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Rectangle
                                    Width="50"
                                    Height="50"
                                    Fill="{Binding IsEven, Converter={StaticResource CellColor}}" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Viewbox>
</Grid>