Click here to Skip to main content
12,629,350 members (34,904 online)
Click here to Skip to main content

Stats

31.2K views
841 downloads
22 bookmarked
Posted

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.
<common:LayoutAwarePage
    x:Class="Clearer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Clearer"
    xmlns:common="using:GridAppTest.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:conv="using:ClearStyle.Converters"
    mc:Ignorable="d">

  <common:LayoutAwarePage.Resources>
    <conv:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
    <conv:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>

    <DataTemplate x:Key="toDoItemTemplate">
      <Border Height="55" x:Name="todoItem">
        <Grid Margin="2"
              Background="{Binding Path=Color, Converter={StaticResource ColorToBrushConverter}}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

          <local:ThumbControl Loaded="Border_Loaded"
                    Width="40" Height="55" ManipulationMode="All" />

          <local:ThumbControl Loaded="Border_Loaded"
                    Width="40" Height="55" ManipulationMode="All"
                                  Grid.Column="2"/>

          <TextBlock Text="{Binding Text, Mode=TwoWay}"
                         FontSize="25" TextTrimming="WordEllipsis"
                         Foreground="White"
                         VerticalAlignment="Center"
                       Grid.Column="1"/>
          <Line Visibility="{Binding Path=Completed, Converter={StaticResource BoolToVisibilityConverter}}"
                      X1="0" Y1="0" X2="1" Y2="0" 
                      Stretch="UniformToFill"
                      Stroke="White" StrokeThickness="2"
                      Margin="8,5,8,0"
                    Grid.Column="1"/>

        </Grid>
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="toDoItemTemplateSmall">
      <Border Height="40" Margin="0"
              x:Name="todoItem">
        <Grid Background="{Binding Path=Color, Converter={StaticResource ColorToBrushConverter}}"
              Margin="2">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>

          <local:ThumbControl Loaded="BorderSmallTemplate_Loaded"
                    Width="20" Height="40" ManipulationMode="All" />

          <local:ThumbControl Loaded="BorderSmallTemplate_Loaded"
                    Width="20" Height="40" ManipulationMode="All"
                                  Grid.Column="2"/>

          <TextBlock Text="{Binding Text, Mode=TwoWay}"
                         FontSize="20" TextTrimming="WordEllipsis"
                         Foreground="White"
                         VerticalAlignment="Center"
                       Grid.Column="1"/>
          <Line Visibility="{Binding Path=Completed, Converter={StaticResource BoolToVisibilityConverter}}"
                      X1="0" Y1="0" X2="1" Y2="0" 
                      Stretch="UniformToFill"
                      Stroke="White" StrokeThickness="2"
                      Margin="3,0,3,0"
                    Grid.Column="1"/>

        </Grid>
      </Border>
    </DataTemplate>

    <ItemsPanelTemplate x:Key="toDoListItemsPanel">
      <StackPanel Orientation="Vertical">
        <StackPanel.ChildrenTransitions>
          <TransitionCollection>
            <EntranceThemeTransition/>
            <AddDeleteThemeTransition/>
          </TransitionCollection>
        </StackPanel.ChildrenTransitions>
      </StackPanel>
    </ItemsPanelTemplate>

    <TransitionCollection x:Key="entranceTransition">
      <EntranceThemeTransition/>
    </TransitionCollection>

    <ControlTemplate TargetType="ListBoxItem" x:Key="listBoxItemTemplate">
      <Border x:Name="LayoutRoot">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver"/>
          </VisualStateGroup>
          <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected">
              <Storyboard>
                <DoubleAnimation Duration="0" To="0"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Selected">
              <Storyboard>
                <DoubleAnimation Duration="0" To="1"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="SelectedUnfocused">
              <Storyboard>
                <DoubleAnimation Duration="0" To="1"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="selectedDot" d:IsOptimized="True"/>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid>
          <!-- the 'dot' that indicates selection -->
          <Ellipse Width="15" Height="15"
                   VerticalAlignment="Center" HorizontalAlignment="Left"
                   Fill="White" x:Name="selectedDot"
                   Opacity="0"/>
          <!-- the content for this item -->
          <ContentControl x:Name="ContentContainer"
                          ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                          HorizontalContentAlignment="Stretch"
                          Foreground="#FF1BA1E2" Margin="20 0 0 0"/>
        </Grid>
      </Border>
    </ControlTemplate>

    
    <Style TargetType="ListBoxItem" x:Key="itemContainerStyle">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
      <Setter Property="Margin" Value="0"/>
      <Setter Property="Padding" Value="0"/>
      <Setter Property="Template" Value="{StaticResource listBoxItemTemplate}"/>
    </Style>
    
    <ControlTemplate TargetType="ItemsControl" x:Key="listBoxControlTemplate">
      <ScrollViewer x:Name="scrollViewer">
        <ItemsPresenter />
      </ScrollViewer>
    </ControlTemplate>

  </common:LayoutAwarePage.Resources>

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
        ChildrenTransitions="{StaticResource entranceTransition}"
        x:Name="ContentRoot">
    
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Image Source="background.jpg"
           Stretch="UniformToFill" Opacity="0.2"
           x:Name="leftHandTitle"
           VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
           Grid.ColumnSpan="2"/>
    
    <Grid Margin="20" 
          x:Name="itemDetailGrid"
          DataContext="{Binding SelectedItem}"
          ChildrenTransitions="{StaticResource entranceTransition}">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Image Source="Assets/StoreLogo.png"
             Width="50" Height="50"
             HorizontalAlignment="Left"/>
      <TextBlock Text="Clearer" FontSize="55"
               Margin="60 20 0 20"
               VerticalAlignment="Center"/>
      <TextBox Text="{Binding Text, Mode=TwoWay}"
               Grid.Row="1" FontSize="25"
               TextChanged="ToDoItem_TextChanged"
               x:Name="toDoItemTitle"
               Height="50"/>
      <Border Grid.Row="2" Margin="0 20 0 0"
              BorderBrush="#444" BorderThickness="3"
              Background="#55000000">
        <TextBox Text="{Binding Description, Mode=TwoWay}"
                 TextWrapping="Wrap" FontSize="25" Foreground="White"  
                 AcceptsReturn="True"
                 Background="Transparent" BorderThickness="0"
                 VerticalAlignment="Stretch"
                   Margin="10"/>
      </Border>
      <Button Content="Add new item"
              Click="ButtonAddNew_Click"
              FontSize="25"
              Grid.Row="3"/>
    </Grid>
        
    <ListBox ItemsSource="{Binding Items}"
              x:Name="todoList"
              Margin="30,0,30,0" Grid.Column="1"
              ItemTemplate="{StaticResource toDoItemTemplate}"
              ItemsPanel="{StaticResource toDoListItemsPanel}"
             Template="{StaticResource listBoxControlTemplate}"
             ItemContainerStyle="{StaticResource itemContainerStyle}"
             SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}">
    </ListBox>
    
    <ItemsControl ItemsSource="{Binding Items}"
              x:Name="todoListCompact"
             Visibility="Collapsed"
              Margin="20,0,20,0" Grid.ColumnSpan="2"
              ItemTemplate="{StaticResource toDoItemTemplateSmall}"
              ItemsPanel="{StaticResource toDoListItemsPanel}"
             Template="{StaticResource listBoxControlTemplate}">
    </ItemsControl>

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="ApplicationViewStates">
        <VisualState x:Name="FullScreenLandscape"/>
        <VisualState x:Name="Filled"/>
        <VisualState x:Name="FullScreenPortrait"/>
        <VisualState x:Name="Snapped">
         <Storyboard>
            <!-- hide the item details view -->  
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- hide the application title -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="leftHandTitle" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- hide the to-do list -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="todoList" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <!-- show a more compact version of the list -->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="todoListCompact" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </Grid>
</common:LayoutAwarePage>

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.

License

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

Share

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...

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