title: Windows Phone - Customizing GridView Max Columns
body: <p>I'm new to Windows Phone programming. I want to create a gridview like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/b9bBu.png" alt="enter image description here"></p>
  
  <p>I've done the <code>&lt;DataTemplate&gt;</code>, so I've already done the items and their buttons. But I can't set 2 columns for the grid using <code>MaximumRowsOrColumns</code>, because it limits my grid with only 2 rows (can be ilimited rows, but I need to have only 2 columns). 
  Coding as below was the closest I made:</p>
  
  <pre><code>&lt;GridView.ItemsPanel&gt;
      &lt;ItemsPanelTemplate&gt;
          &lt;ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/&gt;
      &lt;/ItemsPanelTemplate&gt;
  &lt;/GridView.ItemsPanel&gt;
  </code></pre>
  
  <p>EDIT: added <code>&lt;DataTemplate&gt;</code>code:</p>
  
  <pre><code>&lt;DataTemplate x:Key="gridClassItem"&gt;
  
          &lt;Grid&gt;
  
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="Auto"/&gt;
                  &lt;RowDefinition Height="14.96"/&gt;
               &lt;/Grid.RowDefinitions&gt;
  
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="Auto"/&gt;
                  &lt;ColumnDefinition Width="14.96" /&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;Button x:Name="btnItem" Grid.Row="0" Grid.Column="0"
                              BorderThickness="0 0 0 2" Opacity="100" 
                              Height="70.4" Width="174.24"
                              Background="#FF6B33"
                              Click="btnItem_OnClick"&gt;
  
                  &lt;TextBlock x:Name="txtItem" FontSize="38" Foreground="#5B1F08" Opacity="100" Margin="0" Text="{Binding Name}" TextAlignment="Center"/&gt;
              &lt;/Button&gt;
  
              &lt;Grid Grid.Row="1" Grid.Column="0" Margin="0, -8, 0, 0" Height="52.8"&gt;
  
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="86.24"/&gt;
                      &lt;ColumnDefinition Width="86.24"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;Button x:Name="btn1" Click="btn1_OnClick"
                                  Grid.Row="0" Grid.Column="0"
                                  BorderBrush="#FFFFFF" BorderThickness="0 0 1.76 0"
                                  Margin="-10, -15, 0, 0"
                                  DataContext="{Binding}"&gt;
                      &lt;Button.Background&gt;
                          &lt;ImageBrush ImageSource="\Assets\bt1.png" Stretch="UniformToFill"/&gt;
                      &lt;/Button.Background&gt;
  
                  &lt;/Button&gt;
  
                  &lt;Button x:Name="btn2" Click="btn2_OnClick"
                                  Grid.Row="0" Grid.Column="1"
                                  BorderBrush="#FFFFFF" BorderThickness="1.76 0 0 0"
                                  Margin="0, -15, -2.5, 0"
                                  DataContext="{Binding}"&gt;
                      &lt;Button.Background&gt;
                          &lt;ImageBrush ImageSource="\Assets\bt2.png" Stretch="UniformToFill"/&gt;
                      &lt;/Button.Background&gt;
  
                  &lt;/Button&gt;
  
              &lt;/Grid&gt;
  
              &lt;Rectangle Grid.Row="2" Grid.Column="1" Fill="#FFFFFF" Margin="0"/&gt;
  
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>Any suggestions?</p>
  
  <p>By the way, any idea how could i change the GridViewItem's background color? I was thinking about a geometric series, like the first item will be orange, the followings - always counting by two - will be green and then orange again. But I don't know how to implement it.</p>