RSS Feed

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.

Advertisements

2 Comments on “Activity Tracker – WPF Styling TabControl”

  1. trn says:

    It looks like it’ll be powerfull tool 😉 One thing is making me to think – I don’t know if I understand it well but – Does user have to click “Start” / “Stop” after every task? or he just once sets day schedule and tracker gives him signs that time for several task is up ?

    • LaM says:

      Yes user have to click Start and Stop. Scheduler is already in the TODO list software ;]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s