/ OTHER

Simulating Surface Pro 3 in the Simulator

I’m working on a project at the moment that needs to run on a Surface Pro 3. During testing there were some weird redraw issues that only appeared on the Surface 3.   We were unable to reproduce this in our dev environments because  the simulator that comes with Visual Studio doesn’t have a screen size that is compatible with the Surface 3.

For reference, the surface 3 has these specs:

  • Screen Size: 12″
  • Resolution: 2160×1440
  • Scaling Factor: 140%

But fortunately, it turns out you can actually create your own profiles for any device you want in the simulator. Basically you just create an XML file to describe the screen settings and then put into a directory to be picked up by the simulator when it starts.

Step 1: Create a xml configuration file that describes the resolution

It should look like this (the content is pretty self explanatory):

<?xml version="1.0" encoding="UTF-8"?>
<ArrayOfHardwareConfiguration xmlns:xsd="http://www.w3.org/2001/XMLSchema"
                              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <HardwareConfiguration>
        <Name><strong>12-2160x1440</strong></Name>
        <DisplayName><strong>Surface Pro 3 - 12" 2160 x 1440 (3:2, 140%)</strong></DisplayName>
        <Resolution>
            <Height><strong>1440</strong></Height>
            <Width><strong>2160</strong></Width>
        </Resolution>
        <DeviceSize><strong>12</strong></DeviceSize>
        <DeviceScaleFactor><strong>140</strong></DeviceScaleFactor>
    </HardwareConfiguration>
</ArrayOfHardwareConfiguration>

 Step 2: Put the file in a location for the simulator to use it

The file name needs to start with HardwareConfigurations. For example, HardwareConfigurations-Surface3.xml

Put the file in the directory:

C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\12.0\HardwareConfigurations

(You may need to create the HardwareConfigurations directory).

Step 3: Win!

Restart the Simulator, select the new device and you’re good to go!

ScreenSizeMenu{.lightbox}