One XAML for UWP, Windows 8.1 and Windows Phone 8.1

I was recently involved in a conversation on how to have the easiest way to maintain a XAML view across a UWP (Universal Windows Project) a Windows 8.1 and Windows Phone 8.1 projects. There are a few options and the most straight forward way to do it with a UserControl residing in a Portable Class Library. However…

What if you wanted to have tailored code for each without littering your code with #ifdef but still share a XAML view?  The XAML View might be what you’re looking for. This is a tutorial on how to do just that. An example project is available for download at the end of the article. Let’s get started:

Step 1:

Create a new 8.1 Universal app

tpx1

Step 2:

Move the Shared, Windows and Windows Phone projects out of the virtual folder and delete the folder (you can cut/paste or just click and drag them). The solution should look like this now

tpx2

(Note: If you’re doing this to a solution that has many other projects, you might want to skip this step and add the UWP project to the virtual folder instead)

Step 3:

Add a new UWP project to the solution and name it the same as the 8.1 app, but with the Universal suffix.

tpx3

(Your solution should look like this now)

tpx4

Step 4:

Add a “Views” folder to each of the projects

tpx5

Step 5:

Within the Universal project, right click and Add > New Item > XAML View

tpx6

Step 6:

Move the new XAML View to the Shared project’s Views folder and change the namespaces in the view to match

tpx7

Step 7:

Delete App.xaml from the Universal project and add a reference to the solution’s Shared project (Note: this is in the new Shared projects references section)

tpx8

Step 8:

Here’s where the magic happens. We’ll be adding a code behind for this view in each of the projects! I’ll break this down into sub-steps:

  1. Add a new class to the Windows 8.1 project’s Views folder (Add > New Item), name it as if it were the code-behind for the view. In this case it would be SharedPage.xaml.cs
  2. Change the namespace of the class to Views
  3. Add the public, sealed and partial modifiers to the class
  4. You’ll next need to inherit from the Page class
  5. Add a page constructor
  6. Now you can copy and paste this new class into each of the platform projects (remember, we do not need it in the Shared project)

This is what it should look like

tpx9

Step 9:

You’ll need to quickly pop into the Build Configuration Manager and check off Build and Deploy for the Universal app (you can find Configuration Manager in the target dropdown or in the Build menu)

tpx10

Step 10:

Lastly, for the purposes of this demo, go to App.xaml.cs and change the initial launch target (MainPage) to be the new shared page (SharedPage). I could have put a button on MainPage for each app, but let’s keep this tutorial as short as possible.

tpx11

Final result!

This is the same XAML View compiled with different code-behind files 🙂

tpx12

(NOTE: I put a TextBlock on the SharedPage and update the text in each constructor to show which platform launched it. Here are the WP8.1 emulator, Windows 10 PC and Windows 10 Mobile Emulator running their apps all showing the same XAML view).

Source Code

Download the Sample App Source Code From Here

Bonus:

The Telerik Universal Control can be used in the shared page as long as each of the projects have a reference to the Telerik UYI for Windows Universal DLLs. Send me a tweet and show me what you’ve done, I’ll RT your awesomeness!

Advertisements

2 thoughts on “One XAML for UWP, Windows 8.1 and Windows Phone 8.1

  1. This is what I was looking for. I didn’t want to use the MVVM for Windows 10 as so many do as it seems that MS left that out to move us in the direction of a single view model for all platforms. I plan to make this my current main template.

    As a newbie in the WPF world the multiple view heads with a shared component sits more comfortably with me at this time.

    I was wondering about the support of the Windows Phone Back Button in the Windows 8.1 project. See: “Handling the back button of a Windows Phone in Blank projects” on page
    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh768232.aspx#BackButton

    This shows how to handle the Back Button in a Windows 8.1 & Windows 10 project. The Win 10 seems to handle it, you just have to do a check…

    if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(“Windows.Phone.UI.Input.HardwareButtons”))
    Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;

    but the Win 8.1 Blank Page Project closes the app (I see this in a lot of ms phone apps and it’s really annoying). This doc shows how to add handling for the Back Button to your 8.1 project.

    Looks like it would be a good fit added to your 3-Platform template.

    Once again.. Thanks for a great example of a single xml for the 3 platforms.
    David S.

    Like

    • Hi David,

      Thanks for the feedback! Regarding the back button behavior closing the app, that is a paradigm left over from WP 8.0 app lifecycle management. In the WP 8.1 ecosystem you have a mix of 8.0 and WinRt apps, so you may see differences in behavior. Win10 mobile the OS will not kill the app if backed out from the main page.

      With modern UWP development, apps will go into suspension when backed out of. This is now the behavior for all apps moving forward and only way an app should be killed is by the user manually (or tombstoned by the OS).

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s