title: How to properly enable dpi-scaling on uwp app
body: <p>I've created my first UWP app. It's a Windows 8.1 UWP app which will help with scheduling courses at my university who's current system is awful. I've been working on it with my Windows 10 desktop computer with a 1080p monitor at default system scaling (100%). I deployed a test build and installed it on my laptop. The laptop is also Windows 10 and 1080p but has a smaller screen so I have system scaling set to 125%. My problem is that instead of this higher scaling factor making my app have bigger features, it does the opposite and shrinks everything in the app.</p>
  
  <p>Here are two screenshots from my laptop when running at different scaling factors. The first is at 100% where everything on the system is too small.</p>
  
  <p><a href="https://i.stack.imgur.com/H5uWX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H5uWX.png" alt="App running at 100% scaling."></a></p>
  
  <p>Note that the navigation bar on the left is exactly 44 pixels wide, as design. Now in the next screenshot the laptop is running at 125% system scaling (I logged out and in before taking the screenshot so scaling should have updated fully). We should expect that the nav bar be 55 pixels wide.</p>
  
  <p><a href="https://i.stack.imgur.com/rqsp7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rqsp7.png" alt="App running at 125% scaling."></a></p>
  
  <p>Here you can see that areas in the app actually got smaller than they were before. The nav bar here is about 37 pixels wide compared to the 55 I expected. Is there something I missed in how I must scale a UWP app?</p>
  
  <p>I do not have the entire xaml code with me at the moment as I am on my laptop, but I know that nav bar is part of a grid which looks like this. This grid is the overall grid that is running the app, with the nav bar being the first column.</p>
  
  <pre><code>&lt;Grid x:name="gridOverall"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="44"/&gt;
          &lt;ColumnDefinition Width="200"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      ...
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I thought it might have been an enable-scaling option in the app manifest or something but I couldn't find anything like it. I expected issues like this to arise with the images I used as I did not yet include higher resolution options yet, but I didn't expect this to happen with layout elements that are defined in the xaml.</p>
  
  <p>Can anyone shed some insight on what might be going on? This is my first full app and I'm a little lost.</p>