This tutorial take a quick tour of the features of the starter app created for this course. This app serves two purposes. It's a working example of media application. Plus it acts as the shell that hosts the various demos for this course.
- [Instructor] Let's take a tour of the starter app for this course. It's based on the app created in my first Xbox One course. You can see that course here at Lynda.com or LinkedIn Learning. It's called Create Universal Windows Apps for Xbox One: Build Your First App. If you haven't seen that course yet, you should. It explains the fundamentals of how to set up your developer computer and Xbox device so you are ready for Xbox development. It shows how to remotely deploy to the Xbox and other fundamental concepts and it shows how to build the sample application.
If you have seen the first course then this movie serves as a refresher. I'll take a quick tour of the app interface. To be clear, I'll use the starter app as the shell that hosts the various demos for this course. There are not a lot of additional features added to the app in this course. I'm running the Xbox in developer mode. This Dev Home tile is a sure sign that I'm in the developer mode. I've deployed the application to the device, therefore I can find it here in the My games & apps section.
I'll press the A button on the controller. Over here I'll go to the apps section and then let's look at these tiles. There's two that I'm interested in. This first one is from the first course, this is the Orange Valley Arts Center. This tile here is the version from the current course which has the V2 name extension. I'll press the A button that launched the application, you'll see the splash screen appear and then the main user interface. The main interface for this app is based on the split view control.
This control enables you to split the UI into two sections. The pane section is this expandable bit on the right. I can expand it by clicking on the menu button on the top. To do that, I'll press the A button and then I'll press the A button again to collapse the pane. On the left side is the content area. This is where we'll load the various demo pages in the course. By default a Universal Windows app running on Xbox uses the pointer. You see it moving around here on the screen. To move the pointer use the left joystick.
To interact with the UI you tap the A button on the controller. The overall idea for this app is to showcase the videos from our Orange Valley Arts Center organization. This screen is implemented with a grid view. Each movie is shown in the UI, there is a thumbnail image, below that is the movie title and then below that is a description. As I move my pointer around on the screen, you'll see a subtle grey rectangle appear around those items. That signifies that the item is selectable. Activate, press the A button while the pointer is within the selection rectangle.
To show this video I'll tap the A button. That navigates the app to a different page. This video page is loaded in to the SplitView content area. The video is set to autoplay. To select another video I'll move over here to this button, press and that takes me back to the catalog page, the one with the Home icon. The video page closes, the video stops playing and this catalog page is loaded. There are some additional videos further down the page.
You can see them down here on the bottom. I'm using a UI technique known as Discoverability, wherein I show the additional movie titles. I make sure to size the rectangles so that the second row is slightly visible on the bottom. That way the user knows there is more content. To see it, use the scroll bar. Notice when I move my mouse the scroll bar appears on the right side of the screen. Now I can come over here with my pointer, hold down the A button and then drag to see the other videos. Now I'll watch this video here, The Marvels of Underwater Photography.
Let's look at some of the features of this video page. And notice that as I move my pointer around in the screen, this area appears on the bottom of the window. This is a feature of the media player element. It has a set of built in controls included. You can see them here. There is a control for changing the volume or muting. There's a control for replaying the video or pausing it while it's running.
There's also a control over here for expanding it so it fills the entire screen. Move up here so that the toolbar will disappear and then press this again to bring back the main UI. That completes the tour of the starter app. In the next video I'll show you some of the improvements I've made to the XAML an app code since the previous course.
- Configuring the deploy and debug settings
- Understanding the controllers
- Using the KeyUp event with controller buttons
- Understanding XY focus navigation
- Choosing a good initial focus
- Understanding Xbox UI scaling
- Working with sounds