Search code examples
wpf

How do you make controls adapt to change in screen size but with the same resolution?

I'm currently having a hard time making controls adapt to different screen sizes. I'm using both a laptop with a 14inch screen and a 24inch screen on a desktop. I've tried containing them in a Viewbox, set all height and width to Auto. It works on some controls but others, I'm really having a hard time with. I'm currently using * on the Grid Layout for Row and Column definitions.

This is currently my code for one control:

<!--  Button Background When Selected  -->
<Viewbox
    Grid.Row="2"
    Grid.RowSpan="3"
    Grid.Column="4"
    Width="Auto"
    Height="Auto"
    Margin="41,144,141,100"
    HorizontalAlignment="Left"
    VerticalAlignment="Top">
  <Image
       Width="Auto"
       Height="Auto"
       Source="/Assets/Background/SelectionButtonBackground.png" />
</Viewbox>

When I modify the margins so that it will look exactly what I want on the desktop monitor, it will somehow look different on the laptop monitor.

14" Laptop Monitor output:

enter image description here

24" Desktop Monitor output:

enter image description here

I need to make sure that the image behind the button (the white space with rounded corners) will be like the one on the desktop when run on my laptop.

TIA!

Solution

  • So you have multiple ViewBoxes? If you want the whole thing to scale, wrap the entire screen/page in a ViewBox. That'll apply a unified scale to everything based on the available screen space.

    It'd be better to leverage WPF's composable UI, though. You're using a lot of pixel fudging so you're working against yourself. It'd be better to use grids in a proportional way or a flow control in its proper context, depending on what you want to achieve.