title: UWP - How to properly support multiple screen resolutions
body: <p>I have just started learning programming for UWP. And I want to write an application similar to People in windows 10. And I have a problem with supporting multiple screens.</p>
  
  <p>I have layout like this:</p>
  
  <pre><code> &lt;ScrollViewer Background="Black" &gt;
          &lt;Grid &gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="50" /&gt;
                  &lt;RowDefinition Height="200"/&gt;
                  &lt;RowDefinition Height="40"/&gt;
                  &lt;RowDefinition Height="60"/&gt;
                  &lt;RowDefinition Height="40"/&gt;
                  &lt;RowDefinition Height="60"/&gt;
                  &lt;RowDefinition Height="100"/&gt;
                  &lt;RowDefinition Height="100"/&gt;
                  &lt;RowDefinition Height="100"/&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;TextBlock
                  Text="CONTACT"
                  Margin="10, 10, 10, 10"
                  FontSize="25"
                  Foreground="White"/&gt;
  
              &lt;Ellipse Grid.Row="1"
                       Margin="10, 20, 250, 10" &gt;
                  &lt;Ellipse.Fill&gt;
                      &lt;ImageBrush ImageSource="Assets/64.png" /&gt;
                  &lt;/Ellipse.Fill&gt;
              &lt;/Ellipse&gt;
  
              &lt;TextBlock
                  Grid.Row="2"
                  Text="Name"
                  FontSize="20"
                  Margin="10, 0, 0, 0"
                  VerticalAlignment="Bottom"
                  Foreground="White"/&gt;
  
              &lt;Grid 
                  Grid.Row="3"&gt;
                  &lt;Grid.Background&gt;
                      &lt;ImageBrush Stretch="Fill"/&gt;
                  &lt;/Grid.Background&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="350" /&gt;
                      &lt;ColumnDefinition Width="*" /&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;TextBox 
                      Grid.Column="0"
                      Margin="10, 10, 10, 10"/&gt;
  
                  &lt;AppBarButton 
                      Grid.Column="1"
                      Foreground="White"
                      Icon="Edit"
                      HorizontalAlignment="Left"
                      VerticalAlignment="Center"/&gt;
  
              &lt;/Grid&gt;
  
          &lt;/Grid&gt;
      &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p>My output on 4" and 6" <a href="https://i.stack.imgur.com/2JeSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2JeSA.png" alt="enter image description here"></a>
  Original on 4" and 6"  screen:<a href="https://i.stack.imgur.com/WddfE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WddfE.png" alt="enter image description here"></a></p>
  
  <p>I defined this layout on 6" screen, so i should define layout on the smallest screen or how should I do it? Thank you very much.</p>