Click here to Skip to main content
12,759,844 members (30,691 online)
Click here to Skip to main content


22 bookmarked
Posted 9 Oct 2012

Clearer – A Gesture-Driven Windows 8 To-Do Application

, 9 Oct 2012 CPOL
This article describes my experiences of porting a novel gesture-driven Windows Phone app to Windows 8.
using ClearStyle.Interactions;
using ClearStyle.ViewModel;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using LinqToVisualTree;
using GridAppTest.Common;
using Windows.UI.Notifications;
using Windows.Data.Xml.Dom;
using ClearStyle;

// The Blank Page item template is documented at

namespace Clearer
  /// <summary>
  /// An empty page that can be used on its own or navigated to within a Frame.
  /// </summary>
  public sealed partial class MainPage : LayoutAwarePage

    public static MainPage Current { get; private set; }

    private InteractionManager _interactionManagerBigList = new InteractionManager();

    private InteractionManager _interactionManagerSmallList = new InteractionManager();

    private ToDoListViewModel _viewModel;

    public MainPage()
      Current = this;

      _viewModel = new ToDoListViewModel();
      _viewModel.Items.Add(new ToDoItem("Feed the cat"));
      _viewModel.Items.Add(new ToDoItem("Buy eggs"));
      _viewModel.Items.Add(new ToDoItem("Pack bags for the MVP conference"));
      _viewModel.Items.Add(new ToDoItem("Rule the web"));
      _viewModel.Items.Add(new ToDoItem("Order business cards"));
      _viewModel.Items.Add(new ToDoItem("Fix laptop"));
      _viewModel.Items.Add(new ToDoItem("Get some dollars for trip"));
      _viewModel.Items.Add(new ToDoItem("Shirts"));
      _viewModel.Items.Add(new ToDoItem("Shopping"));
      _viewModel.Items.Add(new ToDoItem("Extension plans"));
      _viewModel.Items.Add(new ToDoItem("Choose colour scheme"));
      _viewModel.Items.Add(new ToDoItem("Create new website"));
      _viewModel.Items.Add(new ToDoItem("Write-up blog post"));
      _viewModel.Items.Add(new ToDoItem("Choose life"));
      _viewModel.Items.Add(new ToDoItem("Remember wedding anniversary"));
      _viewModel.Items.Add(new ToDoItem("Book cinema tickets"));
      _viewModel.Items.Add(new ToDoItem("Adopt a healthy life-style"));
      _viewModel.Items.Add(new ToDoItem("Do more sports"));

      this.DataContext = _viewModel;

      var dragReOrderInteraction = new DragReOrderInteraction();
      dragReOrderInteraction.Initialise(todoList, _viewModel.Items);

      var swipeInteraction = new SwipeInteraction();
      swipeInteraction.Initialise(todoList, _viewModel.Items);

      dragReOrderInteraction = new DragReOrderInteraction();
      dragReOrderInteraction.Initialise(todoListCompact, _viewModel.Items);

      swipeInteraction = new SwipeInteraction();
      swipeInteraction.Initialise(todoListCompact, _viewModel.Items);


    private void Border_Loaded(object sender, RoutedEventArgs e)
      FrameworkElement manipulationElement = sender as FrameworkElement;
      Border transformElement = manipulationElement.Ancestors<Border>().OfType<Border>().First();
      _interactionManagerBigList.AddElement(manipulationElement, transformElement);


    private void BorderSmallTemplate_Loaded(object sender, RoutedEventArgs e)
      FrameworkElement manipulationElement = sender as FrameworkElement;
      Border transformElement = manipulationElement.Ancestors<Border>().OfType<Border>().First();
      _interactionManagerSmallList.AddElement(manipulationElement, transformElement);

    private void ButtonAddNew_Click(object sender, RoutedEventArgs e)
      // scroll the list to the top

      // add the new item
      var item = _viewModel.AddNewItem();

      // immediately start editing
      todoList.SelectedItem = item;

    public void ProcessQueryText(string text)
      _viewModel.SearchText = text;

    private void ToDoItem_TextChanged(object sender, TextChangedEventArgs e)
      // copy the updates text across to the model as soon as it is changed
      var item = ((FrameworkElement)sender).DataContext as ToDoItem;
      item.Text = ((TextBox)sender).Text;

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Colin Eberhardt
Architect Scott Logic
United Kingdom United Kingdom
I am CTO at ShinobiControls, a team of iOS developers who are carefully crafting iOS charts, grids and controls for making your applications awesome.

I am a Technical Architect for Visiblox which have developed the world's fastest WPF / Silverlight and WP7 charts.

I am also a Technical Evangelist at Scott Logic, a provider of bespoke financial software and consultancy for the retail and investment banking, stockbroking, asset management and hedge fund communities.

Visit my blog - Colin Eberhardt's Adventures in .NET.

Follow me on Twitter - @ColinEberhardt


You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170217.1 | Last Updated 10 Oct 2012
Article Copyright 2012 by Colin Eberhardt
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid