title: Creating responsive element in XAML
body: <p>I am absolutely new in UWP and its responsive design, so I need help.
  Where's the problem?</p>
  
  <p>e.g. I need 4 responsive buttons on landing page, but in each view it looks quite the same. So the button doesn't change, but looks same on desktop, and same on the phone emulator (or when I change screen resolution). For better description, there are some screens:</p>
  
  <p>Buttons on large 23" screen - looks good, but...
  <img src="https://i.stack.imgur.com/oU2bg.png" alt="Buttons on large 23&quot; screen"></p>
  
  <p>..buttons on small 5" screen (portrait) - buttons are larger then canvas...
  <img src="https://i.stack.imgur.com/aw7DG.png" alt="buttons on small 5&quot; screen (portrait)"></p>
  
  <p>So my question is: How to make buttons responsive?</p>
  
  <p>Here is my sourcecode:</p>
  
  <pre><code>&lt;Page
      x:Class="STCApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:STCApp"
      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="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="83*"/&gt;
              &lt;RowDefinition Height="998*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition/&gt;
              &lt;ColumnDefinition/&gt;
              &lt;ColumnDefinition/&gt;
              &lt;ColumnDefinition/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"&gt;&lt;/Button&gt;
          &lt;Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/&gt;
          &lt;Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/&gt;
          &lt;Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>