Universal Windows Applications is the latest Microsoft framework to utilize XAML as its UI definition language. This tutorial explores the various areas where XAML lives in a UWA project.
- [Voiceover] For this demonstration I'm using a sample application created by Microsoft. It's called the Photo Sharing App. They created this to show off or showcase the parts of universal Windows applications. It's available on Github. I went to Github and got a copy of it and put in our exercise files folder and we're looking at it now. This a universal Windows application and the benefit of that is you write one set of user interfaces and one set of common code and then it'll run across multiple Windows 10 devices.
This is quite a big application. There's a lot of pieces here. You can see some of the items here in the solution. There's services and unit tests and portable class libraries. The part that we're interested in is in this section. This is where the UI is defined. And this is where you'll find the xaml. It's a large application. It's got a lot of interesting parts. It's using the model view view model pattern. So you'll see models folders and you'll see a view models folder and the thing that we're interested in, where the xaml lives is in this views folder.
In a WPF application, you tend to build your application out of Windows. In universal Windows applications the main class that we work with is the page. So you'll see there's something called the app shell. That is right here. If you open this xaml you'll see UI looks like this. It's just a menu in the corner here. And as you choose the items in the menu it'll load the correct pages into the shell. This side shows the actual xaml. There's not much here. There's some tool tips.
There's something called the toggle button in here. There's a split view with different kinds of transitions. There's something here called an entrance navigation transition info. This controls z animations as you switch back and forth between the different pages. You'll see there's also a welcome page. Once again you can look through the xaml. There's grids and different command parameters. Eventually you'll find something called a stack panel.
There's some text blocks in there. There's also a settings page that looks like this. And an about page that looks like this. I like to run the application. Before I do let's talk about this. I can run this on multiple devices. I could go up to this drop down and choose all these different mobile emulators. I've already picked one of these. I think I picked this one here. And then I clicked on the green button. So that's already running. And what I'll do now is I'll run another instance of this on the local machine.
There's the splash screen. You see the animated in. It's now showing us the main page. This is the shell. Here's that menu we saw in the UI and when I click on this it'll fly out and I can read the information on it. Let me slide that over to the side and then I'll bring in the phone emulator. Here, it doesn't quite fit on the screen but I'll try to get as much as possible on the screen. The name of the app in the store is called SnapGold so I'll choose it here in the Windows Phone Emulator. And you can see there's the same menu.
Looks the same over here. And if I click on the settings menu item And if I click on the settings menu item in both these screens you'll see that same mean page is being shown here. It's bigger on this side of course. And then I can click the back button here to go back to the previous page. On the emulator I need to click on this back button on the hardware- simulates the hardware button on the phone. Now let's go look at Home. Go back to the home page. The point is I want you to take away from this is that the universal apps are really interesting and I think they're the way of the future especially in Windows 10 as it gains in popularity and the benefit for you is that once you learn xaml it'll work across this and WPF and it'll work across a lot of the other frameworks Microsoft has.
- What is XAML?
- What frameworks use XAML?
- Working with XAML and Visual Studio
- Exploring XAML namespaces
- Instantiating objects
- Subscribing to events
- Using XAML in Windows Presentation Foundations, Universal Windows, and more