Add new device to xaml layout designer Visual Studio 2015 UWP

Question

I am using Visual Studio 2015, creating my first Windows UWP app. I am trying to create the layout and as such, I have added a blank xaml page to my project. When I double click, it does take me to the designer. The question is, there are preset (common) devices such as a 5" phone, 6" phone, etc... and the resolution for each.

However, I am targeting a specific device as well and I want to make sure the layout looks good on my device. I need to add a device to this list which has my screen size and resolution. It appears that there is no built in way to do this in Visual Studio. How can I add or edit a device?

Thanks!

Answer 1

The only way I have found to do this so far is to do the following:

1. Navigate to the Windows Kits Devices folder. Mine was located at

C:\Program Files (x86)\Windows Kits\10\DesignTime\UAP\Devices\1033

2. In that folder, you will find several xml files basically one for each device. Pick the file/device that is closest to what you need and edit it. I use Notepad++ but regular Notepad or Wordpad will work.

3. Change attributes to what you need. You can give it a "name", "width" and "height" are the pixel width and height of your device. This can be found several ways if you don't already know it. Either search online, check the specifications or data sheet for the device or sometimes you can even find it in the device settings/info. For the "size" attribute, this is the physical size of the screen, again you can find that out if you don't already know it. This attribute does accept decimals. So, if your screen is 4.7", just type "4.7" for size.

4. Those are the key things to change. You can also lock orientation by changing the Orientation Qualifier if you want.

5. When you are done, I recommend you save a copy so you don't overwrite the original one you started editing. When you save a copy, I would rename the file as well. The first three numbers, before the underscore, is just used to sort the item in the drop down list of the designer. For example, 100_5inchphone.xml is going to show at the top of the drop down list in the designer. Therefore, give your file name a number according to where you want it to show in the list and make sure it is unique. They are also grouped, so 100 numbers are phones. Therefore, one good practice is, if you are adding a phone, start at the end and keep incrementing from there. For example, 102_MyPhoneName.xml. Last, give your file a nice name, after the number and underscore.

6. When you try to save, you may get a notice that you do not have permission to save in this folder and would you like to save in My Documents instead? This is dependent on the OS version and settings. If this is the case, go ahead and save to My Documents or wherever the notice has recommended. You can then grab that file and copy/paste it into the correct folder (indicated on item 1 above) and when you do, you will then be asked to give Administrator rights and the paste will then be allowed. Once complete, you should now see your new file in this folder.

7. Finally, you must restart Visual Studio completely for it to pick up the new file/device. After Visual Studio starts up, open you xaml file in designer and you should now have your new device in the drop down list.

That is all there is to it. Not too bad to do, though it would have been nice to have a way to do this simply from within Visual Studio.

NOTE: If you have errors starting up Visual Studio or with the Designer starting when you click on your xaml file, you may have gotten the xml format wrong. Double check your xml file that you created/edited in the process.

Hope this helps!