Sunday, February 21, 2010

WPF 4.0 New Features: Windows 7 Taskbar Integration

In WPF 4 there are some features which help us to easily integrate our software with Windows 7 Taskbar. Some of these features are showing thumb buttons in the thumbnail preview, showing progress in the taskbar item, accessing jump and task lists in items’ context menu. All of these features are nicely wrapped in classes and added as dependency properties to Window and Application classes.

overview Windows 7 Taskbar components overview

Let’s start with describing what’s what in Windows 7 Taskbar.

whats_what

whats_what2

WPF Classes for integration

Now, let’s take a look at the classes that WPF 4 provides for interaction with these components. All classes are defined in System.Windows.Shell namespace.

  • TaskbarItemInfo – provides settings of how the taskbar thumbnail is displayed
  • ThumbButtonInfo – represents a Thumb Button
  • JumpTask – represents a shortcut to an application that can be started from the context menu
  • JumpPath – represents a link to a file in the context menu

The Countdown Timer example

Now, for better understanding of the concept of using taskbar components, I have designed a simple application which just counts down one minute. I’ll explain it by breaking it down to its basic functionalities. Let’s take a look.

The Thumb Buttons

Thumb buttons are buttons which are displayed in the thumbnail preview (see overview picture above). They can be used as quick access to main functions of the application. They are defined using the ThumbButtonInfo class.

<Window.TaskbarItemInfo>
<
TaskbarItemInfo x:Name="taskBarItemInfo"
ThumbnailClipMargin="40,40,40,100"
Description="Countdown Timer">
<
TaskbarItemInfo.ThumbButtonInfos>
<
ThumbButtonInfoCollection>
<
ThumbButtonInfo
DismissWhenClicked="False"
Command="{x:Static local:MainWindow.CmdStart}"
CommandTarget="{Binding ElementName=mainWindow}"
Description="Start"
ImageSource="Resources/play.png"/>
<
ThumbButtonInfo
DismissWhenClicked="False"
Command="{x:Static local:MainWindow.CmdPause}"
CommandTarget="{Binding ElementName=mainWindow}"
Description="Pause"
ImageSource="Resources/pause.png"/>
<
ThumbButtonInfo
DismissWhenClicked="False"
Command="{x:Static local:MainWindow.CmdStop}"
CommandTarget="{Binding ElementName=mainWindow}"
Description="Stop"
ImageSource="Resources/stop.png"/>
<
ThumbButtonInfo
DismissWhenClicked="False"
Command="{x:Static local:MainWindow.CmdReset}"
CommandTarget="{Binding ElementName=mainWindow}"
Description="Reset"
ImageSource="Resources/reset.png"/>
</
ThumbButtonInfoCollection>
</
TaskbarItemInfo.ThumbButtonInfos>
</
TaskbarItemInfo>
</
Window.TaskbarItemInfo>


Now, we can see that TaskbarItemInfo has sereval important properties:




  • ThumbnailClipMargin – this is the area that will be shown on the application thumbnail


  • Description – this is a description that will be shown in a tooltip above the thumbnail



Then we define the thumb buttons. For each button we can provide a description, a source of the image to be displayed, and a command to be executed (there are other properties, try to investigate them if you’re interested).



The Progress Indicator



Windows 7 can show a progress indication in the taskbar which is quite useful for some applications (for example Internet Explorer showing download progress, or in our countdown timer – the timer progress). TaskbarItemInfo has two properties for showing a progress indication in the taskbar.




  • ProgressValue – a percentage value, ranged from 0 to 1 controlling the current progress


  • ProgressState – an enumerable which controls the current state of the progress indicator.



ProgressState can take the following values:




  • None – the progress indicator is not active


  • Indeterminate – the progress is indeterminate


  • Normal – a normal state, showing the current progress


  • Error – the progress indicator shows the current progress, but highlights the bar indicating that there’s an error


  • Paused - the progress indicator shows the current progress, but highlights the bar indicating that the progress is paused.



























None Indeterm.. Normal Error Paused
progress_none progress_indeterminate progress_normal progress_error progress_paused


Here’s how we can set the progress indicator in code:



taskBarItemInfo.ProgressState = TaskbarItemProgressState.Normal;
taskBarItemInfo.ProgressValue = 1.0 - currentTime.TotalMinutes;


The Jump List



We can allow our application to include it’s own shortcuts and file links in the context menu of the taskbar item. This is done by setting a property in the Application object, called JumpList:



<Application x:Class="Win7Shell.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">

<
JumpList.JumpList>
<
JumpList >
<
JumpTask Title="Notepad"
Description="Open Notepad."
ApplicationPath="C:\Windows\notepad.exe"
IconResourcePath="C:\Windows\notepad.exe"/> </JumpList>
</
JumpList.JumpList>
</Application>



So now Windows will display a shortcut to notepad in the context menu of the taskbar item of our application.



whats_what2



Be safe



Just a reminder when you use the taskbar integration of Windows 7 and WPF: The taskbar shortcuts, thumb buttons, progresses, are just to help the user see and do things more quickly. You should not use these components as your application’s main way of interaction with the user. Why? Because first of all, these components are not available in earlier versions of Windows. Also, even if the user runs Windows 7, there are some other concerns: for example the thumbnail preview is not available when Windows Aero is disabled. Of course, don’t worry, your application will still be able to run, just it’s taskbar functions will not be available.



Download Sample



You can download my Countdown Timer application to better understand the use of there components.

Saturday, February 20, 2010

WPF 4.0 New Features: Text

In the next series of posts I will write a little bit about the new features in the new WPF, part of Microsoft .NET Framework 4.0. So let’s begin with the improvements in text.

Text Rendering Stack

Microsoft has significantly improved the way texts are rendered on the screen. They introduced several new options to allow us define the parameters of text rendering. These options are encapsulated in the properties TextOptions. TextFormattingMode and TextOptions. TextRenderingMode of the TextBlock and TextBox controls.

TextFormattingMode can accept the following values:

  • Ideal (the default formatting mode)
  • Display

As for TextRenderingMode, there are four available options:

  • Auto (the default mode)
  • ClearType
  • Grayscale
  • Aliased

The differences in rendering and format modes are difficult to see. The resulting rendered text depends on other properties and use cases – for example: font size, transformations, etc. We can see a simple example using the Display Formatting with normal text and scaled text here:

smalltext zoomed_text

You can see that although display formatting may look better in some cases, it looks ridiculously ugly in other cases, as in when it’s scaled.

Now let’s see a comparison between all of the options in different use cases.

  • Small Text
compare_smalltext
  • Large Text
compare_largetext
  • Rotated Text
compare_rotated
  • Scaled Text
compare_scaled

Here’s an example of how these properties are used. It’s quite simple:

<TextBlock FontSize="8" Text="Display formatting" TextWrapping="Wrap" Margin="5"                       TextOptions.TextFormattingMode="Display"        TextOptions.TextRenderingMode="Auto"                       />




TextBox’s Caret and Selection Brush



Great new thingy in WPF 4 is the introduction of two additional Brush properties of the TextBox control.




  • CaretBrush – specifies the brush of the blinking caret in a TextBox


  • SelectionBrush – specifies the brush of the selection background in a TextBox



Let’s see how these properties are used:



<TextBox Text="CaretBrush" Margin="5">
<
TextBox.CaretBrush>
<
LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
<
GradientStop Color="LightBlue" Offset="0"/>
<
GradientStop Color="Blue" Offset="0.4"/>
<
GradientStop Color="Pink" Offset="0.7" />
<
GradientStop Color="DarkRed" Offset="1" />
</
LinearGradientBrush>
</
TextBox.CaretBrush>
</
TextBox>


 



<TextBox Text="SelectionBrush" Margin="5" >
<
TextBox.SelectionBrush>
<
LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
<
GradientStop Color="LightSteelBlue" Offset="0"/>
<
GradientStop Color="SteelBlue" Offset="0.5" />
<
GradientStop Color="DarkRed" Offset="1" />
</
LinearGradientBrush>
</
TextBox.SelectionBrush>
</
TextBox>







And the two text-boxes look like this now:



textbox_brushes





Bindable Runs



In WPF 3.5 the Runs (objects within a TextBlock or a Document) had their Text properties as standart CLR properties. Now in WPF 4 they are created as dependency properties, and therefore support the power of data binding.



        <TextBlock>
<
Run Text="{Binding FirstName}" />
<
Run Text="{Binding LastName}" />
</
TextBlock>


Custom Spellchecking Dictionaries



Microsoft has added the support for using custom spellcheckers, which can be loaded from a file or from app resources. A property has been added to the SpellChecker class – CustomDictionaries, which is essentially a list of URIs to the dictionary files (which, by the way are simple text files with one word on each line).



Let’s try one. We create a new text file, and call it for example MyCustomDictionary.lex. Note the extension is .lex.



spell_dictionary



Now, we will add a simple TextBox and tell it to include that dictionary in the spellchecker.



<TextBox Grid.Column="2"
Margin="5"
SpellCheck.IsEnabled="True">
<
SpellCheck.CustomDictionaries>
<
sys1:Uri>MyCustomDictionary.lex</sys1:Uri>
</
SpellCheck.CustomDictionaries>
</
TextBox>



So now the spellchecker will recognize the words in this dictionary, and include them in the suggestions.



spellcheck



 



 



That’s all for texts in WPF 4 for now. As always, you can download the sample application to better understand how things work.



Download Sample



You can download the sample project by following this link. Note: This is a VS2010 Project. Executables are also included.