Any way to add to list of display devices in UWP Design View?

Nicholas Piazza 531

In the Visual Studio 2019 UWP Design page there is a dropdown list of display devices with their sizes and resolutions as shown below.

Is there a way to add to this list for display sizes and resolutions not currently listed? I'm thinking of my desktop monitor, which is 28" with a resolution of 3840 x 2160.

1 answer

Anna Xiu-MSFT 25,626 Reputation points Microsoft Vendor

2021-03-15T07:28:04.687+00:00
Hi @Nicholas Piazza ,

Welcome to Microsoft Q&A!

For your requirement, it is not supported currently.
For more details, please refer to the document: https://learn.microsoft.com/en-us/windows/uwp/design/layout/screen-sizes-and-breakpoints-for-responsive-design.

Sincerely,
Anna

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Nicholas Piazza 531 Reputation points

2021-03-15T13:02:57.223+00:00

Sorry to here that's it's not currently supported. The problem with a designer that doesn't support a specific display size and resolution is in positioning controls. The positions that appear in the designer are not the ones that show up when the application is run. For example, the UWP "Hello, World!" tutorial in the Universal Windows Platform document tells you to drag a button to the center of the Designer, but without the Designer being set to the correct size and resolution of the development computer, the button is off-center when the application is run. Is there a workaround for control positioning problems such as this?

Anna Xiu-MSFT 25,626 Reputation points Microsoft Vendor

2021-03-16T06:38:52.197+00:00

Hi @Nicholas Piazza , you can refer to the following similar issue to set the size and resolution for your device:
https://stackoverflow.com/questions/40494328/add-new-device-to-xaml-layout-designer-visual-studio-2015-uwp

Nicholas Piazza 531 Reputation points

2021-03-16T14:23:06.173+00:00

Well, I checked out the link you posted and followed the instructions to create a file to match my display, but when I try to use it, when I positioned the button in the center of the new Design box, when I ran it, the button was completely off-screen. It looked like a good idea, but maybe it's just not setup to handle resolutions that high.

Thanks for the suggestions.

Anna Xiu-MSFT 25,626 Reputation points Microsoft Vendor

2021-03-18T06:14:59.97+00:00

Can you tell us what layout panels you are using?

Nicholas Piazza 531 Reputation points

2021-03-18T13:36:44.01+00:00

Shown below is a copy of my MainPage.xaml. Hope that helps!

<Page
x:Class="HelloWorldUWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorldUWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid> <Button Content="Hello, world!" Margin="950,978,0,0" VerticalAlignment="Top" Click="Button_Click" RenderTransformOrigin="5.008,9.737" /> </Grid> </Page>

Anna Xiu-MSFT 25,626 Reputation points Microsoft Vendor

2021-03-19T08:28:11.367+00:00

You can try the following:

<Grid> <Button Content="Hello, world!" Margin="0,0,0,0" VerticalAlignment="Top" Click="Button_Click" RenderTransformOrigin="0.5,0.5" /> </Grid>
Sign in to comment