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.

Advertisements

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 Auto Updated Data Binding with INotifyPropertyChanged

After styling and Data binding time has come for the logic implementation. I need a simple counter with a timer. At first I tried to use the Timer class which has an Elapsed event but there were some problems with DataBinding, so I have decided to create my own thread with a one second sleep time. Its main purpose is to increment the counter.

In order to create a better logic, I have decided to create a new class TaskWPF. It wraps the Task class which is used as a simple data container. TaskWPF includes logic used by the Wpf DataBinding mechanism. Task class is used also in other projects, so I have decided to split it.  TaskWPF implements the INotifyPropertyChanged interface. It is needed to implement automatic data binding updates.

Auto Updated Data Binding:

Each second value on TimeSpent is incremented. I want to track this time in real-time. In order to do that we have to redraw the TextBlock. By using the DataBinding, we can do this process automatically every time the bound data is changed. This option is not default. We have to set up few options.

1) First our class which contains bound properties needs to implement the INotifyPropertyChanged interface. We have to implement the method OnPropertyChanged and call it every time we are changing the property which we want to auto update. This call will notify the bound WPF control, in my example TextBlock, that the value has changed and this will force the TextBlock to redraw itself with a new value.

1 public class TaskWPF : INotifyPropertyChanged 2 { 3 .... 4 public void Increment() 5 { 6 AddSecond(1); 7 OnPropertyChanged("TimeSpentString"); 8 } 9 .... 10 #region INotifyPropertyChanged Members 11 12 public event PropertyChangedEventHandler PropertyChanged; 13 14 protected void OnPropertyChanged(string name) 15 { 16 PropertyChangedEventHandler handler = PropertyChanged; 17 if (handler != null) 18 { 19 handler(this, new PropertyChangedEventArgs(name)); 20 } 21 } 22 23 #endregion 24 .... 25 }
 As you can see every time I am calling the increment method I am m also calling the OnPropertyChanged function.  This one notifies the TextBlock that the property has changed.

2) We have to tell the TextBlock to watch out for property updates. There is a special property UpdateSourceTrigger in the Binding segment that specifies how the Binding will behave. . On default, it is set on LostFocus option which updates bound value every time the control losses focus.  In order to auto update on property changed, we have to set it on “PropertyChanged“ option.

1 <HierarchicalDataTemplate x:Key="TaskTemplate" ItemsSource="{Binding Childrens}" DataType="{x:Type data:TaskWPF}" > 2 ... 3 <TextBlock Name="TimeSpent" Text="{Binding Path=TimeSpentString Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/> 4 .... 5  </HierarchicalDataTemplate>

Same technique is used for time estimated limit notification. Right now I have made a simple border which is changing the color when the time spent is greater than estimated time.

image image

Background color of the Border is bound to the property in TaskWPF class.

1 public void IsOverEstimatedTime() 2 { 3 if (_task.TimeSpent > _task.TimeEstimate) 4 { 5 TaskColor = "Red"; 6 OnPropertyChanged("TaskColor"); 7 } 8 }


Every time I am incrementing the counter. I am also checking if the time spent is greater than time estimated. When this is its true color name is changed,  and the OnPropertyChanged method is called. It notifies the Border by the Binding to redraw itself because the value has changed. One important thing to note. Color is specified by a string name because Background property in the Xaml doesn't accept a Color" class.

Next Chapter. Communication with Xml files and TODO List.

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.


TimeIsMoney 0.2.4 – moving to WPF

Time is money task adding and sorting tool is almost done. I  have decided to move the project to WPF,   it is a more flexible and powerful framework.

image 

 

The idea behind this mini tool is simple. I m collecting tasks throughout day and at the let’s say 8 pm I m reviewing them and sorting to lists.

I have various lists:

  • Next learning
  • Next action
  • Ideas
  • Quotes
  • Jokes
  • Next week
  • Next month
  • To do later

I m sorting collected items between them. By simply clicking the alt+ctrl+b I am invoking a dialog box which allows me to define a simple task. After the task is on the list it is waiting until a specified time of the day. I have a habit to review tasks at eight pm. I can click on each task and choose an appropriate list.

image

 

You can define the lists in the settings.

Application works with the format of  ToDoList  by Abstract Spoon.  If you want to view your tasks list you have to use this great application. Right now I don’t have my own browser. ToDoList is so great that I don’t need one.

This application is just the beginning of a bigger collection of programs, which will help me, and I hope also you with a better time management system.

Next module will be in WPF it will have a various analyzing and reporting features.