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.
Step 2
Once Visual Studio Community 2017 has started, from the Menu choose File, then New then 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
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.
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…
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
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
Step 9
From the Menu choose View and then 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…
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
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
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
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
Step 19
From the Menu choose View and then 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
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
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.
Step 25
To Exit the Application select the Close button in the top right of the Application
Step 26
Then back in Visual Studio select the Local Machine to run the Application again
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.
Step 27
To Exit the Application select the Close button in the top right of the Application
Comentsys 