Take advantage of the new Windows 7 Taskbar #1 [Showcase : Bloginto7, a simple feed reader for Bloginy]

If you used windows 7, heard or saw some videos about it, then the most noticed change you  might have noticed is the new taskbar and the cool functionalities it offers. Today I’ll show a little application that looks close to the Gmail Notifier Plus. The application can be customized to show any feeds that have the same structure as the (title, description, author, date) pattern, a great example would be the Twitter or Facebook updates. Here I’m going to show Bloginto7 that reads Bloginy feeds.
This part demonstrates the new TaskbarItemInfo, the new progressbar and the new text properties introduced in the .NET 4.0, the next part will be about the code to retrieve feeds asynchronously, change the UI and the Progress state and value from code. The other parts will be about Jumplists.

Part 1 : XAML:

1.1 TaskbarItemInfo :

The new TaskbarItemInfo can be created directly easily using XAML, mainly inside the <Window.TaskbarItemInfo> you can configure the parameters of the Taskbar button of you application along with the ThumbButtons as well. Here is the complete XAML that is used to produce the UI shown in the picture :

1. <Window.TaskbarItemInfo>
2.             <TaskbarItemInfo x:Name="BlogIntoTakbar"
3.                          Description="BlogInto"
4.                          ProgressState="None"
5.                          ProgressValue="0">               
6.             <TaskbarItemInfo.ThumbButtonInfos>
7.                 <ThumbButtonInfo x:Name="previous"
8.                                 Click="previous_Click"
9.                                 Description="Previous"
10.                                 ImageSource="..\Resources\previous.ico"/>
11.                 <ThumbButtonInfo x:Name="browseFeed"
12.                                  Description="Open the feed in the browser"
13.                                  Click="browseFeed_Click"
14.                                 ImageSource="..\Resources\browse.png"/>
15.                 <ThumbButtonInfo x:Name="next"
16.                     Click="next_Click"
17.                     Description="Next"
18.                     ImageSource="..\Resources\next.ico"/>
19.             </TaskbarItemInfo.ThumbButtonInfos>
20.         </TaskbarItemInfo>
21.     </Window.TaskbarItemInfo>

The code is self explained, the TaskbarItemInfo has some properties from which you can see the ProgressState and ProgressValue and the Description which is the tooltip shown once you hover on the Button in the Taskbar. The TaskbarItemInfo has a collection called ThumbButtonInfos in which you add buttons and you can specify the icon, the event when clicked and the description etc…

1.2 The main UI:

When you first look at the Gmail Notifier Plus app, you might think you need some specific tools and libraries to design such UI, but it’s just a small miniature of hidden window on your desktop, let’s see how we can achieve this.
We are going to wrap the whole UI inside a Grid with 3 rows, the top most is used for the Feed title, author and in my case votes, the middle row with be the content of the feed, and the last row will be for the date and the range of the feeds (3rd from 15 for example).
This is how it looks like, a little ugly on the real form, but on the Taskbar, it is exactly what we want

The code of the Grid is the following, I’ll go through the new stuff one by one to show how things works (If you tried such design in WinForms or even other technologies, you will thank God WPF is here :) )

1. <Grid Margin="10,0,5,5" ShowGridLines="True">
2.         <Grid.RowDefinitions>
3.             <RowDefinition Height="32*"/>
4.             <RowDefinition Height="2"/>
5.             <RowDefinition Height="58*"/>
6.             <RowDefinition Height="15*"/>
7.         </Grid.RowDefinitions>
8.         <StackPanel Grid.Row="0" Margin="0,0,0,5" TextOptions.TextFormattingMode="Ideal">
9.             <TextBlock Name="FeedTitle" Foreground="Blue" TextTrimming="CharacterEllipsis" FontStretch="ExtraExpanded" FontSize="36" Text="Title goes here"/>
10.             <Grid>
11.                 <Grid.ColumnDefinitions>
12.                     <ColumnDefinition Width="75*"/>
13.                     <ColumnDefinition Width="15*"/>
14.                     <ColumnDefinition Width="10*"/>
15.                 </Grid.ColumnDefinitions>
16.                 <Viewbox Stretch="Uniform" HorizontalAlignment="Left" Height="45" Grid.Column="0">
17.                     <TextBlock Name="FeedAuthor" Foreground="#FF9D918F" Text="Feed author "/>
18.                 </Viewbox>
19.                 <TextBlock Grid.Column="1" Foreground="#FFFF2600" FontSize="28" Margin="0,18,5,0">Votes:</TextBlock>
20.                 <Viewbox Stretch="Uniform" HorizontalAlignment="Left" Grid.Column="2" Height="55">
21.                     <TextBlock Name="FeedVotes" Foreground="#FFFF2600" Text="10"/>
22.                 </Viewbox>
23.                 </Grid>
24.         </StackPanel>
25.         <TextBlock Grid.Row="1" Background="Black" HorizontalAlignment="Stretch" TextWrapping="WrapWithOverflow"/>
26.         <Viewbox Grid.Row="2">
27.             <TextBlock Name="NetworkError" Foreground="Red" TextWrapping="Wrap" FontStyle="Italic" Visibility="Hidden">Please check your network connection</TextBlock>
28.         </Viewbox>
29.         <TextBlock Name="FeedDescription" Grid.Row="2" TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis" FontSize="38"
30.                    TextOptions.TextFormattingMode="Display" Margin="0,10,0,10" Text="Feed description goes here"/>
31.         
32.         <TextBlock Name="FeedDate" FontSize="32" Grid.Row="3" Margin="0,5,0,0" Foreground="#FF414141" TextOptions.TextFormattingMode="Ideal" Text="date : 12/12/12"/>
33.         
34.         <Viewbox Stretch="Uniform" Grid.Row="3" HorizontalAlignment="Right" TextOptions.TextFormattingMode="Ideal">
35.             <TextBlock Name="FeedRank" Foreground="#FF414141" Text="3/15"/>
36.         </Viewbox>
37.  
38.     </Grid>

As usual you can see the Grid.RowDefinitions collection, the first row of the grid is a StackPanel in which there is a TextBlock for the Feed title and another Grid for the rest. The first new property that we find here and which is introduced in the .NET 4.0 is TextOptions.TextFormattingMode, here are the different results when changing this property (the picture). It is so useful when working with external monitors or during a projection, you can read more about it here.
The next important property is TextTrimming="CharacterEllipsis" which according to the size and the length of the text it computes automatically the length of the text to show and trims it adding “…” to the end, imagine yourself doing this in the code, believe me, it is a nightmare.
After, you can notice the use of the <Viewbox/> element, which makes its content stretch on the free space left, here is how it works, notice that I didn’t change the size of the text :
The property TextWrapping determine how the text will be wrapped once reached the borders of it’s container, here we use it so that the description of the feed goes on multiple lines and then get trimmed once goes outside the borders.
This is it, the next part I’ll show the code to retrieve feeds asynchronously, change the UI and the Progress state and value from code.
You can find the XAML code here : http://pastie.org/718416, copy/paste it in the XAML of your windows, and you will get the UI working, no need for a line on code :)