Windows 10 – Universal Windows Platform – Digital Control

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in the Name as DigitalControl and select a Location to save to before selecting Ok to create the Project.

2015-digital-control-add-new-project

Step 4

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

2015-project-add-new-item

Step 5

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

2015-digital-control-usercontrol-add

Step 6

The Design View will be displayed along with the XAML View and in this below <Grid> enter the following XAML:

<Viewbox>
	<Grid Width="86" Height="188">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto"/>
			<ColumnDefinition Width="*"/>
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<Path Name="a" Grid.Row="0" Grid.ColumnSpan="3" Margin="8,0,8,0" 
			Data="M 6,0 64,0, 70,6 60,16 10,16 0,6 z" 
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Ellipse Name="h" Grid.Row="1" Grid.Column="1" Height="16" Width="16" 
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="f" Grid.Row="1" Grid.Column="0" Data="M 6,0 16,10 16,60 6,70 0,64 0,6 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="b" Grid.Row="1" Grid.Column="3" Data="M 0,10 10,0 16,8 16,64 10,70 0,60 0,10 0,16 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="g" Grid.Row="2" Grid.ColumnSpan="3" Margin="8,0,8,0" Data="M 8,0 60,0,68,8 60,16 8,16 0,8 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="e" Grid.Row="3" Grid.Column="0"  Data="M 6,0 16,10 16,60 6,70 0,64 0,6 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="c" Grid.Row="3" Grid.Column="3" Data="M 0,10 10,0 16,8 16,64 10,70 0,60 0,10 0,16 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Ellipse Name="i" Grid.Row="3" Grid.Column="1" Height="16" Width="16" 
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
		<Path Name="d" Grid.Row="4" Grid.ColumnSpan="3" Margin="8,0,8,0" Data="M 10,0 60,0 70,10 64,16 6,16 0,10 z"
			Fill="{ThemeResource SystemControlBackgroundAccentBrush}"/>
	</Grid>
</Viewbox>

It should appear as such:

2015-digital-control-usercontrol-xaml

Step 7

Select from the Menu, View then Code

2015-view-code

Step 8

Once in the Code View below the public Digital() { … } the following should be entered:

private int[][] table =
{
	// a, b, c, d, e, f, g
	new int[] {  1, 1, 1, 1, 1, 1, 0 }, // 0
	new int[] {  0, 1, 1, 0, 0, 0, 0 }, // 1
	new int[] {  1, 1, 0, 1, 1, 0, 1 }, // 2
	new int[] {  1, 1, 1, 1, 0, 0, 1 }, // 3
	new int[] {  0, 1, 1, 0, 0, 1, 1 }, // 4
	new int[] {  1, 0, 1, 1, 0, 1, 1 }, // 5
	new int[] {  1, 0, 1, 1, 1, 1, 1 }, // 6
	new int[] {  1, 1, 1, 0, 0, 0, 0 }, // 7
	new int[] {  1, 1, 1, 1, 1, 1, 1 }, // 8
	new int[] {  1, 1, 1, 0, 0, 1, 1 }, // 9
	new int[] {  0, 0, 0, 0, 0, 0, 0 }, // None
	new int[] {  0, 0, 0, 0, 0, 0, 0 }, // Colon
};

private int _digit;

public int Digit
{
	get { return _digit; }
	set
	{
		_digit = value;
		int[] values = table[_digit];
		a.Opacity = values[0];
		b.Opacity = values[1];
		c.Opacity = values[2];
		d.Opacity = values[3];
		e.Opacity = values[4];
		f.Opacity = values[5];
		g.Opacity = values[6];
		h.Opacity = _digit > 10 ? 1 : 0;
		i.Opacity = _digit > 10 ? 1 : 0;
	}
}

It should then appear as such:

2015-digital-control-usercontrol-code

Step 9

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

2015-project-add-new-item

Step 10

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 11

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

using DigitalControl;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

public class Library
{
    private void layout(StackPanel panel)
    {
        for (int i = 0; i < 8; i++)
        {
            panel.Children.Add(new Digital()
            {
                Digit = 10,
                Height = 50,
                Margin = new Thickness(5)
            });
        }
        DispatcherTimer timer = new DispatcherTimer()
        {
            Interval = TimeSpan.FromMilliseconds(250)
        };
        timer.Tick += (object sender, object e) =>
        {
            string time = DateTime.Now.ToString("HH:mm:ss");
            for (int i = 0; i < 8; i++)
            {
                string interval = time[i].ToString();
                ((Digital)panel.Children[i]).Digit =
                interval == ":" ? 11 : int.Parse(interval);
            }
        };
        timer.Start();
    }

    public void Init(StackPanel panel)
    {
        layout(panel);
    }
}

It should then appear as such:

2015-digital-control-library

Step 12

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 13

Select from the Menu, View then Designer

2015-view-designer

Step 14

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<StackPanel Name="Display" Width="300" Orientation="Horizontal" 
	HorizontalAlignment="Center" VerticalAlignment="Center"/>

It should appear as such:

2015-digital-control-mainpage-xaml

Step 15

Select from the Menu, View then Code

2015-view-code

Step 16

Once in the Code View above the public MainPage() { … } the following should be entered:

public Library Library = new Library();

Then while still in the Code View below this.InitializeComponent(); the following should be entered:

Library.Init(Display);

It should then appear as such:

2015-digital-control-mainpage-code

Step 17

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 18

Once the Simulator has started the Application should then appear displaying a clock using the Digital Control in the Application

2015-digital-control-simulator-run

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 20

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 21

Once the Emulator has started the Application should then appear displaying a clock using the Digital Control in the Application

2015-digital-control-emulator-run

Step 22

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Custom Toggle

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Solution Explorer select App.xaml

2015-app

Step 6

Select from the Menu, View then Designer

2015-view-designer

Step 7

The XAML View will be displayed and in this above </Application> enter the following XAML:

<Application.Resources>
	<Style x:Key="CustomToggle" TargetType="ToggleSwitch">
		<Setter Property="Background" Value="LightSalmon"/>
		<Setter Property="BorderBrush" Value="Salmon"/>
		<Setter Property="Foreground" Value="Gold"/>
		<Setter Property="ManipulationMode" Value="System,TranslateX"/>
		<Setter Property="UseSystemFocusVisuals" Value="True"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="ToggleSwitch">
					<Grid HorizontalAlignment="Center">
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="ToggleStates">
								<VisualStateGroup.Transitions>
									<VisualTransition x:Name="DraggingToOnTransition" From="Dragging" GeneratedDuration="0" To="On">
										<Storyboard>
											<RepositionThemeAnimation FromHorizontalOffset="{Binding 
												TemplateSettings.KnobCurrentToOnOffset, 
												RelativeSource={RelativeSource Mode=TemplatedParent}}" 
												TargetName="SwitchKnob"/>
										</Storyboard>
									</VisualTransition>
									<VisualTransition x:Name="DraggingToOffTransition" From="Dragging" GeneratedDuration="0" To="Off">
										<Storyboard>
											<RepositionThemeAnimation FromHorizontalOffset="{Binding 
												TemplateSettings.KnobCurrentToOffOffset, 
												RelativeSource={RelativeSource Mode=TemplatedParent}}" 
												TargetName="SwitchKnob"/>
										</Storyboard>
									</VisualTransition>
									<VisualTransition x:Name="OnToOffTransition" From="On" GeneratedDuration="0" To="Off">
										<Storyboard>
											<RepositionThemeAnimation FromHorizontalOffset="{Binding 
												TemplateSettings.KnobOnToOffOffset, 
												RelativeSource={RelativeSource Mode=TemplatedParent}}" 
												TargetName="SwitchKnob"/>
										</Storyboard>
									</VisualTransition>
									<VisualTransition x:Name="OffToOnTransition" From="Off" GeneratedDuration="0" To="On">
										<Storyboard>
											<RepositionThemeAnimation FromHorizontalOffset="{Binding 
												TemplateSettings.KnobOffToOnOffset, 
												RelativeSource={RelativeSource Mode=TemplatedParent}}" 
												TargetName="SwitchKnob"/>
										</Storyboard>
									</VisualTransition>
								</VisualStateGroup.Transitions>
								<VisualState x:Name="Dragging"/>
								<VisualState x:Name="Off"/>
								<VisualState x:Name="On">
									<Storyboard>
										<DoubleAnimation Duration="0" To="24" Storyboard.TargetProperty="X" 
											Storyboard.TargetName="KnobTranslateTransform"/>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" 
											Storyboard.TargetName="SwitchKnobBounds">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames 
											Storyboard.TargetProperty="Opacity" 
											Storyboard.TargetName="SwitchKnobOn">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
										<ObjectAnimationUsingKeyFrames 
											Storyboard.TargetProperty="Opacity" 
											Storyboard.TargetName="SwitchKnobOff">
											<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Rectangle x:Name="OuterBorder" Height="30" Width="55" RadiusY="15" RadiusX="15"  
							StrokeThickness="1" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
						<Rectangle x:Name="SwitchKnobBounds" Height="30" Width="55" RadiusY="15" RadiusX="15" 
							StrokeThickness="1" Stroke="Goldenrod" Fill="{TemplateBinding Foreground}" Opacity="0"/>
						<Grid x:Name="SwitchKnob" Grid.Row="2" HorizontalAlignment="Left" Height="25" Width="30">
							<Grid.RenderTransform>
								<TranslateTransform x:Name="KnobTranslateTransform"/>
							</Grid.RenderTransform>
							<Ellipse x:Name="SwitchKnobOn" Height="15" Width="15" 
								Fill="{TemplateBinding Background}" Opacity="0"/>
							<Ellipse x:Name="SwitchKnobOff" Height="15" Width="15" 
								Fill="{TemplateBinding Foreground}"/>
						</Grid>
						<Thumb x:Name="SwitchThumb" AutomationProperties.AccessibilityView="Raw">
							<Thumb.Template>
								<ControlTemplate TargetType="Thumb">
									<Rectangle Fill="Transparent"/>
								</ControlTemplate>
							</Thumb.Template>
						</Thumb>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Application.Resources>

It should appear as such:

2015-custom-toggle-app-xaml

Step 8

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 9

Select from the Menu, View then Designer

2015-view-designer

Step 10

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<ToggleSwitch VerticalAlignment="Center" HorizontalAlignment="Center" 
	Style="{StaticResource CustomToggle}"/>

It should appear as such:

2015-custom-toggle-mainpage-xaml

Step 11

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 12

Once the Simulator has started the Application should then appear

2015-custom-toggle-simulator-run

Step 13

After the Application has started running you can tap the Toggle to switch between On or Off in the Application

2015-custom-toggle-simulator-ran

Step 14

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 15

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 16

Once the Emulator has started the Application should then appear

2015-tailored-app-toggle-run

Step 17

After the Application has started running you can tap the Toggle to switch between On or Off in the Application

2015-custom-toggle-emulator-ran

Step 18

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Custom Checkbox

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Solution Explorer select App.xaml

2015-app

Step 6

Select from the Menu, View then Designer

2015-view-designer

Step 7

The XAML View will be displayed and in this above </Application> enter the following XAML:

<Application.Resources>
	<Style x:Key="CustomCheckbox" TargetType="CheckBox">
		<Setter Property="Background" Value="Transparent"/>
		<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
		<Setter Property="Padding" Value="5,5,0,0"/>
		<Setter Property="HorizontalAlignment" Value="Left"/>
		<Setter Property="VerticalAlignment" Value="Center"/>
		<Setter Property="HorizontalContentAlignment" Value="Left"/>
		<Setter Property="VerticalContentAlignment" Value="Top"/>
		<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
		<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
		<Setter Property="UseSystemFocusVisuals" Value="True"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="CheckBox">
					<Grid BorderBrush="{TemplateBinding BorderBrush}" 
						  BorderThickness="{TemplateBinding BorderThickness}" 
						  Background="{TemplateBinding Background}">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="30"/>
							<ColumnDefinition Width="*"/>
						</Grid.ColumnDefinitions>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CombinedStates">
								<VisualState x:Name="UncheckedNormal"/>
								<VisualState x:Name="CheckedNormal">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" 
											Storyboard.TargetName="InnerRectangle">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="CheckedPressed">
									<Storyboard>
										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" 
											Storyboard.TargetName="InnerRectangle">
											<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
										</ObjectAnimationUsingKeyFrames>
									</Storyboard>
								</VisualState>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<Grid>
							<Rectangle x:Name="NormalRectangle" Height="30" Width="30" RadiusY="10" RadiusX="10"   
								UseLayoutRounding="False" StrokeThickness="2" Stroke="Salmon" Fill="LightSalmon"/>
							<Rectangle x:Name="InnerRectangle" Height="20" Width="20" RadiusY="4" RadiusX="4"   
								UseLayoutRounding="False" StrokeThickness="2" Stroke="Goldenrod" Fill="Gold" Opacity="0"/>
						</Grid>
						<ContentPresenter x:Name="ContentPresenter" Grid.Column="1" 
							AutomationProperties.AccessibilityView="Raw" 
							ContentTemplate="{TemplateBinding ContentTemplate}" 
							ContentTransitions="{TemplateBinding ContentTransitions}" 
							Content="{TemplateBinding Content}" 
							HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
							Margin="{TemplateBinding Padding}" TextWrapping="Wrap" 
							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Application.Resources>

It should appear as such:

2015-custom-checkbox-app-xaml

Step 8

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 9

Select from the Menu, View then Designer

2015-view-designer

Step 10

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<CheckBox Content="Checkbox" VerticalAlignment="Center" 
	HorizontalAlignment="Center" Style="{StaticResource CustomCheckbox}"/>

It should appear as such:

2015-custom-checkbox-mainpage-xaml

Step 11

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 12

Once the Simulator has started the Application should then appear

2015-custom-checkbox-simulator-run

Step 13

After the Application has started running you can tap the Checkbox to set it to Checked or Unchecked in the Application

2015-custom-checkbox-simulator-ran

Step 14

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 15

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 16

Once the Emulator has started the Application should then appear

2015-tailored-app-emulator-run

Step 17

After the Application has started running you can tap the Checkbox to set it to Checked or Unchecked in the Application

2015-custom-checkbox-emulator-ran

Step 18

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Jsonfile App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Runtime.Serialization.Json;
using Windows.Storage;
using Windows.UI.Xaml.Controls;

public class Music
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    private string _album;
    private string _artist;
    private string _genre;

    public Music() { Id = Guid.NewGuid().ToString(); }

    public string Id { get; set; }
    public string Album { get { return _album; } set { _album = value; NotifyPropertyChanged(); } }
    public string Artist { get { return _artist; } set { _artist = value; NotifyPropertyChanged(); } }
    public string Genre { get { return _genre; } set { _genre = value; NotifyPropertyChanged(); } }
}

public class Library
{
    private const string filename = "file.json";
    private StorageFile file;
    private ObservableCollection<Music> collection = new ObservableCollection<Music>();

    private async void read()
    {
        try
        {
            file = await ApplicationData.Current.LocalFolder.GetFileAsync(filename);
            using (Stream stream = await file.OpenStreamForReadAsync())
            {
                collection = (ObservableCollection<Music>)
                    new DataContractJsonSerializer(typeof(ObservableCollection<Music>))
                    .ReadObject(stream);
            }
        }
        catch
        {
        }
    }

    private async void write()
    {
        try
        {
            file = await ApplicationData.Current.LocalFolder.CreateFileAsync(filename,
                CreationCollisionOption.ReplaceExisting);
            using (Stream stream = await file.OpenStreamForWriteAsync())
            {
                new DataContractJsonSerializer(typeof(ObservableCollection<Music>))
                    .WriteObject(stream, collection);
            }
        }
        catch
        {
        }
    }

    public ObservableCollection<Music> Collection { get { return collection; } }

    public Library()
    {
        read();
    }

    public void Add(FlipView display)
    {

        collection.Insert(0, new Music());
        display.SelectedIndex = 0;
    }

    public void Save()
    {
        write();
    }

    public void Remove(FlipView display)
    {
        if (display.SelectedItem != null)
        {
            collection.Remove(collection.Where(w => w.Id ==
            ((Music)display.SelectedValue).Id).Single());
            write();
        }
    }

    public async void Delete(FlipView display)
    {
        try
        {
            collection = new ObservableCollection<Music>();
            display.ItemsSource = Collection;
            file = await ApplicationData.Current.LocalFolder.GetFileAsync(filename);
            await file.DeleteAsync();
        }
        catch
        {

        }
    }
}

It should then appear as such:

2015-jsonfile-app-library

Step 7

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The Design View will be displayed along with the XAML View and in this above <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Page.BottomAppBar>
	<AppBar IsOpen="True" IsSticky="True">
		<StackPanel Orientation="Horizontal">
			<AppBarButton Icon="Add" Label="Add" Click="Add_Click"/>
			<AppBarButton Icon="Remove" Label="Remove" Click="Remove_Click"/>
			<AppBarButton Icon="Save" Label="Save" Click="Save_Click"/>
			<AppBarButton Icon="Delete" Label="Delete" Click="Delete_Click"/>
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

While still in the XAML View below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<FlipView Name="Display" HorizontalAlignment="Center" VerticalAlignment="Center"  
		ItemsSource="{x:Bind Path=Library.Collection}">
	<FlipView.ItemTemplate>
		<DataTemplate>
			<Grid VerticalAlignment="Top" HorizontalAlignment="Center" Width="300">
				<Grid.RowDefinitions>
					<RowDefinition/>
					<RowDefinition/>
					<RowDefinition/>
					<RowDefinition/>
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>
				<TextBlock Grid.Row="0" Grid.Column="0" Margin="10">Id:</TextBlock>
				<TextBox Grid.Row="0" Grid.Column="1" Margin="10" 
						   Text="{Binding Id}" IsReadOnly="True"/>
				<TextBlock Grid.Row="1" Grid.Column="0" Margin="10">Album:</TextBlock>
				<TextBox Grid.Row="1" Grid.Column="1" Margin="10" 
						 Text="{Binding Album, Mode=TwoWay}"/>
				<TextBlock Grid.Row="2" Grid.Column="0" Margin="10">Artist:</TextBlock>
				<TextBox Grid.Row="2" Grid.Column="1" Margin="10" 
						 Text="{Binding Artist, Mode=TwoWay}"/>
				<TextBlock Grid.Row="3" Grid.Column="0" Margin="10">Genre:</TextBlock>
				<TextBox Grid.Row="3" Grid.Column="1" Margin="10" 
						 Text="{Binding Genre, Mode=TwoWay}"/>
			</Grid>
		</DataTemplate>
	</FlipView.ItemTemplate>
</FlipView>

It should appear as such:

2015-jsonfile-app-mainpage-xaml

Step 10

Select from the Menu, View then Code

2015-view-code

Step 11

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

public Library Library = new Library();

private void Add_Click(object sender, RoutedEventArgs e)
{
	Library.Add(Display);
}

private void Save_Click(object sender, RoutedEventArgs e)
{
	Library.Save();
}

private void Remove_Click(object sender, RoutedEventArgs e)
{
	Library.Remove(Display);
}

private void Delete_Click(object sender, RoutedEventArgs e)
{
	Library.Delete(Display);
}

It should then appear as such:

2015-jsonfile-app-mainpage-code

Step 12

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 13

Once the Simulator has started the Application should then appear

2015-jsonfile-app-simulator-run

Step 14

After the Application has started running you can tap the Add button, then enter Album, Artist and Genre then can use Save to store the data using JSON in the Application

2015-jsonfile-app-simulator-ran

Step 15

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 16

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 17

Once the Emulator has started the Application should then appear

2015-jsonfile-app-emulator-run

Step 18

After the Application has started running you can tap the Add button, then enter Album, Artist and Genre then can use Save to store the data using JSON in the Application

2015-jsonfile-app-emulator-ran

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Keyboard App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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

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

public enum Modes
{
    Character, Backspace, Tab, Enter, Shift, Space
}

public class Item
{
    public Modes Mode { get; set; }
    public string Content { get; set; }
    public string Normal { get; set; }
    public string Shift { get; set; }
    public string Value { get; set; }
}

public class Library
{
    private enum chords { normal, shift };
    private enum rows { top, upper, middle, lower, bottom };
    private chords chord = chords.normal;

    string[][][] keys =
    {
        new string[][]
        {
            new string[] { "`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=" },
            new string[] { "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]" },
            new string[] { "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "#" },
            new string[] { "\\", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/" }
        },
        new string[][]
        {
            new string[] { "¬", "!", "\"", "£", "$", "%", "^", "&", "*", "(", ")", "_", "+" },
            new string[] { "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "{", "}" },
            new string[] { "A", "S", "D", "F", "G", "H", "J", "K", "L", ":", "@", "~" },
            new string[] { "|", "Z", "X", "C", "V", "B", "N", "M", "<", ">", "?" }
        },
    };

    public delegate void PressedEvent(Item item);
    public event PressedEvent Pressed;

    public static IEnumerable<T> getChildren<T>(DependencyObject depObj) where T : DependencyObject
    {
        if (depObj != null)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
            {
                DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
                if (child != null && child is T)
                {
                    yield return (T)child;
                }
                foreach (T childOfChild in getChildren<T>(child))
                {
                    yield return childOfChild;
                }
            }
        }
    }

    private Button add(Item item, int width, int height)
    {
        Button button = new Button()
        {
            Height = height,
            Width = width,
            FontSize = 10,
            Padding = new Thickness(0),
            Margin = new Thickness(0.5),
            Content = item.Content,
            Tag = item,
        };
        button.Click += (object sender, RoutedEventArgs e) =>
        {
            button = (Button)sender;
            if (Pressed != null) Pressed((Item)button.Tag);
        };
        return button;
    }

    private void row(StackPanel panel, string[] normal, string[] shift)
    {
        for (int i = 0; i < normal.Length; i++)
        {
            Item item = new Item()
            {
                Mode = Modes.Character,
                Normal = normal[i],
                Shift = shift[i],
                Value = (chord == chords.shift) ? shift[i] : normal[i],
                Content = (chord == chords.shift) ? shift[i] : normal[i],
            };
            panel.Children.Add(add(item, 24, 24));
        }
    }

    private void layout(ref StackPanel panel)
    {
        // Top
        StackPanel top = new StackPanel()
        {
            Orientation = Orientation.Horizontal,
            BorderThickness = new Thickness(1, 0, 1, 0)
        };
        row(top, keys[(int)chords.normal][(int)rows.top],
            keys[(int)chords.shift][(int)rows.top]);
        top.Children.Add(add(new Item()
        {
            Mode = Modes.Backspace,
            Content = "BkSp",
        }, 42, 24));
        panel.Children.Add(top);
        // Upper
        StackPanel upper = new StackPanel()
        {
            Orientation = Orientation.Horizontal,
            BorderThickness = new Thickness(1, 0, 1, 0)
        };
        upper.Children.Add(add(new Item()
        {
            Mode = Modes.Tab,
            Content = "↹",
        }, 34, 24));
        row(upper, keys[(int)chords.normal][(int)rows.upper],
            keys[(int)chords.shift][(int)rows.upper]);
        upper.Children.Add(add(new Item()
        {
            Mode = Modes.Enter,
            Content = "↵",
        }, 32, 24));
        panel.Children.Add(upper);
        // Middle
        StackPanel middle = new StackPanel()
        {
            Orientation = Orientation.Horizontal,
            BorderThickness = new Thickness(1, 0, 1, 0)
        };
        middle.Children.Add(new Canvas()
        {
            Width = 42,
            Height = 24
        });
        row(middle, keys[(int)chords.normal][(int)rows.middle],
                    keys[(int)chords.shift][(int)rows.middle]);
        panel.Children.Add(middle);
        // Lower
        StackPanel lower = new StackPanel()
        {
            Orientation = Orientation.Horizontal,
            BorderThickness = new Thickness(1, 0, 1, 0)
        };
        lower.Children.Add(new Canvas()
        {
            Width = 50,
            Height = 24
        });
        row(lower, keys[(int)chords.normal][(int)rows.lower],
                    keys[(int)chords.shift][(int)rows.lower]);
        panel.Children.Add(lower);
        // Bottom
        StackPanel bottom = new StackPanel()
        {
            Orientation = Orientation.Horizontal,
            BorderThickness = new Thickness(1, 0, 1, 0)
        };
        bottom.Children.Add(new Canvas()
        {
            Width = 60,
            Height = 24
        });
        bottom.Children.Add(add(new Item()
        {
            Mode = Modes.Shift,
            Content = "Shift",
        }, 40, 24));
        bottom.Children.Add(add(new Item()
        {
            Mode = Modes.Space,
            Content = "Space",
        }, 170, 24));
        bottom.Children.Add(add(new Item()
        {
            Mode = Modes.Shift,
            Content = "Shift",
        }, 40, 24));
        panel.Children.Add(bottom);
    }

    private void update(StackPanel input)
    {
        IEnumerable<Button> buttons = getChildren<Button>(input);
        foreach (Button button in buttons)
        {
            if (button.Tag != null &&
                button.Tag.GetType() == typeof(Item))
            {
                Item item = (Item)button.Tag;
                if (item.Mode == Modes.Character)
                {
                    item.Value = (chord == chords.shift) ? item.Shift : item.Normal;
                    item.Content = item.Value;
                    button.Content = item.Content;
                    button.Tag = item;
                }
            }
        }
    }

    public void Init(StackPanel panel)
    {
        layout(ref panel);
    }

    public void Output(TextBox display, StackPanel input, Item item)
    {
        string value = string.Empty;
        switch (item.Mode)
        {
            case Modes.Backspace:
                int start = display.SelectionStart == 0 ?
                    display.Text.Length + 1 : display.SelectionStart;
                display.Select(start - 1, 1);
                display.SelectedText = string.Empty;
                break;
            case Modes.Character:
                value = (chord == chords.shift) ? item.Shift : item.Normal;
                break;
            case Modes.Enter:
                value = "\n";
                break;
            case Modes.Shift:
                chord = (chord == chords.shift) ? chords.normal : chords.shift;
                update(input);
                break;
            case Modes.Space:
                value = " ";
                break;
            case Modes.Tab:
                value = "\t";
                break;
        }
        display.Text += value;
    }
}

It should then appear as such:

2015-keyboard-app-library

Step 7

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="*"/>
		<RowDefinition Height="Auto"/>
	</Grid.RowDefinitions>
	<TextBox Name="Display" Grid.Row="0" AcceptsReturn="True" TextWrapping="Wrap" 
				VerticalAlignment="Stretch" PreventKeyboardDisplayOnProgrammaticFocus="True"/>
	<Viewbox Grid.Row="1" Height="120" Width="330">
		<StackPanel Name="Input" />
	</Viewbox>
</Grid>

It should appear as such:

2015-keyboard-app-mainpage-xaml

Step 10

Select from the Menu, View then Code

2015-view-code

Step 11

Once in the Code View above the public MainPage() { … } the following should be entered:

public Library Library = new Library();

Then while still in the Code View below this.InitializeComponent(); the following should be entered:

Library.Init(Input);
Library.Pressed += (Item item) =>
{
	Library.Output(Display, Input, item);
};

It should then appear as such:

2015-keyboard-app-mainpage-code

Step 12

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 13

Once the Simulator has started the Application should then appear

2015-keyboard-app-simulator-run

Step 14

After the Application has started running you can tap any button on the Keyboard to type that into the Application

2015-keyboard-app-simulator-ran

Step 15

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 16

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 17

Once the Emulator has started the Application should then appear

2015-keyboard-app-emulator-run

Step 18

After the Application has started running you can tap any button on the Keyboard to type that into the Application

2015-keyboard-app-emulator-ran

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Adaptive App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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;

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

public class Library
{
    public 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 static async void Launch(GridView grid)
    {
        string value = ((Setting)(grid.SelectedItem)).Value;
        await Launcher.LaunchUriAsync(new Uri("ms-settings:" + value));
    }
}

It should then appear as such:

2015-adaptive-app-library

Step 7

From the Solution Explorer select App.xaml

2015-app-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The XAML View will be displayed and in this above </Application> enter the following XAML:

<Application.Resources>
	<DataTemplate x:Key="Desktop">
		<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="DesktopItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4"/>
	</ItemsPanelTemplate>
	<DataTemplate x:Key="Mobile">
		<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="MobileItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
	</ItemsPanelTemplate>
</Application.Resources>

It should appear as such:

2015-adaptive-app-app-xaml

Step 10

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 11

Select from the Menu, View then Designer

2015-view-designer

Step 12

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<GridView Name="Display" HorizontalAlignment="Center" VerticalAlignment="Center"  
		SelectionChanged="Display_SelectionChanged" 
		ItemsSource="{x:Bind Path=Library.Settings}"/>
<VisualStateManager.VisualStateGroups>
	<VisualStateGroup>
		<VisualState>
			<VisualState.StateTriggers>
				<AdaptiveTrigger MinWindowWidth="720"/>
			</VisualState.StateTriggers>
			<VisualState.Setters>
				<Setter Target="Display.ItemTemplate" Value="{StaticResource Desktop}"/>
				<Setter Target="Display.ItemsPanel" Value="{StaticResource DesktopItems}"/>
			</VisualState.Setters>
		</VisualState>
		<VisualState>
			<VisualState.StateTriggers>
				<AdaptiveTrigger MinWindowWidth="0"/>
			</VisualState.StateTriggers>
			<VisualState.Setters>
				<Setter Target="Display.ItemTemplate" Value="{StaticResource Mobile}"/>
				<Setter Target="Display.ItemsPanel" Value="{StaticResource MobileItems}"/>
			</VisualState.Setters>
		</VisualState>
	</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

It should appear as such:

2015-adaptive-app-mainpage-xaml

Step 13

Select from the Menu, View then Code

2015-view-code

Step 14

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

public Library Library = new Library();

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

It should then appear as such:

2015-adaptive-app-mainpage-code

Step 15

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 16

Once the Simulator has started the Application should then appear displaying the Large view of the Application

2015-adaptive-app-simulator-run

Step 17

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 18

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 19

Once the Emulator has started the Application should then appear displaying the Small view of the Application

2015-adaptive-app-emulator-run

Step 20

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Tailored App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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;

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

public class Library
{
    public 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 static async void Launch(GridView grid)
    {
        string value = ((Setting)(grid.SelectedItem)).Value;
        await Launcher.LaunchUriAsync(new Uri("ms-settings:" + value));
    }
}

It should then appear as such:

2015-tailored-app-library

Step 7

From the Solution Explorer select App.xaml

2015-app-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The XAML View will be displayed and in this above </Application> enter the following XAML:

<Application.Resources>
	<DataTemplate x:Key="Desktop">
		<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="DesktopItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4"/>
	</ItemsPanelTemplate>
	<DataTemplate x:Key="Mobile">
		<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="MobileItems">
		<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="1"/>
	</ItemsPanelTemplate>
</Application.Resources>

It should appear as such:

2015-tailored-app-app-xaml

Step 10

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

2015-project-add-new-item

Step 11

From the Add New Item window select Visual C# from Installed and select XAML 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

2015-add-new-item-page

Step 12

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

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

It should appear as such:

2015-tailored-app-page-xaml

Step 13

Select from the Menu, View then Code

2015-view-code

Step 14

Once in the Code View below the public Page() { … } the following should be entered:

public Library Library = new Library();

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

It should then appear as such:

2015-tailored-app-page-code

Step 15

From the Solution Explorer select App.xaml

2015-app-library

Step 16

Select from the Menu, View then Code

2015-view-code

Step 17

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

if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily.Contains("Mobile"))
{
	rootFrame.Navigate(typeof(SecondaryPage), e.Arguments);
	Window.Current.Activate();
	return;
}

It should then appear as such:

2015-tailored-app-app-code

Step 18

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 19

Select from the Menu, View then Designer

2015-view-designer

Step 20

The Design View will be displayed along with the XAML View and in this below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

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

It should appear as such:

2015-tailored-app-mainpage-xaml

Step 21

Select from the Menu, View then Code

2015-view-code

Step 22

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

public Library Library = new Library();

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

It should then appear as such:

2015-tailored-app-mainpage-code

Step 23

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 24

Once the Simulator has started the Application should then appear displaying the Desktop view of the Application

2015-tailored-app-simulator-run

Step 25

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 26

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 27

Once the Emulator has started the Application should then appear displaying the Mobile view of the Application

2015-tailored-app-emulator-run

Step 28

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Recognition App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Globalization;
using Windows.Graphics.Imaging;
using Windows.Media.Ocr;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

public class Library
{
    private const string textExt = ".txt";
    private const string imageExt = ".jpg";

    public async Task<bool> Confirm(string content, string title, string ok, string cancel)
    {
        bool result = false;
        MessageDialog dialog = new MessageDialog(content, title);
        dialog.Commands.Add(new UICommand(ok, new UICommandInvokedHandler((cmd) => result = true)));
        dialog.Commands.Add(new UICommand(cancel, new UICommandInvokedHandler((cmd) => result = false)));
        await dialog.ShowAsync();
        return result;
    }

    public async void New(TextBox display)
    {
        if (await Confirm("Create New?", "Recognition App", "Yes", "No"))
        {
            display.Text = string.Empty;
        }
    }

    public async void Open(Image source, TextBox target)
    {
        try
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeFilter.Add(textExt);
            picker.FileTypeFilter.Add(imageExt);
            StorageFile file = await picker.PickSingleFileAsync();
            switch (file.FileType)
            {
                case textExt:
                    target.Text = await FileIO.ReadTextAsync(file);
                    break;
                case imageExt:
                    using (IRandomAccessStream stream = await file.OpenReadAsync())
                    {
                        BitmapDecoder bitmapDecoder = await BitmapDecoder.CreateAsync(stream);
                        SoftwareBitmap softwareBitmap = await bitmapDecoder.GetSoftwareBitmapAsync(
                            BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied);
                        OcrEngine engine = OcrEngine.TryCreateFromLanguage(new Language("en-us"));
                        OcrResult ocrResult = await engine.RecognizeAsync(softwareBitmap);
                        target.Text = ocrResult.Text;
                        stream.Seek(0);
                        BitmapImage image = new BitmapImage();
                        image.SetSource(stream);
                        source.Source = image;
                    }
                    break;
                default:
                    break;
            }
        }
        catch
        {

        }
    }

    public async void Save(Image source, TextBox target)
    {
        try
        {
            FileSavePicker picker = new FileSavePicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeChoices.Add("Image File", new List<string>() { imageExt });
            picker.FileTypeChoices.Add("Text File", new List<string>() { textExt });
            picker.DefaultFileExtension = textExt;
            StorageFile file = await picker.PickSaveFileAsync();
            switch (file.FileType)
            {
                case textExt:
                    await FileIO.WriteTextAsync(file, target.Text);
                    break;
                case imageExt:
                    using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
                    {
                        BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
                        RenderTargetBitmap render = new RenderTargetBitmap();
                        await render.RenderAsync(target);
                        IBuffer buffer = await render.GetPixelsAsync();
                        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,
                        (uint)render.PixelWidth, (uint)render.PixelHeight, 96.0, 96.0, buffer.ToArray());
                        await encoder.FlushAsync();
                        target = null;
                        buffer = null;
                        encoder = null;
                    }
                    break;
                default:
                    break;
            }
        }
        catch
        {

        }
    }

    public void Sample(TextBox target)
    {
        target.Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa diam. " +
            "Nunc luctus non lorem id imperdiet. Nunc quis mi nec enim malesuada commodo mollis eget nisl. " +
            "Sed vulputate in purus eu vulputate. Quisque commodo eu odio et malesuada. Duis porttitor, " +
            "lectus ut egestas placerat, purus nisi elementum diam, congue lacinia erat lectus sit amet felis. " +
            "Proin suscipit lobortis bibendum. Aliquam erat volutpat. Nunc vitae nulla nunc.";
    }
}

It should then appear as such:

2015-recognition-app-library

Step 7

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The Design View will be displayed along with the XAML View and in this above <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Page.BottomAppBar>
	<AppBar IsOpen="True" IsSticky="True">
		<StackPanel Orientation="Horizontal">
			<AppBarButton Icon="Page" Label="New" Click="New_Click"/>
			<AppBarButton Icon="Folder" Label="Open" Click="Open_Click"/>
			<AppBarButton Icon="Save" Label="Save" Click="Save_Click"/>
			<AppBarButton Icon="Document" Label="Sample" Click="Sample_Click"/>
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

While still in the XAML View below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
	<Grid.RowDefinitions>
		<RowDefinition Height="50*"/>
		<RowDefinition Height="50*"/>
	</Grid.RowDefinitions>
	<Image Grid.Row="0" Name="Source"/>
	<TextBox Grid.Row="1" Name="Target" AcceptsReturn="True" TextWrapping="Wrap"/>
</Grid>

It should appear as such:

2015-recognition-app-mainpage-xaml

Step 10

Select from the Menu, View then Code

2015-view-code

Step 11

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

public Library Library = new Library();

private void New_Click(object sender, RoutedEventArgs e)
{
	Library.New(Target);
}

private void Open_Click(object sender, RoutedEventArgs e)
{
	Library.Open(Source, Target);
}

private void Save_Click(object sender, RoutedEventArgs e)
{
	Library.Save(Source, Target);
}

private void Sample_Click(object sender, RoutedEventArgs e)
{
	Library.Sample(Target);
}

It should then appear as such:

2015-recognition-app-mainpage-code

Step 12

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 13

Once the Simulator has started the Application should then appear

2015-recognition-app-simulator-run

Step 14

After the Application has started running you can enter any text then use Save to store a Image file of the text, then Open to Recognise a stored Image file as text in the Application

2015-recognition-app-simulator-ran

Step 15

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 16

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 17

Once the Emulator has started the Application should then appear

2015-recognition-app-emulator-run

Step 18

After the Application has started running you can enter any text then use Save to store a Image file of the text, then Open to Recognise a stored Image file as text in the Application

2015-recognition-app-emulator-ran

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Compression App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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

using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Storage;
using Windows.Storage.Compression;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Popups;
using Windows.UI.Xaml.Controls;

public class Library
{
    private const string textExt = ".txt";
    private const string compressedExt = ".compressed";
    private CompressAlgorithm algorithm = CompressAlgorithm.Lzms;

    public void Show(string content, string title)
    {
        IAsyncOperation<IUICommand> command = new MessageDialog(content, title).ShowAsync();
    }

    public async Task<bool> Confirm(string content, string title, string ok, string cancel)
    {
        bool result = false;
        MessageDialog dialog = new MessageDialog(content, title);
        dialog.Commands.Add(new UICommand(ok, new UICommandInvokedHandler((cmd) => result = true)));
        dialog.Commands.Add(new UICommand(cancel, new UICommandInvokedHandler((cmd) => result = false)));
        await dialog.ShowAsync();
        return result;
    }

    public async void New(TextBox display)
    {
        if (await Confirm("Create New?", "Compression App", "Yes", "No"))
        {
            display.Text = string.Empty;
        }
    }

    public async void Open(TextBox display)
    {
        try
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeFilter.Add(textExt);
            picker.FileTypeFilter.Add(compressedExt);
            StorageFile file = await picker.PickSingleFileAsync();
            switch (file.FileType)
            {
                case textExt:
                    display.Text = await FileIO.ReadTextAsync(file);
                    break;
                case compressedExt:
                    using (MemoryStream stream = new MemoryStream())
                    using (IInputStream input = await file.OpenSequentialReadAsync())
                    using (Decompressor decompressor = new Decompressor(input))
                    using (IRandomAccessStream output = stream.AsRandomAccessStream())
                    {
                        long inputSize = input.AsStreamForRead().Length;
                        ulong outputSize = await RandomAccessStream.CopyAsync(decompressor, output);
                        output.Seek(0);
                        display.Text = await new StreamReader(output.AsStream()).ReadToEndAsync();
                        Show(string.Format("Decompressed {0} bytes to {1} bytes",
                            inputSize, outputSize), "Compression App");
                    }
                    break;
                default:
                    break;
            }
        }
        catch
        {

        }
    }

    public async void Save(TextBox display)
    {
        try
        {
            StringBuilder text = new StringBuilder();
            FileSavePicker picker = new FileSavePicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeChoices.Add("Text File", new List<string>() { textExt });
            picker.FileTypeChoices.Add("Compressed File", new List<string>() { compressedExt });
            picker.DefaultFileExtension = textExt;
            StorageFile file = await picker.PickSaveFileAsync();
            switch (file.FileType)
            {
                case textExt:
                    await FileIO.WriteTextAsync(file, display.Text);
                    break;
                case compressedExt:
                    using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(display.Text)))
                    using (IRandomAccessStream input = stream.AsRandomAccessStream())
                    using (IRandomAccessStream output = await file.OpenAsync(FileAccessMode.ReadWrite))
                    using (Compressor compressor = new Compressor(output.GetOutputStreamAt(0), algorithm, 0))
                    {
                        ulong inputSize = await RandomAccessStream.CopyAsync(input, compressor);
                        bool finished = await compressor.FinishAsync();
                        ulong outputSize = output.Size;
                        Show(string.Format("Compressed {0} bytes to {1} bytes",
                            inputSize, outputSize), "Compression App");
                    }
                    break;
                default:
                    break;
            }
        }
        catch
        {

        }
    }

    public void Sample(TextBox display)
    {
        StringBuilder text = new StringBuilder();
        for (int i = 0; i < 10; i++)
        {
            text.AppendLine("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non massa diam. " +
            "Nunc luctus non lorem id imperdiet. Nunc quis mi nec enim malesuada commodo mollis eget nisl. " +
            "Sed vulputate in purus eu vulputate. Quisque commodo eu odio et malesuada. Duis porttitor, " +
            "lectus ut egestas placerat, purus nisi elementum diam, congue lacinia erat lectus sit amet felis. " +
            "Proin suscipit lobortis bibendum. Aliquam erat volutpat. Nunc vitae nulla nunc.\n");
        }
        display.Text = text.ToString();
    }
}

It should then appear as such:

2015-compression-app-library

Step 7

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The Design View will be displayed along with the XAML View and in this above <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Page.BottomAppBar>
	<AppBar IsOpen="True" IsSticky="True">
		<StackPanel Orientation="Horizontal">
			<AppBarButton Icon="Page" Label="New" Click="New_Click"/>
			<AppBarButton Icon="Folder" Label="Open" Click="Open_Click"/>
			<AppBarButton Icon="Save" Label="Save" Click="Save_Click"/>
			<AppBarButton Icon="Document" Label="Sample" Click="Sample_Click"/>
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

While still in the XAML View below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<TextBox Name="Display" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Stretch"/>

It should appear as such:

2015-compression-app-mainpage-xaml

Step 10

Select from the Menu, View then Code

2015-view-code

Step 11

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

public Library Library = new Library();

private void New_Click(object sender, RoutedEventArgs e)
{
	Library.New(Display);
}

private void Open_Click(object sender, RoutedEventArgs e)
{
	Library.Open(Display);
}

private void Save_Click(object sender, RoutedEventArgs e)
{
	Library.Save(Display);
}

private void Sample_Click(object sender, RoutedEventArgs e)
{
	Library.Sample(Display);
}

It should then appear as such:

2015-compression-app-mainpage-code

Step 12

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 13

Once the Simulator has started the Application should then appear

2015-compression-app-simulator-run

Step 14

After the Application has started running you can enter any text then use Save to store a Compressed version of the text or Open to Decompress a stored file as text in the Application

2015-compression-app-simulator-ran

Step 15

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 16

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 17

Once the Emulator has started the Application should then appear

2015-compression-app-emulator-run

Step 18

After the Application has started running you can enter any text then use Save to store a Compressed version of the text or Open to Decompress a stored file as text in the Application

2015-compression-app-emulator-ran

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License

Windows 10 – Universal Windows Platform – Cryptograph App

Step 1

Download Visual Studio Community 2015 and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio Community 2015 or if it has already been downloaded and installed then start the application you may also need to Enable your device for development.

2015-visual-studio

Step 2

Once Visual Studio Community 2015 has started select File, then New, then Project… from the Menu.

2015-file-new-project

Step 3

From the New Project window select Visual C# from Installed, Templates then select Blank App (Windows Universal) from the list, then type in a Name and select a Location to save to before selecting Ok to create the Project.

2015-new-project

Step 4

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

2015-project-add-new-item

Step 5

From the Add New Item window select Visual C# from Installed and select Code 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

2015-add-new-item-library

Step 6

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

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Security.Cryptography;
using Windows.Security.Cryptography.Core;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.UI.Xaml.Controls;

public class Library
{
    private static byte[] values =
    {
        1, 4, 8, 15, 16, 23, 42, 108, 1, 4, 8, 15, 16, 23, 42, 108,
        1, 4, 8, 15, 16, 23, 42, 108, 1, 4, 8, 15, 16, 23, 42, 108
    };
    private static SymmetricKeyAlgorithmProvider algorithm =
        SymmetricKeyAlgorithmProvider.OpenAlgorithm(SymmetricAlgorithmNames.AesCbcPkcs7);
    private static CryptographicKey key =
        algorithm.CreateSymmetricKey(CryptographicBuffer.CreateFromByteArray(values));
    private static IBuffer iv = values.AsBuffer();

    public async void Open(TextBox display)
    {
        try
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeFilter.Add(".txt");
            StorageFile file = await picker.PickSingleFileAsync();
            display.Text = await FileIO.ReadTextAsync(file);
        }
        catch
        {

        }
    }

    public async void Save(TextBox display)
    {
        try
        {
            FileSavePicker picker = new FileSavePicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeChoices.Add("Plain Text", new List<string>() { ".txt" });
            picker.DefaultFileExtension = ".txt";
            picker.SuggestedFileName = "Document";
            StorageFile file = await picker.PickSaveFileAsync();
            if (file != null)
            {
                await FileIO.WriteTextAsync(file, display.Text);
            }
        }
        catch
        {

        }
    }

    public void Encrypt(TextBox display)
    {
        try
        {
            IBuffer buffer = CryptographicBuffer.ConvertStringToBinary(display.Text,
            BinaryStringEncoding.Utf8);
            IBuffer bufferEncrypt = CryptographicEngine.Encrypt(key, buffer, iv);
            display.Text = CryptographicBuffer.EncodeToBase64String(bufferEncrypt);
        }
        catch
        {

        }
    }

    public void Decrypt(TextBox display)
    {
        try
        {
            IBuffer buffer = Convert.FromBase64String(display.Text).AsBuffer();
            IBuffer bufferDecrypt = CryptographicEngine.Decrypt(key, buffer, iv);
            display.Text = CryptographicBuffer.ConvertBinaryToString(
                BinaryStringEncoding.Utf8, bufferDecrypt);
        }
        catch
        {

        }
    }
}

It should then appear as such:

2015-cryptograph-app-library

Step 7

From the Solution Explorer select MainPage.xaml

2015-mainpage-library

Step 8

Select from the Menu, View then Designer

2015-view-designer

Step 9

The Design View will be displayed along with the XAML View and in this above <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<Page.BottomAppBar>
	<AppBar IsOpen="True" IsSticky="True">
		<StackPanel Orientation="Horizontal">
			<AppBarButton Icon="Folder" Label="Open" Click="Open_Click"/>
			<AppBarButton Icon="Save" Label="Save" Click="Save_Click"/>
			<AppBarButton Name="Encrypt" Icon="ProtectedDocument" Label="Encrypt" Click="Encrypt_Click"/>
			<AppBarButton Name="Decrypt" Icon="Document" Label="Decrypt" Click="Decrypt_Click"/>
		</StackPanel>
	</AppBar>
</Page.BottomAppBar>

While still in the XAML View below <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> enter the following XAML:

<TextBox Name="Display" AcceptsReturn="True" TextWrapping="Wrap" VerticalAlignment="Stretch"/>

It should appear as such:

2015-cryptograph-app-mainpage-xaml

Step 10

Select from the Menu, View then Code

2015-view-code

Step 11

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

public Library Library = new Library();

private void Open_Click(object sender, RoutedEventArgs e)
{
	Library.Open(Display);
}

private void Save_Click(object sender, RoutedEventArgs e)
{
	Library.Save(Display);
}

private void Encrypt_Click(object sender, RoutedEventArgs e)
{
	Library.Encrypt(Display);
}

private void Decrypt_Click(object sender, RoutedEventArgs e)
{
	Library.Decrypt(Display);
}

It should then appear as such:

2015-cryptograph-app-mainpage-code

Step 12

That completes the Universal Windows Application so Save the Project then select the Debug and Simulator option to run the Application

2015-simulator

Step 13

Once the Simulator has started the Application should then appear

2015-cryptograph-app-simulator-run

Step 14

After the Application has started running you can enter any text then use Encrypt to encode the text or Decrypt to decode the text in the Application

2015-cryptograph-app-simulator-ran

Step 15

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Step 16

Another option is to run as a Windows 10 Mobile application, select Debug and select Emulator 10.0.10586.0 WVGA 4 inch 512MB option to run the Application

2015-emulator

Step 17

Once the Emulator has started the Application should then appear

2015-cryptograph-app-emulator-run

Step 18

After the Application has started running you can enter any text then use Encrypt to encode the text or Decrypt to decode the text in the Application

2015-cryptograph-app-emulator-ran

Step 19

To Exit the application select Stop Debugging in Visual Studio Community 2015

2015-stop

Creative Commons License