Universal Windows Platform – Timeline

Timeline demonstrates how to use UserActivity to add to the Timeline in Task View of Windows 10

Step 1

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

vs2017

Step 2

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

vs2017-file-new-project

Step 3

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

Step 4

Then in New Universal Windows Project you need to select the Target Version this should be at least the Windows 10, version 1803 (10.0; Build 17134) which is the April 2018 Update and the Minimum Version to be the same.

vs2017-target-platform

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

Step 5

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

vs2017-project-add-new-item

Step 6

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

vs2017-add-new-item-library

Step 7

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

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.ApplicationModel.UserActivities;
using Windows.Foundation;
using Windows.UI;
using Windows.UI.Xaml.Controls;

public class TimelineItem
{
    public string Id { get; set; }
    public Color Colour { get; set; }
    public string Title { get; set; }
    public string Body { get; set; }
}

public class Library
{
    private const string app_title = "Timeline";
    private const string primary_text = "Create";
    private const string secondary_text = "Cancel";
    private const string timeline_uri = "https://comentsys.wordpress.com/uwp-timeline";
    private readonly Random random = new Random((int)DateTime.Now.Ticks);

    private ColorPicker _picker;
    private IAsyncOperation<ContentDialogResult> _dialogResult;
    private UserActivityChannel _channel = UserActivityChannel.GetDefault();
    private ObservableCollection<TimelineItem> _list = new ObservableCollection<TimelineItem>();

    private async Task<ContentDialogResult> ShowDialogAsync(object content, string title = app_title)
    {
        try
        {
            if (_dialogResult != null)
            {
                _dialogResult.Cancel();
                _dialogResult = null;
            }
            _dialogResult = new ContentDialog()
            {
                Title = app_title,
                Content = content,
                PrimaryButtonText = primary_text,
                SecondaryButtonText = secondary_text
            }.ShowAsync();
            return await _dialogResult;
        }
        catch (TaskCanceledException)
        {
            return ContentDialogResult.None;
        }
    }

    private async Task<Color?> ShowColour()
    {
        _picker = new ColorPicker()
        {
            IsColorChannelTextInputVisible = true,
            IsAlphaSliderVisible = false,
            IsColorSliderVisible = false,
            IsHexInputVisible = true,
            IsAlphaEnabled = false,
        };
        if (await ShowDialogAsync(_picker) == ContentDialogResult.Primary)
        {
            return _picker.Color;
        }
        return null;
    }

    private async Task<string> Create(string title, string body, Color background)
    {
        string id = random.Next(1, 100000000).ToString();
        UserActivity activity = await _channel.GetOrCreateUserActivityAsync(id);
        activity.VisualElements.DisplayText = title;
        activity.ActivationUri = new Uri(timeline_uri);
        activity.FallbackUri = new Uri(timeline_uri);
        activity.VisualElements.BackgroundColor = background;
        activity.VisualElements.Description = body;
        await activity.SaveAsync();
        UserActivitySession session = activity.CreateSession();
        session?.Dispose();
        return id;
    }

    public async void Init(ListBox display)
    {
        _list.Clear();
        IList<UserActivitySessionHistoryItem> list = await 
            _channel.GetRecentUserActivitiesAsync(maxUniqueActivities: 25);
        foreach (UserActivitySessionHistoryItem item in list)
        {
            _list.Add(new TimelineItem()
            {
                Id = item.UserActivity.ActivityId,
                Title = item.UserActivity.VisualElements.DisplayText,
                Body = item.UserActivity.VisualElements.Description,
                Colour = item.UserActivity.VisualElements.BackgroundColor
            });
        }
        display.ItemsSource = _list;
    }

    public async void Add(ListBox display, TextBox title, TextBox body)
    {
        Color? result = await ShowColour();
        if (result != null)
        {
            string id = await Create(title.Text, body.Text, result.Value);
            _list.Add(new TimelineItem
            {
                Id = id,
                Title = title.Text,
                Body = body.Text,
                Colour = result.Value
            });
        }
    }

    public async void Remove(ListBox display, AppBarButton button)
    {
        TimelineItem item = (TimelineItem)button.Tag;
        if (_channel.GetOrCreateUserActivityAsync(item.Id) != null)
        {
            await _channel.DeleteActivityAsync(item.Id);
        }
        _list.Remove(item);
    }
}

In the Code File for Library there are using statements to include the necessary functionality. There is also a TimelineItem Class with Properties for Id, Colour, Title and Body.

The Library Class has various const and readonly Values including Random to produce randomised numbers. There are Members for ColourPicker and ContentDialogResult used with a ContentDialog later and UserActivityChannel for ttems added to the Timeline and an ObservableCollection for all the items added as TimelineItem.

Also in the Library Class is a ShowDialogAsync to show a ContentDialog which is used by ShowColour to display this with the Content set to a ColorPicker and return the resulting Color or null if Cancelled and there is a Create Method which will setup a UserActivity using some of the passed in values.

Finally in the Library Class there is an Init Method which will get any existing UserActivitySessionHistoryItem from the UserActivityChannel and populate the ObservableCollection of TimelineItem from this and set it to the ItemsSource of a ListBox. The Add Method will call ShowColour to pick a Colour then if this is set it will call the Create Method and insert a TimelineItem into the ObservableCollection of TimelineItem and the Remove Method will get a selected item from a Listbox then call DeleteActivityAsync on the UserActivityChannel, first checking with GetOrCreateUserActivityAsync to see if it exists then also Remove the item from the ObservableCollection.

Step 8

In the Solution Explorer select MainPage.xaml

vs2017-mainpage-library

Step 9

From the Menu choose View and then Designer

vs2017-view-designer

Step 10

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

<Grid Margin="50">
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto"/>
		<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<Grid Grid.Row="0">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="50*"/>
			<ColumnDefinition Width="50*"/>
		</Grid.ColumnDefinitions>
		<TextBox Name="Title" Grid.Column="0" PlaceholderText="Title" Margin="20" VerticalAlignment="Center"/>
		<TextBox Name="Body" Grid.Column="1" PlaceholderText="Body" Margin="20" VerticalAlignment="Center"/>
	</Grid>
	<ListBox Name="Display" Grid.Row="1">
		<ListBox.ItemContainerStyle>
			<Style TargetType="ListBoxItem">
				<Setter Property="HorizontalContentAlignment" Value="Stretch" />
			</Style>
		</ListBox.ItemContainerStyle>
		<ListBox.ItemTemplate>
			<DataTemplate>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="Auto"/>
						<ColumnDefinition Width="50*"/>
						<ColumnDefinition Width="50*"/>
						<ColumnDefinition Width="Auto"/>
					</Grid.ColumnDefinitions>
					<Rectangle Grid.Column="0" Width="50" Height="30" Margin="5" VerticalAlignment="Center">
						<Rectangle.Fill>
							<SolidColorBrush Color="{Binding Path=Colour}"/>
						</Rectangle.Fill>
					</Rectangle>
					<TextBlock Grid.Column="1" TextWrapping="Wrap" Text="{Binding Path=Title}" VerticalAlignment="Center"/>
					<TextBlock Grid.Column="2" TextWrapping="Wrap" Text="{Binding Path=Body}" VerticalAlignment="Center"/>
					<AppBarButton Grid.Column="3" Tag="{Binding}" Icon="Remove" Label="Remove" Click="Remove_Click"/>
				</Grid>
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>
</Grid>
<CommandBar Name="Command" VerticalAlignment="Bottom">
	<AppBarButton Icon="Add" Label="Add" Click="Add_Click"/>
</CommandBar>

Within the main Grid Element, the first block of XAML is a Grid Control which has two Rows and Columns, in the first Row are two TextBox Controls in a Column each for Title and Body and in the second Row is a ListBox this has a DataTemplate set which is a Grid with four Columns, the first for a Rectangle to show Colour, the second for a TextBlock for Title, the first for a TextBlock for Body and the fourth for a AppBarButton that calls Remove_Click. The second block of XAML is a CommandBar with AppBarButton for Add which calls Add_Click.

Step 11

From the Menu choose View and then Code

vs2017-view-code

Step 12

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

Library library = new Library();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	library.Init(Display);
}

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

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

Below the MainPage() Method an instance of the Library Class is created, then there is an OnNavigatedTo Event Handler which calls the Init Method in the Library Class, there is an Add_Click Event Handler which calls the Add Method in the Library Class and Remove_Click which calls the Remove Method in the Library Class.

Step 13

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

vs2017-local-machine

Step 14

After the Application has started running you can then type into the TextBox for Title and Body then select Add to pick a Colour and to add this to the Timeline in Windows 10

run-timeline

Step 15

The Activity will be displayed in Windows 10 in the Task View in the Timeline created in the Application.

ran-timeline

Step 16

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

vs2017-close

Timeline shows how easy it is to add to the Timeline and perform different activities either simple to launch a Url or more complex such as passing into an application or other options are possible with UserActivity and its related Classes and functionality.

Creative Commons License

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s