Question

我试图制作一个类似于棋盘在Windows Phone 8中的样子的网格，但我刚开发用于Windows手机并使用xaml并且我不知道从哪里开始我想更新一个更改颜色“正方形”，我见过的大多数例子都是在wpf中，他们使用UniformGrid，这在Windows手机中是不可用的。

所以到目前为止我发现的是

<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。他们以任何方式生成可视网格并能够更新其中的内容。如果有人能指出我正确的方向，那将非常有帮助。

Answer 1

创建行和单元格的两级视图模型。将行绑定到ItemsControl，然后在项模板中将单元格绑定到另一个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; }
    }
}

值转换器：

public class CellColorValueConverter : IValueConverter
{
    public object Convert(
        object value,
        Type targetType,
        object parameter,
        CultureInfo culture)
    {
        return Application.Current.Resources[
            (bool)value == true
                ? "EvenCellColor"
                : "OddCellColor"];
    }

    public object ConvertBack(
        object value, 
        Type targetType, 
        object parameter, 
        CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

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>

Windows Phone 8上的棋盘式网格

1 个答案: