RSS Feed

DekstopTodo – Simple Todo list application

I am a time management freak. That’s why I was creating application TimeIsMoney. Currently, I m not working on this app. Instead I had another idea based on an earlier project, I m creating a new simpler app. “Desktop Todo”.

 

image

 

It is a simple app which let you create Todo lists displayed on the desktop. Currently, it supports only task showing and ability to mark the task as a completed. It supports “*.tdl” files from Todo List program. In future releases, it is gonna support its own, simpler format.

Application stays in tray. There isn’t any Main Window. To do this in WPF , I m using the WPF NotifyIcon by Philip Sumi check out this great control. You can do a lot of things with it.

 

If you want to add new list right click on the Todo List Notify Icon in the tray and select “*.tdl” formatted xml file.

This is an early version. Make a  copy of your “*.tdl. file before trying it out !!.

image

 

Features in this early release:

– You can open “*.tdl” files. Check out the Todo List.

– You can Complete Tasks.

– You can Filter out tasks which are due in this : Day , Week (DWA) panel

– You can add multiple projects.

– You can hide list by clicking on the project name.

– You can delete list.

 

Future features :

– integration with visual studio

– special color of task if it is over due

– time tracking

– complex filtering

– ability to attach files to the tasks (eg. on click you can open a pdf file like ebook)

 

 

Source Code

Download (Soon :P)

If you have any ideas feel free to share them with me. Mail me or post a comment.


Activity Tracker – New Design

image

 

I have been working lately on new design for Activity Tracker. There is still a lot of things to do but as you can see it is a nice improvement, compared to the previous version. New Version will be available after some tests.


Time Is Money 0.2.5 – Activity Tracker Alpha Version

It’s time to show you a simple version of one of the tools in TimeIsMoney project,  Activity Tracker. This early release enables simple tracking of tasks. Design is still very simple, I m working on it.

image Pic 1. Activity Tracker Alpha

Link : ActivityTracker

 

Requirements :

1) .Net 4.0 Framework

2) TODO list file. [At the moment it  only supports this xml format]

 

QuickStart :

1) Load Projects by plus button.

2) Select Project and click Start on Task you want to track.

3) Unload and save changes by clicking minus Button

 

Future Release:

0.2.6

– Better Design – Activity Tracker

– Moving task adding tool from Windows Forms to WPF.


Activity Tracker – WPF DataBinding the TabControl with TreeView

In the first post about Activity Tracker, I have created a simple style for my application. In this post, I want to show DataBinding. With this feature, we can make a flexible connection between Model and View Layer. There is no need for code. Everything is constructed in XAML language, which is similar to the HTML Markup.

Simple Binding – DataTemplate

In the first example, we have a simple DataTemplate. It contains a structured Grid,  Button and couple of TextBlocks. By assigning to the Text Property Binding logic we are telling the Template too look for a specific property in a Class, which will be used with the Template.

1 <DataTemplate x:Key="TaskTemplate"> 2 <Grid Width="200"> 3 <Grid.ColumnDefinitions> 4 <ColumnDefinition Width="5*"></ColumnDefinition> 5 <ColumnDefinition Width="1*"></ColumnDefinition> 6 <ColumnDefinition Width="1*"></ColumnDefinition> 7 <ColumnDefinition Width="3*"></ColumnDefinition> 8 </Grid.ColumnDefinitions> 9 <TextBlock Grid.Column="0" Text="{Binding Path=Title}"/> 10 <TextBlock Grid.Column="1" Text="{Binding Path=TimeSpent}"/> 11 <TextBlock Grid.Column="2" Text="{Binding Path=TimeEstimate}"/> 12 <Button Grid.Column="3">Start</Button> 13 </Grid> 14 </DataTemplate>

Template is looking for specified properties in a collection bound to the ItemsSource Property. We can also do this by the DataContext, it’s more powerful concept for another Post.

image

HierarchicalDataTemplate

Simple DataTemplate doesn’t have the ability to automatically create a hierarchy. I could make a code and implement a logic  to get this effect but fortunately WPF have a HierarchicalDataTemplate. This special template is automatically making a hierarchical view used on the TreeViews.

1 <HierarchicalDataTemplate x:Key="TaskTemplate" 2 ItemsSource="{Binding Childrens}" DataType="{x:Type data:Task}" > 3 <Grid Width="200"> 4 <Grid.ColumnDefinitions> 5 <ColumnDefinition Width="5*"></ColumnDefinition> 6 <ColumnDefinition Width="1*"></ColumnDefinition> 7 <ColumnDefinition Width="1*"></ColumnDefinition> 8 <ColumnDefinition Width="3*"></ColumnDefinition> 9 </Grid.ColumnDefinitions> 10 <TextBlock Grid.Column="0" Text="{Binding Path=Title}"/> 11 <TextBlock Grid.Column="1" Text="{Binding Path=TimeSpent}"/> 12 <TextBlock Grid.Column="2" Text="{Binding Path=TimeEstimate}"/> 13 <Button Grid.Column="3">Start</Button> 14 </Grid> 15 </HierarchicalDataTemplate>

image

Task class contains a list of Childrens which is used in the HierarchicalDataTemplate.

1 public class Task 2 { 3 ..... 4 public List<Task> Childrens { get; set; } 5 ..... 6 }

HierarchicalDataTemplate has a property ItemsSource which is binded to Children’s property. The Template will create the root element and also elements from the Children’s List. I don’t have to worry about how it’s working. Magic happens behind the scene.

Binding TabControl Content

Every TabControl contains a TreeView, which is filled with Task Items. I wanted another Template, which would automatically inject the TreeView into TabControl.

1 <DataTemplate x:Key="TabItemTemplate"> 2 <Grid> 3 <TreeView Background="Transparent" ItemsSource="{Binding Content}" ItemTemplate="{StaticResource TaskTemplate}" > 4 </TreeView> 5 </Grid> 6 </DataTemplate>

TabItem Template creates a Transparent TreeView. It’s bound to the Content property. This is a property of Project class which is used to create a new TabItems with children’s injected to the TreeView.

1 public class Project 2 { 3 public string Title { get; set; } 4 public List<Task> Content { get; set; } 5 } 6  

Project class is a root for every Task set. It’s Title bound to the Header property of a TabItem.

1 <Grid Name="MainTree" Grid.Row="1" Grid.RowSpan="1"> 2 <TabControl Name="MainTabControl" ContentTemplate="{StaticResource TabItemTemplate}"> 3 </TabControl> 4  </Grid>

In order to bind the Title from the Project class to the TabItem the header, I had to change a tab item style a bit. The Content Presenter was replaced by the TextBlock which Text Property is bound to The Title.

1 <Style TargetType="TabItem"> 2 ..... 3 <Grid> 4 <StackPanel Orientation="Horizontal"> 5 <Border Name="Border" Padding="2" BorderBrush="Black" BorderThickness="1,1,1,1" 6 CornerRadius="10,10,0,0" Background="DarkOrange"> 7 <TextBlock Text="{Binding Path=Title}"></TextBlock> 8 </Border> 9 </StackPanel> 10 </Grid> 11 ..... 12  </Style>

When all is done I just need to  create sample data.

1 List<Task> tasks = new List<Task>() 2 { 3 new Task("test",10,"I",DateTime.Now,8,"komentarz"){TimeSpent = "0"}, 4 new Task("test",10,"I",DateTime.Now,8,"komentarz"){TimeSpent = "0"}, 5 new Task("test",10,"I",DateTime.Now,8,"komentarz"){TimeSpent = "0"}, 6 new Task("test",10,"I",DateTime.Now,8,"komentarz"){TimeSpent = "0"} 7 }; 8 9 10 InitializeComponent(); 11 tasks[0].Childrens = new List<Task>() 12 { 13 new Task("test",10,"I",DateTime.Now,8,"komentarz"){TimeSpent = "0"} 14 }; 15 16 List<Project> projects = new List<Project>() { new Project() { Content = tasks, Title = "Projekt1" }, new Project() { Title = "Projekt2" } }; 17 MainTabControl.ItemsSource = projects; 18  

And the result is :

image

Next post Timers + activity tracker logic.


Activity Tracker – WPF Styling TabControl

I have started another mini tool which will be a part of the TimeIsMoney project. Activity Tracker. Look at the simple example. Right now I am using this tool in my job. It’s great but for my project i need something more advanced.

image

Activity Tracker from the ScreeperZone

This tracker is a windows gadget. There was an idea to create some sort of  the link between TODO List and this application,  but I have encountered several major problems. It’s a windows gadget so it’s created from the simple html with JavaScript, and its data is stored in Json format. Accessing and modifying  this data would be a simple task but the application refreshes its data only on the start. There is no way to invoke the data refresh without restarting the Activity Tracker. So there is only ability to “bind the data between application in OneWay”. I need this communications to be “TwoWay” Because of this problem and some other constraints,  I have decided to create my own application from the scratch.

Ideas

  • Time spent calculation.
  • Application will read the xml list. User will have the ability to select lists and items to track.
  • activity log – needed for the reports module.

UI Concept

image

This is a simple concept created in … MS Paint. As you can see its just a TabControl with a customized TreeView. Items in the treeview will display the title time spent + time estimated by the user. There is a button which is used to activate the time counter. You will be able to check the comments attached to a task by right clicking on the item.

Implementation

I created styles first. Yeah i know that you should implement the Model and Controller first and then move to the View. The styling in WPF is so great that i couldn’t resist.

TabItem Custom Styles

image

1 <Style TargetType="TabItem"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="TabItem"> 5 <Grid> 6 <StackPanel Orientation="Horizontal"> 7 <Border Name="Border" Padding="2" BorderBrush="Black" BorderThickness="1,1,1,1" 8 CornerRadius="10,10,0,0" Background="DarkOrange"> 9 <ContentPresenter Name="PART_header" ContentSource="Header"/> 10 </Border> 11 </StackPanel> 12 </Grid> 13 </ControlTemplate> 14 </Setter.Value> 15 </Setter> 16  </Style>

Most Interesting part in, here is a ContentPresenter this tag represents the place where the actual data of an item will be displayed. By specifying the ContentSource, we can inject the data to it. By using the ContentPresenter, I can create a TabItem and specify its attribute Header.

1 <TabItem Header=”Projekt1”/>

The value in Header will be automatically inserted in the place of the ContentPresenter.

TabItem Triggers – Changing color of TabItem

WPF is great because it lets you omit a lot of code. To do the simple Background color change in a Windows Forms you would have to write a lot of code. More code means more bugs, longer development time, and the cost of a product.

In this scenario, we want the background color of the Tabitem to change when it’s selected. In WPF, we don’t need to write a single line of code. Xaml and its magic is enough for this task. To implement a simple behavior, we can use the Triggers.

image

1 <ControlTemplate.Triggers> 2 <Trigger Property="IsSelected" Value="True"> 3 <Setter TargetName="Border" Property="Background" Value="Gold"/> 4 </Trigger> 5 <Trigger Property="IsSelected" Value="False"> 6 <Setter TargetName="Border" Property="Background" Value="DarkOrange"/> 7 </Trigger> 8  </ControlTemplate.Triggers>

As you can see Trigger “observes” a property and its value. In this example, it’s the IsSelected property. I need two triggers one for each option. Trigger contains a setter logic which is used to apply the changes. The Setter is attached to a property of a target and changes its value.

TabItem Triggers – Changing color of TabItem

image

1 <Style TargetType="{x:Type TabControl}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type TabControl}"> 5 <Grid> 6 <Grid.RowDefinitions> 7 <RowDefinition Height="Auto"/> 8 <RowDefinition Height="*"/> 9 </Grid.RowDefinitions> 10 <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,0,0,0" IsItemsHost="True" Background="Transparent" /> 11 <Border Margin="0,0,0,0" Padding="0" Background="Gold" Grid.Row="1" BorderBrush="Black" BorderThickness="1,1,1,1" > 12 <ContentPresenter ContentSource="SelectedContent" /> 13 </Border> 14 </Grid> 15 </ControlTemplate> 16 </Setter.Value> 17 </Setter> 18 </Style>

Last Thing to style is a TabControl. I need a customized background for every item in the Control. ContentPresenter is attached to a SelectedContent. This is the place where a Content of a Selected TabItem is displayed.

That’s all for now. Next Chapter simple Data Binding.