Windows 10 Technical Preview Universal Application – Task Editor

Step 1

Download Visual Studio 2015 CTP 6 and Download Tools for Windows 10 Technical Preview and install it onto your computer, if it’s already downloaded and installed select Launch to start Visual Studio 2015 CTP 6 or if it has already been downloaded and installed then start the application.

vs-10-home

Step 2

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

vs-10-file-new-project

Step 3

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

vs-10-new-project

Step 4

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

vs-10-add-new-item

Step 5

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

vs-10-shared-code-file

Step 6

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

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Xml.Linq;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Provider;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

public class Shared
{
    public delegate void OpenedEvent(List<CheckBox> value);
    public static event OpenedEvent Opened;



    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 void Add(ref ListBox display, string value, KeyRoutedEventArgs args)
    {
        if (args.Key == Windows.System.VirtualKey.Enter)
        {
            try
            {
                CheckBox item = new CheckBox();
                item.Content = value;
                item.Foreground = display.Foreground;
                if (display.SelectedIndex > -1)
                {
                    // Insert after Selected
                    display.Items.Insert(display.SelectedIndex, item);
                }
                else
                {
                    // Add after End
                    display.Items.Add(item);
                }
            }
            catch
            {

            }
            display.Focus(FocusState.Keyboard);
        }
    }

    public void Remove(ref ListBox display)
    {
        if (display.SelectedIndex > -1)
        {
            display.Items.RemoveAt(display.SelectedIndex);
        }
    }

    public async void New(ListBox display)
    {
        if (await Confirm("Create New List?", "Task Editor", "Yes", "No"))
        {
            display.Items.Clear();
        }
    }

    private static async void read(StorageFile file)
    {
        try
        {
            if (file != null)
            {
                if (Opened != null)
                {
                    string value = await FileIO.ReadTextAsync(file);
                    List<CheckBox> list = new List<CheckBox>();
                    XElement xml = XElement.Parse(value);
                    if (xml.Name.LocalName == "tasklist")
                    {
                        foreach (XElement task in xml.Descendants("task"))
                        {
                            CheckBox item = new CheckBox();
                            item.IsChecked = task.FirstAttribute.Value.ToLower() == "checked";
                            item.Content = task.Value;
                            list.Add(item);
                        }
                    }
                    Opened(list);
                }
            }
        }
        catch
        {

        }
    }

    private static async void write(StorageFile file, string value)
    {
        try
        {
            if (file != null)
            {
                CachedFileManager.DeferUpdates(file);
                await FileIO.WriteTextAsync(file, value);
                FileUpdateStatus status = await CachedFileManager.CompleteUpdatesAsync(file);
            }
        }
        catch
        {

        }
    }

    public async void Open()
    {
        try
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeFilter.Add(".tsk");
            read(await picker.PickSingleFileAsync());
        }
        catch
        {

        }
    }
    public async void Save(ListBox display)
    {
        try
        {
            XElement items = new XElement("tasklist");
            foreach (CheckBox item in display.Items)
            {
                items.Add(new XElement("task", item.Content, new XAttribute("value",
                ((bool)item.IsChecked ? "checked" : "unchecked"))));
            }
            string value = new XDocument(new XDeclaration("1.0", "utf-8", "yes"), items).ToString();
            FileSavePicker picker = new FileSavePicker();
            picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            picker.FileTypeChoices.Add("Task List", new List<string>() { ".tsk" });
            picker.DefaultFileExtension = ".tsk";
            picker.SuggestedFileName = "Document";
            write(await picker.PickSaveFileAsync(), value);
        }
        catch
        {

        }
    }
}

It should then appear as such:

vs-10-shared-taskeditor

Step 7

From the Solution Explorer select the MainPage.xaml from the Project

vs-10-mainpage

Step 8

Select from the Main Menu, View then Designer

vs-10-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 Name="New" Icon="Page" Label="New" Click="New_Click"/>
			<AppBarButton Name="Open" Icon="Folder" Label="Open" Click="Open_Click"/>
			<AppBarButton Name="Save" Icon="Save" Label="Save" Click="Save_Click"/>
			<AppBarButton Name="Remove" Icon="Remove" Label="Remove" Click="Remove_Click"/>
		</StackPanel>
	</AppBar>   
</Page.BottomAppBar>

While still in the XAML View below </Grid>enter the following XAML:

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto"/>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<TextBox Grid.Row="0" Margin="20" KeyDown="Add_KeyDown" Name="Value"/>
	<ListBox Grid.Row="1" VerticalAlignment="Stretch" FontFamily="Segoe UI" FontSize="16" Name="Display"/>
</Grid>

It should appear as such:

vs-10-xaml-taskeditor

Step 10

Select from the Main Menu, View then Code

vs-10-code

Step 11

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

public Shared Shared = new Shared();

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

private void Open_Click(object sender, RoutedEventArgs e)
{
	Shared.Opened += (List<CheckBox> value) =>
	{
		Display.Items.Clear();
		foreach (CheckBox item in value)
		{
			item.Foreground = Display.Foreground;
			Display.Items.Add(item);
		}
	};
	Shared.Open();
}

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

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

private void Add_KeyDown(object sender, KeyRoutedEventArgs e)
{
	Shared.Add(ref Display, Value.Text, e);
}

It should then appear as such:

vs-10-code-taskeditor

Step 12

That completes the Universal App Platform Application, so save the Project then select the Simulator option from the Debug Toolbar to run the Application

vs-10-simulator

Step 13

Once the Simulator has started the Application should then appear

vs-10-windows-run-taskeditor

Step 14

After it has started running you can then type in some text in the upper textbox then press or tap enter to add a Task then you can Save the list to Open later or start a New list you can also tick the checkbox when the Task is done

vs-10-windows-ran-taskeditor

Step 15

Select Close to close the message then to Exit the application select Stop Debugging in Visual Studio 2015 CTP 6

vs-10-stop

Step 16

Once close you can run this as a Phone application by select the Debug and select the Emulator 10.0.0.0 WVGA 4 inch 512MB option to run the Application

vs-10-emulator

Step 17

Once the Emulator has started the Application should then appear

vs-10-phone-run-taskeditor

Step 18

After it has started running you can then type in some text in the upper textbox then press or tap enter to add a Task then you can Save the list to Open later or start a New list you can also tick the checkbox when the Task is done

vs-10-phone-ran-taskeditor

Step 19

Select Close to close the message then to Exit the application select Stop Debugging in Visual Studio 2015 CTP 6

vs-10-stop

Creative Commons License

Leave a comment