XBOX ONE App Using UWP

Loading

XBOX ONE App Using UWP

Introduction

The Xbox One is a home video game console developed by Microsoft. We can develop UWP Applications and XBOX One consoles also.

Before reading this article, please go through the following articles and resources.

Reading this article, you can learn how to develop XBOX ONE Application using Universal Windows Apps development with XAML, Visual C# and XBOX ONE. This application changes the stackpanel background at runtime.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)
XBOX ONE Console

Now, let's discuss step by step app development.

Step 1 - Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give suitable name for your App (UWPXBOXONE) ->OK.

Step 2 - Choose the Target and Minimum platform version that your Windows Universal Application will support. After the Project create App.xaml and MainPage.xaml.

development

Step 3 - Open (double Click) the file MainPage.xaml in the Solution Explorer.

Set the Xbox scale

Step 4 - Click on the Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls, and drag the required control to the middle of the design canvas

Add a stackpanel for displaying images

Add an image to Asset Folder and set the image as stackpanel Background,

<StackPanel.Background>
<ImageBrush ImageSource="Assets/01.jpg"></ImageBrush>
</StackPanel.Background>

<StackPanel.Background /> <imagebrush imagesource=

">

Add a Text Block for Title,

Add a Button for Changing the images at Runtime.

Add a Text Block for Title

Step 5 - Create a button click event method,

Add a Text Block for Title

Add a Text Block for Title

Add the following Namespace and Code in click Event Method

using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
private void btnImagechange_Click(object sender, RoutedEventArgs e) {
ImageBrush myBrush = new ImageBrush();
Image image = new Image();
image.Source = new BitmapImage(new Uri("ms-appx:///Assets//02.jpg"));
myBrush.ImageSource = image.Source;
SPXBOX.Background = myBrush;
}

Note- Automatically the following code will be generated in XAML code view, while we are done in the design view.

<Page
x: Class = "UWPXBOXONE.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns: local = "using:UWPXBOXONE"
xmlns: d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns: mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc: Ignorable = "d" >
<
Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<
StackPanel x: Name = "SPXBOX"
HorizontalAlignment = "Left"
Height = "343"
Margin = "139,142,0,0"
VerticalAlignment = "Top"
Width = "681" >
<
StackPanel.Background >
<
ImageBrush ImageSource = "Assets/01.jpg" > < /ImageBrush> <
/StackPanel.Background> <
/StackPanel> <
TextBox x: Name = "tblTitle"
HorizontalAlignment = "Left"
Margin = "361,34,0,0"
TextWrapping = "Wrap"
Text = "UWP XBOX ONE App Demo"
VerticalAlignment = "Top" / >
<
Button x: Name = "btnImageChange"
Content = "Change Image"
HorizontalAlignment = "Left"
Margin = "716,92,0,0"
VerticalAlignment = "Top"
ToolTipService.ToolTip = "Click to Changing the Image"
Click = "btnImagechange_Click" / >
<
/Grid> <
/Page>

Step 6 - Choose a debug option as Remote machine and set the ip address for your XBOX ONE Console.

Step 7 - XBOX ONE Console DEVHOME.

DEVHOME

DEVHOME

DEVHOME

Step 8 - Deploy your App in XBOX ONE Console.

DEVHOME

DEVHOME

DEVHOME

Step 9 - The output of the UWPXBOXONE App is.

Splash screen on XBOX ONE Console,

DEVHOME

DEVHOME

Before Clicking the Change Image Button on XBOX ONE Console.

DEVHOME

DEVHOME

DEVHOME

After Clicking the Change Image Button on XBOX ONE Console

DEVHOME

DEVHOME

Summary - Now you have successfully created and tested UWP XBOX ONE Application using UWP, Visual C# and XBOX ONE Console.