Weekly Planner Silverlight

Background

Weekly Planner Silverlight is a Windows Phone port of ​QML Weekly Planner. See the porting notes here.

Design Approach

Weekly Planner has been designed to utilise the pivot control, so that each day is in its own pivot view along with a time column. Panorama control was also considered as an option, but as it turned out neither the panorama nor the pivot were matched perfectly for this use. Pivot seemed to be more suitable for few reasons. Since individual cells stretch according to the textual content, in panorama the whole row would stretch along. Why stretch empty cells bigger, for example? Also, panorama would not allow the user to always see the time column, which would affect the usability of the app negatively. The application supports both portrait and landscape modes.

Implementation approach

Deviations from original design

During implementation, the user experience of the application was evaluated iteratively and it was observed that the user experience could be enhanced by slightly modifying the original design. As a result the following changes were made:

• The 'Edit Event' view includes user interface controls to set the starting and ending time of the event. Therefore, the 'Set duration' menu item does not exist in the context menu.
• 'Copy' and 'Paste' menu items were moved from the context menu to the 'Edit Event' view in order to highlight that they are used to copy/paste the description of an event. If they were in the context menu, it would imply that the complete data of an event would be copied/pasted.
• A new 'Event Details' view was introduced that shows the details of an event when it is tapped in the main view, and the button to remove the event was moved from the 'Edit Event' view to this view.
• A new menu item which can be used to remove the event was added to the context menu.

Application data

The persistent data of the application consists of the events the user has saved. This data is encapsulated in the EventViewModel class and includes information such as the starting time and description of the event.

The primary class for application data is the MainViewModel class. It includes methods to save and load event data to/from disk through IsolatedStorage in XML format (through the use of DataContractSerializer). Event data is stored in an ObservableCollection of EventViewModel instances during run-time.

Additionally, MainViewModel manages the clipboard of the application. However, clipboard is considered a run-time feature only and it is not persisted to disk.

Customising pivot control

The main view of the application (specified by MainPage.xaml and its code-behind class) consists of a pivot control with pages for each day of the week. Because the pivot of the application is slightly modified from the standard style (the selected/unselected pivot headers have different colours), it is necessary to override the default style and control template of the pivot. The default control template of the pivot was obtained using Expression Blend, and the following control template was created to set different selected/unselected colours for pivot headers based on 'Selected' and 'Unselected' VisualStates of PivotHeaderItem:

xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
...
<Setter Property="Template">
 <Setter.Value>
  <ControlTemplate TargetType="controls:Pivot">
   <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
    <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
    <ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
    <controlsPrimitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1">
     <controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
      <Style TargetType="controlsPrimitives:PivotHeaderItem">
       <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeExtraExtraLarge}"/>
       <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
          <Grid>
           <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SelectionStates">
             <VisualState x:Name="Unselected"/>
             <VisualState x:Name="Selected">
              <Storyboard>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground)" Storyboard.TargetName="headerText">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PivotTitleSelectedBrush}">
                </DiscreteObjectKeyFrame>
               </ObjectAnimationUsingKeyFrames>
              </Storyboard>
             </VisualState>
            </VisualStateGroup>
           </VisualStateManager.VisualStateGroups>
           <TextBlock x:Name="headerText"
                Text="{TemplateBinding Content}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}"
                Foreground="{StaticResource PivotTitleDeselectedBrush}"/>
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
     </controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
    </controlsPrimitives:PivotHeadersControl>
    <ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
   </Grid>
  </ControlTemplate>
 </Setter.Value>
</Setter>

Creation of additional custom controls

For each day, a two-column grid is used to show the available times and existing events. Using a standard Silverlight Grid control directly in creating a two-column grid would be awkward because it is designed to be used only as a layout for other controls. The two-column grid must also handle higher level functionality such as sending events when an event or a time slot is selected by the user. Therefore the two-column grid is implemented as a custom control named 'WeeklyGrid'.

WeeklyGrid control is inherited from the Silverlight Control base class to allow the specification of control templates. The default control template of WeeklyGrid (which is specified in the Silverlight default style file under Themes/generic.xaml) uses Silverlight's Grid control to lay its children out into two columns. This control also registers as a listener for events sent by its children. For example, when a user clicks an event to view its details, the WeeklyGrid control receives the tap/click event and converts it into a higher level event of its own that is understood by the application logic of MainPage.

WeeklyGrid can have two kinds of children: children that represent a time slot (either in the left or right column where left column always includes the time) or an existing event. Time slot children are defined in the control template while event children are created on-the-fly based on the MainViewModel of the application. Because the event collection can change at any time, WeeklyGrid registers event handlers to track changes in MainViewModel.Items (which is an ObservableCollection that notifies event handlers if an item is added to or removed from the collection) and, if necessary, refreshes itself.

Children that represent time slots and events are based on the Silverlight Button class because it contains an existing 'Click' event and an existing visual state for the 'Pressed' state. For time slot buttons, a new style called 'WeeklyRow' is created, and it overrides Button's default control template. For event buttons, a similar approach was used, but a new control called 'WeeklyEvent' is also inherited from Button. This allows us to house a reference of the EventViewModel associated with the control directly and to change the colour theme of the event graphics in the OnApplyTemplate() method of the control.

Screenshots

Release downloads

ID	File	Description	Size	Uploaded	Dls	Uploader	Component	Version	Platform	Type
8	wpweeklyplanner_1.2.0.zip		2.3 MB	11 Jan 2012	3425	kalle.futu		1.2.0	Windows	Source
7	wpweeklyplanner_1.2.0.xap		1.2 MB	11 Jan 2012	129	kalle.futu		1.2.0	Windows	Binary

Project information

• Project name: Weekly Planner Silverlight
• Project identifier: wpweeklyplanner
• Owner: haapanio
• Create date: 2011-05-20 14:43:47
• Project url: wpweeklyplanner
• Version control: https://projects.developer.nokia.com/hg/wpweeklyplanner/
• Project (WebDAV) shared folder: https://projects.developer.nokia.com/dav/wpweeklyplanner/
• Downloads: Downloads