title: UWP XAML Button with image and text in a Hub
body: <p>I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)</p>
  
  <p>What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar <a href="https://stackoverflow.com/questions/37411935/uwp-place-textblocks-on-image">to this post</a> but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.</p>
  
  <p>Essentially, what I've got until now is something like this: (I've shared my code down below)
  <a href="https://i.stack.imgur.com/4yJBz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4yJBz.png" alt="enter image description here"></a></p>
  
  <p>But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)</p>
  
  <p><a href="https://i.stack.imgur.com/OhIY7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OhIY7.png" alt="enter image description here"></a></p>
  
  <p>So this is what I've tried so far... I've also tried the relative panel but no luck...</p>
  
  <pre><code>&lt;Grid&gt;
  &lt;Grid.ColumnDefinitions&gt;
      &lt;ColumnDefinition Width="200" /&gt;
      &lt;ColumnDefinition Width="200" /&gt;
  &lt;/Grid.ColumnDefinitions&gt;
  &lt;StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0"&gt;
      &lt;Button HorizontalAlignment="Stretch"&gt;
      &lt;Grid&gt;
          &lt;TextBlock HorizontalAlignment="Center"&gt;Column 0 Item 1&lt;/TextBlock&gt;
          &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
      &lt;/Grid&gt;
  &lt;StackPanel&gt;
  
  &lt;TextBlock&gt;Column 0 Item 1&lt;/TextBlock&gt;
  &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
  &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>My complete code looks something like this for this page.</p>
  
  <pre><code>&lt;Page
      x:Class="VaultManager.Terminal.Views.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
      mc:Ignorable="d"&gt;
  
  
  &lt;Grid Background="Black"&gt;
      &lt;Hub SectionHeaderClick="Hub_SectionHeaderClick"&gt;
          &lt;Hub.Header&gt;
              &lt;Grid Margin="0,20,0,0"&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="80"/&gt;
                      &lt;ColumnDefinition Width="*"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/&gt;
              &lt;/Grid&gt;
          &lt;/Hub.Header&gt;
          &lt;HubSection Header="Overview"&gt;
              &lt;DataTemplate&gt;
                  &lt;Grid&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="200" /&gt;
                          &lt;ColumnDefinition Width="200" /&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="150" /&gt;
                      &lt;/Grid.RowDefinitions&gt;
                      &lt;StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0"&gt;
                          &lt;Button HorizontalAlignment="Stretch"&gt;
                              &lt;StackPanel&gt;
                                  &lt;TextBlock&gt;Column 0 Item 1&lt;/TextBlock&gt;
                                  &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/Button&gt;
                          &lt;Button HorizontalAlignment="Stretch" &gt;
                              &lt;RelativePanel&gt;
                                  &lt;TextBlock&gt;Column 0 Item 2&lt;/TextBlock&gt;
                                  &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
                              &lt;/RelativePanel&gt;
                          &lt;/Button&gt;
                      &lt;/StackPanel&gt;
  
                      &lt;StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10"&gt;
                          &lt;Button HorizontalAlignment="Stretch"&gt;
                              &lt;StackPanel&gt;
                                  &lt;TextBlock&gt;Column 1 Item 1&lt;/TextBlock&gt;
                                  &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/Button&gt;
                          &lt;Button HorizontalAlignment="Stretch" &gt;
                              &lt;StackPanel&gt;
                                  &lt;TextBlock&gt;Column 1 Item 2&lt;/TextBlock&gt;
                                  &lt;Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/Button&gt;
                      &lt;/StackPanel&gt;
                  &lt;/Grid&gt;
              &lt;/DataTemplate&gt;
          &lt;/HubSection&gt;
          &lt;HubSection Header="Videos" Name="Videos"&gt;
          &lt;!-- yada yada --&gt;
          &lt;/HubSection&gt;
          &lt;HubSection Header="Audios" Name="Audios"&gt;
          &lt;!-- blah blah --&gt;
          &lt;/HubSection&gt;
      &lt;/Hub&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>