Universal Windows Platform – Tailored App

Tailored App demonstrates how to create an application that will respond to the Width of the Window the Application is Launched in or has been last had it’s Width resized to its smallest possible value.

Step 1

If not already, follow Setup and Start on how to Install and get Started with Visual Studio 2017 or in Windows 10 choose Start, and then from the Start Menu find and select Visual Studio 2017.

vs2017

Step 2

Once Visual Studio Community 2017 has started, from the Menu choose File, then New then Project…

vs2017-file-new-project

Step 3

From New Project choose Visual C# from Installed, Templates then choose Blank App (Universal Windows) and then type in the Name as TailoredApp and select a Location and then select Ok to create the Project
vs2017-new-project-window

Step 4

Then in New Universal Windows Project you need to select the Target Version this should be at least the Windows 10 Fall Creators Update (10.0; Build 16299) and the Minimum Version to be the same.

vs2017-target-platform

The Target Version will control what features your application can use in Windows 10 so by picking the most recent version you’ll be able to take advantage of those features. To make sure you always have the most recent version, in Visual Studio 2017 select Tools Extensions and Updates… then and then see if there are any Updates

Step 5

Once done select from the Menu, Project, then Add New Item…

vs2017-project-add-new-item

Step 6

From the Add New Item window select Visual C#, then Code from Installed then select Code File from the list, then type in the Name as Library.cs before selecting Add to add the file to the Project

vs2017-add-new-item-library

Step 7

Once in the Code View for Library.cs the following should be entered:

using System;
using System.Collections.Generic;
using Windows.System;
using Windows.UI.Xaml.Controls;

namespace TailoredApp
{
    public class Setting
    {
        public string Name { get; set; }
        public string Icon { get; set; }
        public string Value { get; set; }
    }

    public class Library
    {
        public static List<Setting> Settings
        {
            get
            {
                return new List<Setting>()
                {
                    new Setting() { Name = "Display", Icon = "\uE7F8", Value = "display" },
                    new Setting() { Name = "Notifications", Icon = "\uE91C", Value = "notifications" },
                    new Setting() { Name = "Battery", Icon = "\uE8BE", Value = "batterysaver" },
                    new Setting() { Name = "Storage", Icon = "\uE8B7", Value = "storagesense" },
                    new Setting() { Name = "Data", Icon = "\uE774", Value = "datausage" },
                    new Setting() { Name = "Personalisation", Icon = "\uE771", Value = "personalization" },
                    new Setting() { Name = "Privacy", Icon = "\uE1F6", Value = "privacy" },
                    new Setting() { Name = "Developers", Icon = "\uEC7A", Value = "developers" }
                };
            }
        }

        public async void Launch(GridView display)
        {
            string value = ((Setting)(display.SelectedItem)).Value;
            await Launcher.LaunchUriAsync(new Uri($"ms-settings:{value}"));
        }
    }
}

In the Library.cs there are using statements to include the necessary functionality. There is a Setting Class with some string Properties and in the Library Class there is a static Property of a List of Setting and there is a Launch Method which will launch a given Windows 10 Setting from Settings.

Step 8

From the Solution Explorer select App.xaml

vs2017-app

Step 9

From the Menu choose View and then Designer

vs2017-view-designer

Step 10

The XAML View will be displayed and in this between the Application and /Application elements, enter the following XAML:

<Application.Resources>
	<DataTemplate x:Key="Large">
		<Grid Width="200" Height="200">
			<StackPanel VerticalAlignment="Center">
				<Viewbox Height="50" Width="50" HorizontalAlignment="Center">
					<TextBlock Text="{Binding Icon}" FontFamily="Segoe MDL2 Assets"
					Foreground="{ThemeResource SystemControlHighlightAccentBrush}"/>
				</Viewbox>
				<TextBlock Text="{Binding Name}" Margin="10" HorizontalAlignment="Center"
				Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
			</StackPanel>
		</Grid>
	</DataTemplate>
	<ItemsPanelTemplate x:Key="LargeItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4"/>
	</ItemsPanelTemplate>
	<DataTemplate x:Key="Small">
		<Grid Width="200">
			<StackPanel Orientation="Horizontal">
				<Viewbox Height="25" Width="25" HorizontalAlignment="Left">
					<TextBlock Text="{Binding Icon}" FontFamily="Segoe MDL2 Assets"
					Foreground="{ThemeResource SystemControlHighlightAccentBrush}"/>
				</Viewbox>
				<TextBlock Text="{Binding Name}" Margin="10" HorizontalAlignment="Left"
				Style="{StaticResource BodyTextBlockStyle}"/>
			</StackPanel>
		</Grid>
	</DataTemplate>
	<ItemsPanelTemplate x:Key="SmallItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
	</ItemsPanelTemplate>
</Application.Resources>

The block of XAML represents the Resources for the Application and contains a DataTemplate for both Large and Small items using a StackPanel to display content either as Horizontal optimised for a narrow screen and Vertical for a larger display.

Step 11

Once done select from the Menu, Project, then Add New Item…

vs2017-project-add-new-item

Step 12

From the Add New Item window select Visual C#, then XAML from Installed then select Blank Page from the list, then type in the Name as SecondaryPage.xaml before selecting Add to add the file to the Project

vs2017-add-new-item-carousel-control

Step 13

The Design View will be displayed along with the XAML View and in this between the Grid and /Grid elements, enter the following XAML:

<GridView Name="Display" HorizontalAlignment="Center" VerticalAlignment="Center" 
	SelectionChanged="Display_SelectionChanged"
	ItemTemplate="{StaticResource Small}"
	ItemsPanel="{StaticResource SmallItems}"
	ItemsSource="{x:Bind Path=local:Library.Settings}"/>

The block of XAML features a GridView which will have its ItemsSource set to the Settings in the Library Class and has the ItemTemplate set to the Small Resource from App.xaml.

Step 14

From the Menu choose View and then Code

vs2017-view-code

Step 15

Once in the Code View, below the end of public SecondaryPage() { … } the following Code should be entered:

Library library = new Library();

private void Display_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	library.Launch(Display);
}

Below the MainPage() Method an instance of the Library Class is created, Display_SelectionChanged is triggered when the GridView is Selected and will Call the Launch Method in the Library Class.

Step 16

From the Solution Explorer select App.xaml

vs2017-app

Step 17

Once in the Code View for App.xaml.cs above rootFrame.Navigate(typeof(MainPage), e.Arguments); in the protected override void OnLaunched(LaunchActivatedEventArgs e) { … } Event handler the following should be entered:

if (Window.Current.Bounds.Width < 600)
{
	rootFrame.Navigate(typeof(SecondaryPage), e.Arguments);
	Window.Current.Activate();
	return;
}

This Code will check if the Window has a Width that is less than 600 Pixels, if so it will Navigate to the SecondaryPage.

Step 18

In the Solution Explorer select MainPage.xaml

vs2017-mainpage-library

Step 19

From the Menu choose View and then Designer

vs2017-view-designer

Step 20

The Design View will be displayed along with the XAML View and in this between the Grid and /Grid elements, enter the following XAML:

<GridView Name="Display" HorizontalAlignment="Center" VerticalAlignment="Center" 
	SelectionChanged="Display_SelectionChanged"
	ItemTemplate="{StaticResource Large}"
	ItemsPanel="{StaticResource LargeItems}"
	ItemsSource="{x:Bind Path=local:Library.Settings}"/>

The block of XAML features a GridView which will have its ItemsSource set to the Settings in the Library Class and has the ItemTemplate set to the Large Resource from App.xaml.

Step 21

From the Menu choose View and then Code

vs2017-view-code

Step 22

Once in the Code View, below the end of public MainPage() { … } the following Code should be entered:

Library library = new Library();

private void Display_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
	library.Launch(Display);
}

Below the MainPage() Method an instance of the Library Class is created, Display_SelectionChanged is triggered when the GridView is Selected and will Call the Launch Method in the Library Class.

Step 23

That completes the Universal Windows Platform Application so Save the Project then in Visual Studio select the Local Machine to run the Application

vs2017-local-machine

Step 24

After the Application has started running you can select any of the options and launch any of the Settings present in the GridView then the Window should have it’s Width set to a small as possible, you may need to select the Restore button in the top right of the Applciation.

run-tailored-app

Step 25

To Exit the Application select the Close button in the top right of the Application

vs2017-close

Step 26

Then back in Visual Studio select the Local Machine to run the Application again

vs2017-local-machine

Step 26

After the Application has started running it will use the SecondaryPage.xaml Style rather than the MainPage.xaml and you can select any of the options and launch any of the Settings present in the GridView.

ran-tailored-app

Step 27

To Exit the Application select the Close button in the top right of the Application

vs2017-close

Creative Commons License

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s