title: Gridview items as squares in WinRT (metro)
body: <p>I've been struggeling with this a few days now and can't get it to work. 
  Maybe I'm not as good XAML programmer that I hoped I would be :)</p>
  
  <p>Anyhow, my problem is that i want to bind a number of elements to a GridView and make them appear as squares without setting any width and height. The reason for this is that I want my GridView items to grow/shrink and expand to maximum size as the resolution or screen size vary.</p>
  
  <p>Here is my XAML:</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
  
      &lt;Style x:Key="MyItemContainerStyle" TargetType="ListViewItem"&gt;
          &lt;Setter Property="FontFamily" Value="Segoe UI" /&gt;
          &lt;Setter Property="FontWeight" Value="Bold" /&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
          &lt;Setter Property="VerticalContentAlignment" Value="Stretch" /&gt;
          &lt;!--&lt;Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Self}, Path=Width}" /&gt;--&gt;
      &lt;/Style&gt;
  
      &lt;DataTemplate x:Key="MyItemTemplate"&gt;
          &lt;Border CornerRadius="4" 
                  BorderBrush="Black"  
                  BorderThickness="1"
                  Background="Blue"&gt;
              &lt;TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"&gt;X&lt;/TextBlock&gt;
          &lt;/Border&gt;
      &lt;/DataTemplate&gt;
  
      &lt;ItemsPanelTemplate x:Key="MyItemsPanelTemplate"&gt;
          &lt;StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" /&gt;
      &lt;/ItemsPanelTemplate&gt;
  
  &lt;/UserControl.Resources&gt;
  
  &lt;Grid Background="White"&gt;
      &lt;GridView x:Name="MyGrid"
                UseLayoutRounding="True"
                ItemTemplate="{StaticResource MyItemTemplate}"
                ItemsPanel="{StaticResource MyItemsPanelTemplate}"
                ItemContainerStyle="{StaticResource MyItemContainerStyle}"
                ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"&gt;
      &lt;/GridView&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>And this is my code-behind:</p>
  
  <pre><code>public sealed partial class BlankPage : Page
  {
      public BlankPage()
      {
          this.InitializeComponent();
  
          MyGrid.Items.Add(new ListViewItem { Content = 1 });
          MyGrid.Items.Add(new ListViewItem { Content = 2 });
          MyGrid.Items.Add(new ListViewItem { Content = 3 });
      }
  
      /// &lt;summary&gt;
      /// Invoked when this page is about to be displayed in a Frame.
      /// &lt;/summary&gt;
      /// &lt;param name="e"&gt;Event data that describes how this page was reached.  The Parameter
      /// property is typically used to configure the page.&lt;/param&gt;
      protected override void OnNavigatedTo(NavigationEventArgs e)
      {
      }
  }
  </code></pre>
  
  <p>This however produces an output like this (rectangular items, not squares):</p>
  
  <p><img src="https://i.stack.imgur.com/ArSos.jpg" alt="Ouput"></p>
  
  <p>I would appreciate if someone who knows a bit more about XAML and WinRT (metro) development than I do, could explain this for me and maybe give me a working example.</p>
  
  <p>Thanx!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I got a tip to wrap my Border in a Viewbox as it seems to have some scaling/stretching abilities.</p>
  
  <p>I played around a couple of hours but I can't really get it to work 100%.</p>
  
  <p>This is my XAML now:</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
  
  &lt;Style x:Key="MyItemContainerStyle" TargetType="ListViewItem"&gt;
      &lt;Setter Property="FontFamily" Value="Segoe UI" /&gt;
      &lt;Setter Property="FontWeight" Value="Bold" /&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Stretch" /&gt;
  &lt;/Style&gt;
  
  &lt;DataTemplate x:Key="MyItemTemplate"&gt;
      &lt;Viewbox&gt;
          &lt;Border CornerRadius="3" 
          BorderBrush="Black"  
          BorderThickness="1"&gt;
              &lt;Grid Background="Blue" MinHeight="50" MinWidth="50"&gt;
                  &lt;TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"&gt;X&lt;/TextBlock&gt;
              &lt;/Grid&gt;
          &lt;/Border&gt;
      &lt;/Viewbox&gt;
  &lt;/DataTemplate&gt;
  
  &lt;ItemsPanelTemplate x:Key="MyItemsPanelTemplate"&gt;
      &lt;StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"&gt;
      &lt;/StackPanel&gt;
  &lt;/ItemsPanelTemplate&gt;
  
  &lt;/UserControl.Resources&gt;
  
  &lt;Grid Background="White"&gt;
      &lt;GridView x:Name="MyGrid"
        UseLayoutRounding="True"
        ItemTemplate="{StaticResource MyItemTemplate}"
        ItemsPanel="{StaticResource MyItemsPanelTemplate}"
        ItemContainerStyle="{StaticResource MyItemContainerStyle}"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"&gt;
      &lt;/GridView&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>This produces this output:</p>
  
  <p><img src="https://i.stack.imgur.com/X7iXp.jpg" alt="output2"></p>
  
  <p>Now it seems to stretch itself to a sqaure, but it sretches itself outside the screen. I also ran this example in several resoultions and screen sizes and it shows the same output, which means it scales correctly.</p>
  
  <p>Help would be appreciated.</p>
  
  <p>Thanx!</p>