Search code examples
c#windows-8microsoft-metrochess

Chess Board in Metro Style apps


I am just playing around with the Metro style apps. I wanted to create a simple chess board using the UniformGrid from Wpf but it seems like that it is not supported in Metro style apps. Are there any alternative ways in Metro Style apps to create a chess board?


Solution

  • Can't you just use an 8x8 Grid? Eight RowDefinitions and Eight ColumnDefinitions should get it.

    Here's a very brute force method of doing this. As long as the grid's height and width make it square, the resultant items will be the appropriate proportions. You could also set the Height of each RowDefinition and the Width of each ColumnDefinition to the same arbitrary value and get it proportional.

    For something like this, I might choose to add the controls in the codebehind, versus in the XAML, but that's a choice I leave up to you.

    <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>