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:
Create a new 8.1 Universal app
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
(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)
Add a new UWP project to the solution and name it the same as the 8.1 app, but with the Universal suffix.
(Your solution should look like this now)
Add a “Views” folder to each of the projects
Within the Universal project, right click and Add > New Item > XAML View
Move the new XAML View to the Shared project’s Views folder and change the namespaces in the view to match
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)
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:
- 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
- Change the namespace of the class to Views
- Add the public, sealed and partial modifiers to the class
- You’ll next need to inherit from the Page class
- Add a page constructor
- 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
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)
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.
This is the same XAML View compiled with different code-behind files 🙂
(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).
Download the Sample App Source Code From Here
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!
2 thoughts on “One XAML for UWP, Windows 8.1 and Windows Phone 8.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
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…
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.
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).