Metro Style 应用程序中的棋盘

Question

我只是在玩 Metro 风格的应用程序。我想使用来自 Wpf 的UniformGrid 创建一个简单的棋盘，但似乎 Metro 风格的应用程序不支持它。 Metro Style 应用中是否有其他方法可以创建棋盘？

Answer 1

您不能只使用 8x8 网格吗？八个RowDefinitions 和八个ColumnDefinitions 应该会得到它。

这是一种非常暴力的方法。只要网格的高度和宽度使其成为正方形，生成的项目将是适当的比例。您还可以将每个 RowDefinition 的 Height 和每个 ColumnDefinition 的 Width 设置为相同的任意值并使其成比例。

对于这样的事情，我可能会选择在代码隐藏中添加控件，而不是在 XAML 中，但这是我留给你的选择。

<Grid x:Name="LayoutRoot" Background="White" Width="400" Height="400" >
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Background="Black" Grid.Row="0" Grid.Column="0"/>
    <Border Background="Ivory" Grid.Row="0" Grid.Column="1"/>
    <Border Background="Black" Grid.Row="0" Grid.Column="2"/>
    <Border Background="Ivory" Grid.Row="0" Grid.Column="3"/>
    <Border Background="Black" Grid.Row="0" Grid.Column="4"/>
    <Border Background="Ivory" Grid.Row="0" Grid.Column="5"/>
    <Border Background="Black" Grid.Row="0" Grid.Column="6"/>
    <Border Background="Ivory" Grid.Row="0" Grid.Column="7"/>

    <Border Background="Black" Grid.Row="2" Grid.Column="0"/>
    <Border Background="Ivory" Grid.Row="2" Grid.Column="1"/>
    <Border Background="Black" Grid.Row="2" Grid.Column="2"/>
    <Border Background="Ivory" Grid.Row="2" Grid.Column="3"/>
    <Border Background="Black" Grid.Row="2" Grid.Column="4"/>
    <Border Background="Ivory" Grid.Row="2" Grid.Column="5"/>
    <Border Background="Black" Grid.Row="2" Grid.Column="6"/>
    <Border Background="Ivory" Grid.Row="2" Grid.Column="7"/>

    <Border Background="Black" Grid.Row="4" Grid.Column="0"/>
    <Border Background="Ivory" Grid.Row="4" Grid.Column="1"/>
    <Border Background="Black" Grid.Row="4" Grid.Column="2"/>
    <Border Background="Ivory" Grid.Row="4" Grid.Column="3"/>
    <Border Background="Black" Grid.Row="4" Grid.Column="4"/>
    <Border Background="Ivory" Grid.Row="4" Grid.Column="5"/>
    <Border Background="Black" Grid.Row="4" Grid.Column="6"/>
    <Border Background="Ivory" Grid.Row="4" Grid.Column="7"/>

    <Border Background="Black" Grid.Row="6" Grid.Column="0"/>
    <Border Background="Ivory" Grid.Row="6" Grid.Column="1"/>
    <Border Background="Black" Grid.Row="6" Grid.Column="2"/>
    <Border Background="Ivory" Grid.Row="6" Grid.Column="3"/>
    <Border Background="Black" Grid.Row="6" Grid.Column="4"/>
    <Border Background="Ivory" Grid.Row="6" Grid.Column="5"/>
    <Border Background="Black" Grid.Row="6" Grid.Column="6"/>
    <Border Background="Ivory" Grid.Row="6" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="3" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="3" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="3" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="3" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="3" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="3" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="3" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="3" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="5" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="5" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="5" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="5" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="5" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="5" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="5" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="5" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="7" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="7" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="7" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="7" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="7" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="7" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="7" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="7" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="7"/>

    <Border Background="Ivory" Grid.Row="1" Grid.Column="0"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="1"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="2"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="3"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="4"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="5"/>
    <Border Background="Ivory" Grid.Row="1" Grid.Column="6"/>
    <Border Background="Black" Grid.Row="1" Grid.Column="7"/>

</Grid>

Answer 2

如果您计划使用数据绑定，则可以使用 WrapGrid 并将 MaximumRowsOrColumns 属性设置为 8。然后绑定到包含棋盘状态的 64 个项目的集合。

WrapGrid API Reference