Visually Located

Windows 10 has released the new Universal App Platform that brings new “Windows Apps”. These apps offer the ability to use one Visual Studio project to create apps for any platform/device. This offers the ability to have one XAML file for all of your views. This works much like the web does with responsive design. If you want your page to look different on a smaller device you can change the layout based on the width of the device. You can do this with StateTriggers.

<VisualStateManager.VisualStateGroups>

    <VisualStateGroup>

        <VisualState x:Name="wideState">

            <VisualState.StateTriggers>

                <AdaptiveTrigger MinWindowWidth="600"/>

            </VisualState.StateTriggers>

            <VisualState.Setters>

                <Setter Target="MyTextBlock.Text" Value="BIGGER!" />

            </VisualState.Setters>

        </VisualState>

        <VisualState x:Name="narrowState">

            <VisualState.StateTriggers>

                <AdaptiveTrigger MinWindowWidth="0"/>

            </VisualState.StateTriggers>

            <VisualState.Setters>

                <Setter Target="MyTextBlock.Text" Value="little" />

            </VisualState.Setters>

        </VisualState>

    </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

The example above changes the text of a TextBlock based on the width of the app. You can find more StateTriggers from Morten Nielsen and others on his github page.

But what if you do not want one xaml file? What if you want a completely different view for a phone and don’t want to base it on the width of the device? In Windows and Windows Phone 8.1 you had separate projects that could hold different views based on the device. This is still possible! And it’s quite easy to accomplish. There are two main steps

First, create a new folder in your Windows 10 app and call it “DeviceFamily-Mobile”.

Then right click the folder and select Add –> New Item and select the top item “Xaml View”. Name the file MainPage.xaml.

This creates just the xaml page of the page, not the code behind. It doesn’t need a code behind file because you’ve already declared a MainPage file!

That’s all you have to do! Now you have a page that is specific for mobile devices and a page that will be used for all other platforms/devices. Let’s test this out.

Open the mobile page and add a TextBlock stating we are on a phone.

<TextBlock Text="Hello from Windows Phone!"/>

Now open the other MainPage file and add the following:

<TextBlock Text="Hello from Windows!"/>

Run the app on a phone emulator or a device and you will see the first message!

Now run the app on your machine or the simulator and you will be greeted with the second message!

Let’s take this one step further and add a device folder for desktop. This time name it “DeviceFamily-Desktop”. Add a new Xaml View and add the following to the Grid.

<TextBlock Text="Hello from Windows Desktop!"/>

Run the app on your machine and you will see the new text. The original MainPage.xaml will only display on a device that is not phone (mobile) and not desktop.

I mentioned already that the code file is shared. Anything you put in the file can be used for all of the pages. Let’s say you have a button on each view and need a click handler. One click handler in the code file will work for all views!

I’m sure there are more device family folders that would work like XBox or HoloLens but we’ll have to wait to test those.