0

我试图制作一个类似于 windows phone 8 中棋盘外观的网格，但我是为 windows phone 开发和使用 xaml 的新手，我不确定从哪里开始我想更新更改“正方形”的颜色"，我看到的大多数示例都在 wpf 中，并且它们使用 Windows Phone 中不可用的 UniformGrid。

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

<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。他们有什么方法可以生成视觉网格并能够更新里面的内容。如果有人能指出我正确的方向，那真的很有帮助。

4

1 回答 1

0

创建行和单元格的两级视图模型。将行绑定到 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>
于 2013-08-05T17:29:25.723 回答