Adaptive App demonstrates how to create an application that will respond to the Width of the Window when it is resized.
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 AdaptiveApp 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 AdaptiveApp
{
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 Window and Vertical for a wider Window.
Step 11
In the Solution Explorer select MainPage.xaml
Step 12
From the Menu choose View and then Designer
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"
ItemsSource="{x:Bind Path=local:Library.Settings}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Display.ItemTemplate" Value="{StaticResource Large}"/>
<Setter Target="Display.ItemsPanel" Value="{StaticResource LargeItems}"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Display.ItemTemplate" Value="{StaticResource Small}"/>
<Setter Target="Display.ItemsPanel" Value="{StaticResource SmallItems}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
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 14
From the Menu choose View and then Code
Step 15
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 16
That completes the Universal Windows Platform Application so Save the Project then in Visual Studio select the Local Machine to run the Application
Step 17
After the Application has started running you can select any of the options and launch any of the Settings or select the Restore button in the top right of the Appliciation and resize the Window, if it gets below a certain Width it will appear with the narrower Style or if larger with the wider Style.
Step 18
To Exit the Application select the Close button in the top right of the Application
Comentsys 