Windows Presentation Foundation

Windows 7 & WPF 4: using task bar icons like progress bars

alessandro.delsole@nospamvisual-basic.it — Fri, 29 Jan 2010 16:42:00 GMT

Did you ever try to download a file from the Internet with Windows 7? If yes, maybe you noticed that the Internet Explorer icon in the task bar shows the download progress, like a classic ProgressBar. With WPF 4 and VB (o C#) 2010 it's possible programming this interesting functionality in order to make our applications able of showing the progress state of a given task. The code example shown in this blog post simply wastes some time in an asynchronous way so that it can send progress state to a ProgressBar control and to the icon in the task bar (the reason about this is that the focus is understanding how the progress bar works, not providing complex code). For the sake of completeness, I took some tips from this blog post by Pete Brown, that I revisited in a VB fashion.

On the XAML side, first we need the usual reference to the task bar, then we can add a ProgressBar inside the Window:

<Window.TaskbarItemInfo>

</Window.TaskbarItemInfo>

<Grid>

</Grid>

Next, let's write some VB code which makes use of a BackgroundWorker control to make async operations, whose progress will be reported on both the task bar and on the ProgressBar. The following code demonstrates how wasting your time and how you can send the progress to the task bar at the same time:

Class MainWindow

Private Sub MainWindow_Loaded(ByVal sender As Object,

ByVal e As RoutedEventArgs) Handles Me.Loaded

Dim worker As New System.ComponentModel.BackgroundWorker

AddHandler worker.DoWork, AddressOf WasteSomeTime

AddHandler worker.ProgressChanged, AddressOf worker_ProgressChanged

AddHandler worker.RunWorkerCompleted, AddressOf worker_RunWorkerCompleted

worker.WorkerReportsProgress = True

'Set the progress state as "normal"

TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Normal

'Start the work

worker.RunWorkerAsync()

End Sub

'Waste some time, simulating some work

Private Sub WasteSomeTime(ByVal sender As Object,

ByVal e As System.ComponentModel.DoWorkEventArgs)

For i As Integer = 0 To 99 Step 10

System.Threading.Thread.Sleep(1000)

'Raises the ProgressChanged event passing the value

CType(sender, System.ComponentModel.BackgroundWorker).ReportProgress(i)

Next i

End Sub

'Finally set values for controls

Private Sub worker_RunWorkerCompleted(ByVal sender As Object,

ByVal e As System.ComponentModel.RunWorkerCompletedEventArgs)

ProgressBar1.Value = 100

TaskbarItemInfo.ProgressValue = 1.0

End Sub

'Increment the control's progress value

Private Sub worker_ProgressChanged(ByVal sender As Object,

ByVal e As System.ComponentModel.ProgressChangedEventArgs)

ProgressBar1.Value = e.ProgressPercentage

TaskbarItemInfo.ProgressValue = CDbl(e.ProgressPercentage) / 100

End Sub

End Class

The following are the most two interesting lines of code from all the one shown above. The first line:

'Set the progress state as "normal"

TaskbarItemInfo.ProgressState = Shell.TaskbarItemProgressState.Normal

Here the code tells the icon on the task bar that the progress bar will have a normal aspect, which is green. Other choices are available from the Shell.TaskBarItemProgressState enumeration, which allow to customize the progress bar aspect. For instance, Error will make the progress state's color as red, Paused as yellow, while Indeterminate will represent the progress state as a loop; this is typical when you want to represent an idle state or a freezed task.

This is instead the second interesting line:

TaskbarItemInfo.ProgressValue = 1.0

Here we just assign to the ProgressValue property the value that represents the progress state. This is a moment of what we get on the task bar:

By the way, such feature consumes some more system resources so you should use it carefully. The source code accompanying this blog post is available from the MSDN Code Gallery here.

Finally, I'd like to mention that there are lots of other ways (and resources) for programming Windows 7 with managed code, not necessarily related to WPF 4. If you are interested in this kind of development, have a look at the Windows API Code Pack which provides managed access to lots of features of the new operating system and that can be also used with Visual Studio 2008.

Alessandro

Windows 7 & WPF 4: overlaying task bar icons

alessandro.delsole@nospamvisual-basic.it — Thu, 28 Jan 2010 11:39:00 GMT

In this blog post I will discuss another interesting feature from Windows 7, that you can program via WPF 4 and VB/C# 2010, which is overlaying icons.

You might have noticed how the Windows 7's task bar is not just a place where application icons are grouped, but it it also the ideal place for notifying the user about the application state or about the state of a task executed by the application. Basically you can overlay a custom icon with transparency over the application icon in order to notify the user about a particular situation, without the need of replacing the original application icon. Last but not least, you can simply replace the overlaid icon with another one to show another kind of notification. Now the code :-)

After creating a WPF 4 project with Visual Studio 2010 Beta 2, the first requirement is getting a reference to the Task Bar as follows:

<Window.TaskbarItemInfo>

</Window.TaskbarItemInfo>

In the Window resources let's add images to be used for overlaying. You should prefer PNG images because they support transparency that is automatically recognized and applied by Windows 7 (as I will show later). Each image is represented by a DrawingImage object, as demonstrated in the following code:

<Window.Resources>

<!-- Define a DrawingImage resource

and assign an identifier-->

<DrawingImage.Drawing>

<!--... with an ImageDrawing object

representing an image(icon-->

<ImageDrawing Rect="0,0,16,16"

ImageSource="/adsWpf4OverlayIcons;component/Images/EditTask.png" />

</DrawingImage.Drawing>

</DrawingImage>

</Window.Resources>

It's important to remember that you must assign the Rect property from the ImageDrawing object with the dimensions of the rectangle area that the overlaid icon will occupy. Just for demo purposes, let's implement a ComboBox where we can select the icon visualization mode:

<Grid>

</ComboBox>

</Grid>

At this point we can switch to the managed code. Basically the need is assigning the TaskBarItemInfo.Overlay property with an object of type ImageSource, which represents the icon to be used as the overlay, or with Nothing if we just want to restore the original state. When the application run, such property is obviously null. This is the sample code:

Private Sub Combo1_SelectionChanged(ByVal sender As System.Object,

ByVal e As System.Windows.Controls.

SelectionChangedEventArgs) Handles Combo1.SelectionChanged

'Checks for the selected item in the Combo

Select Case CType(Combo1.SelectedItem, ComboBoxItem).Content.ToString

Case Is = "Normal"

'Restore the original state

TaskbarItemInfo.Overlay = Nothing

Case Is = "With overlay"

'Overlay the icon

TaskbarItemInfo.Overlay = CType(Resources("OverlayImage"), ImageSource)

End Select

End Sub

The interesting thing is that at run-time you can set a different overlay icon depending on what you need to notify or communicate to the user, without the need of replacing the application icon. The conversion to ImageSource via CType is required because such the Resources is of type Object. Finally, let's see the result. This is the icon at normal state, which is what you typically see:

Next, the overlay icon where we can appreciate the fact that Windows 7 automatically applied transparency:

With this approach we can notify the user about the application state by simply overlaying the icon, taking advantage of the new WPF 4 programming features and integration with Windows 7.

You can download the code for this blog post from MSDN Code Gallery here.

Alessandro

Windows 7 & WPF 4: interacting in code with the Jump List

alessandro.delsole@nospamvisual-basic.it — Sun, 24 Jan 2010 14:10:00 GMT

Windows 7 introduces a new feature known as Jump List. Basically when you right-click an icon on the task bar you get access to a context menu showing a list of common tasks or simply a list of recent files, divided into groups and categories. With WPF 4 and Visual Basic (or C#) 2010 you can interact with the Jump List by writing some lines of code so that you can associate items lists from your application making such lists available to the user.

WPF 4 exposes the System.Windows.Shell namespace offering some classes that allow accessing the Jump List, particularly the JumpList class representing the above described popup menu. Now imagine you want to add a recent files list to the application icon through the Jump List. After creating a WPF project, let's begin telling the application that it needs a reference to the Windows 7's task bar. This is accomplished, on the XAML side, as follows:

<Window.TaskbarItemInfo>

</Window.TaskbarItemInfo>

Next we can write the following managed code (take a look at the comments):

Imports System.Windows.Shell

Class MainWindow

Private Sub MainWindow_Loaded(ByVal sender As Object,

ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

'a reference to the Jump List for the running application

Dim myJumpList As New JumpList

'represents a shortcut to an application

'which can be the current application or another one

Dim myJumpTask As New JumpTask

So the JumpList class represents the context menu while JumpTask is an object representing a shortcut to an application, which can be customized for example with a parameter to be passed to the specified executable. Once you create an instance of the JumpList, you simply assign such instance to the current application via the JumpList.SetJumpList shared method, as follows:

'Assigning the JumpList instance to the running application

JumpList.SetJumpList(Application.Current, myJumpList)

Next you need to set properties for the JumpTask object and then assign such object to the JumpList, as demonstrated here:

'Setting the shortcut's properties

With myJumpTask

.CustomCategory = "Recent files"

.Title = "My Sample Document"

.Description = "A sample document containing custom information"

.ApplicationPath = "Notepad.exe"

.Arguments = "My Sample Document.txt"

End With

'Adds the element to the JumpList

myJumpList.JumpItems.Add(myJumpTask)

'Applies edits

myJumpList.Apply()

End Sub

When you run the application for the first time, the system will store what you created in code so that the element will be available inside the Jump List each time the application runs. In fact, if the system finds that the element already exists, the code will not create it again. Cool! For a better understanding of this concept, let's make some modifications to the code.

The JumpList class also exposes two events, JumpItemsRejected which is raised if Windows 7 does not accept the insertion of new elements into the Jump List and JumpItemsRemovedByUser which is raised when the user removes an item from the Jump List. After the instance declaration of the JumpList let's add the following line:

AddHandler myJumpList.JumpItemsRemovedByUser,

AddressOf myJumpList_JumpItemsRemovedByUser

Next, let's write code for the event handler:

Private Sub myJumpList_JumpItemsRemovedByUser(ByVal sender As Object,

ByVal e As JumpItemsRemovedEventArgs)

MessageBox.Show(CStr(e.RemovedItems.Count))

End Sub

Now let's add another item to the Jump List:

Dim myJumpTask2 As New JumpTask

With myJumpTask2

.CustomCategory = "Recent files"

.Title = "My Sample Document2"

.Description = "A sample document containing custom information"

.ApplicationPath = "Notepad.exe"

.Arguments = "My Sample Document2.txt"

End With

'Aggiunge l'elemento alla JumpList

myJumpList.JumpItems.Add(myJumpTask2)

If we now run the application and right-click the icon on the task bar, this is what we obtain:

As you can see the Jump List contains the items that we created in code, grouped inside a group named Recent Files. If you just click one of them, the Windows Notepad will run pointing to the specified (fictitious) file name. Of course in the code we could specify a different executable, such as the current application. Now we can right-click one of the items and select Remove from this list. You will notice that the JumpItemsRemovedByUser won't be raised at this time. It will be in fact raised next time you run the application and this will ensure that the code will not create a duplicate of the item itself. The best test can be accomplished by running the application outside of Visual Studio 2010.

In conclusion, WPF 4 makes easier again developing for Windows 7. The code for this blog post is available from the MSDN Code Gallery at this address.

Alessandro

Windows 7 & WPF 4: adding buttons onto task bar icons

alessandro.delsole@nospamvisual-basic.it — Sun, 24 Jan 2010 11:17:00 GMT

Windows Presentation Foundation 4, the new version currently available in Beta 2 which will be part of .NET Framework 4/VS 2010, offers native integration with Windows 7 without the need of utilizing external components and libraries (at least for most activities). Among available functionalities, multi-touch and task bar integration are the most important.

In this post I'm going to discuss how you can add buttons to the application's icon in the Windows task bar, very similarly to what you can see by running Windows Media Player, which provides button for controlling the media being played, available when the mouse pointer passes over the application icon:

The goal of this post is building, although with limited capabilities, a media player with WPF 4 and Visual Basic 2010. Next we will add three buttons that will be visible in the task bar. After creating the project, let's start by defining the user interface as follows:

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="540">

<Window.Background>

</LinearGradientBrush>

</Window.Background>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!-- The MediaElement is placed in the first row (notice

how the volume is set via data-binding)-->

<MediaElement Name="Media1" Grid.Row="0" LoadedBehavior="Manual"

Volume="{Binding ElementName=VolumeSlider, Path=Value}"

MediaFailed="Media1_MediaFailed" >

</MediaElement>

So we will have some buttons, both on the window and on the task bar. This means that we will have duplicate buttons although in differente places. A good approach is implementing the WPF commanding technique instead of handling Click events. Basically we use some commands that are assigned to controls and that will be executed only when the specified conditions are true. Before going into that, let's complete the code for the Window:

<Button Name="PlayButton" Width="70" Height="40" Command="MediaCommands.Play"

Margin="5" Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}" />

<Button Name="PauseButton" Width="70" Height="40" Command="MediaCommands.Pause"

Margin="5"

Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"/>

<Button Name="StopButton" Width="70" Height="40"

Margin="5" Command="MediaCommands.Stop"

Content="{Binding RelativeSource={RelativeSource Self}, Path=Command.Text}"/>

<Button Name="BrowseButton" Width="40" Height="40"

Margin="5" Content="..."/>

<Slider Name="VolumeSlider" Width="80" Margin="5"

Minimum="0" Maximum="1" Value="0.5" TickFrequency="0.1"

AutoToolTipPlacement="TopLeft" TickPlacement="BottomRight"/>

</StackPanel>

</Grid>

As you may know, WPF defines some default commands which target different scenarios, so that you do not need to implement custom ones. MediaCommands expose a number of commands that can be used in multimedia situations like this one. So the control's Command property is assigned with the desired command. Since commands also define a localizable text to be shown inside the control, the Content property is bound to the Text property of the command, which returns the localized text. If you run the English version of Windows like me, the localized text will be anyway Play, Stop, Pause. Now let's define the CommandBindings, in order to declare the event handlers that will be executed with regard of commands:

<Window.CommandBindings>

<CommandBinding Command="MediaCommands.Play" x:Name="PlayCommand"

Executed="PlayCommand_Executed"

CanExecute="PlayCommand_CanExecute"/>

<CommandBinding Command="MediaCommands.Stop" x:Name="StopCommand"

Executed="StopCommand_Executed"

CanExecute="StopCommand_CanExecute"/>

<CommandBinding Command="MediaCommands.Pause" x:Name="PauseCommand"

Executed="PauseCommand_Executed"

CanExecute="PauseCommand_CanExecute"/>

</Window.CommandBindings>

Each CommandBinding establishes that the Executed event handler will run the specified action while CanExecute will check if such action is actually executable. This also requires some Visual Basic code that I will show later. Now we can write code for integrating with Windows 7. Look at this:

<Window.TaskbarItemInfo>

<TaskbarItemInfo.ThumbButtonInfos>

<ThumbButtonInfo x:Name="ThumbPlayButton" Command="MediaCommands.Play"

DismissWhenClicked="False" CommandTarget="{Binding ElementName=PlayButton}"

Description="Play" ImageSource="/MediaPlayer;component/Images/PlayHS.png" />

<ThumbButtonInfo x:Name="ThumbStopButton" Command="MediaCommands.Stop"

DismissWhenClicked="False" CommandTarget="{Binding ElementName=StopButton}"

Description="Stop" ImageSource="/MediaPlayer;component/Images/StopHS.png" />

<ThumbButtonInfo x:Name="ThumbPauseInfo" Command="MediaCommands.Pause"

DismissWhenClicked="False" CommandTarget="{Binding ElementName=PauseButton}"

Description="Pause" ImageSource="/MediaPlayer;component/Images/PauseHS.png" />

</ThumbButtonInfoCollection>

</TaskbarItemInfo.ThumbButtonInfos>

</TaskbarItemInfo>

</Window.TaskbarItemInfo>

</Window>

The TaskbarItemInfo object gets a reference to the application icon in the task bar. The Description property will show a tooltip when the mouse pointer passes, while ThumbnailClipMargin allows setting a margin. Among the elements that it can store, there are buttons. They are represented by ThumButtonInfo objects (max number is 7) which are contained inside a collection named ThumButtonInfoCollection. Each task bar button works basically like a normal Button control, since it expose a Click event and a Command, which can be assigned with the appropriate command defined in XAML code and that we previously assigned to normal buttons too. Notice that these particular buttons do not show text, because they can just show images so you have to assign the ImageSource property. Remember that such images must be 16 x 16. DismissWhenClicked is used to specify that a button is not available only once. Also notice how the CommandTarget property binds the current button to the related normal one on the window. Now let's switch to the Visual Basic code and write the following: colleghi l'attuale pulsante al corrispondente fratello maggiore sulla finestra. Ora si passa al codice Visual Basic.

Class MainWindow

Private sourceMedia As String = String.Empty

Private Sub BrowseButton_Click(ByVal sender As System.Object,

ByVal e As System.Windows.RoutedEventArgs) Handles BrowseButton.Click

Dim dialog As New Microsoft.Win32.OpenFileDialog

With dialog

.Title = "Select a media file"

.Filter = "Avi & Wmv|*.avi;*.wmv|All files|*.*"

If .ShowDialog = True Then

Me.sourceMedia = .FileName

Me.Media1.Source = New Uri(sourceMedia, UriKind.RelativeOrAbsolute)

End If

End With

End Sub

'In case opening the media file fails

Private Sub Media1_MediaFailed(ByVal sender As System.Object,

ByVal e As System.Windows.ExceptionRoutedEventArgs)

MessageBox.Show(e.ErrorException.Message)

End Sub

'Executing command actions

Private Sub PlayCommand_Executed(ByVal sender As System.Object,

ByVal e As System.Windows.Input.ExecutedRoutedEventArgs)

Me.Media1.Play()

End Sub

Private Sub StopCommand_Executed(ByVal sender As System.Object,

ByVal e As System.Windows.Input.ExecutedRoutedEventArgs)

Me.Media1.Stop()

End Sub

Private Sub PauseCommand_Executed(ByVal sender As System.Object,

ByVal e As System.Windows.Input.ExecutedRoutedEventArgs)

Me.Media1.Pause()

End Sub

'Setting the condition tha makes commands executable

'if verified as true

Private Sub PlayCommand_CanExecute(ByVal sender As System.Object,

ByVal e As System.Windows.Input.CanExecuteRoutedEventArgs)

e.CanExecute = Me.Media1.Source IsNot Nothing

End Sub

Private Sub StopCommand_CanExecute(ByVal sender As System.Object,

ByVal e As System.Windows.Input.CanExecuteRoutedEventArgs)

e.CanExecute = Me.Media1.Source IsNot Nothing

End Sub

Private Sub PauseCommand_CanExecute(ByVal sender As System.Object,

ByVal e As System.Windows.Input.CanExecuteRoutedEventArgs)

e.CanExecute = Me.Media1.Source IsNot Nothing

End Sub

End Class

Simply notice how the CanExecute handlers set a condition that will disable controls on the UI unless it is false. Such condition will become True only when you select a media file (and thus controls will be automatically enabled). Now we can run the application and enjoy the magic:

By writing the above code we made our application icon interactive, adding buttons that allow us controlling how the media file is played. This is a very cool feature of WPF 4 for Windows 7.

You can download the code for this blog post from the following address of the MSDN Code Gallery.

Alessandro

WPF 4: SelectionBrush and CaretBrush

alessandro.delsole@nospamvisual-basic.it — Sun, 25 Oct 2009 23:39:00 GMT

Among the new features available in Windows Presentation Foundation with .NET 4, there are two new Brush objects: SelectionBrush and CaretBrush. The first brush allows specifying the highlight color when selecting text, e.g. in TextBox controls, whereas the second one allows specifying the filling color for the mouse pointer.

The following XAML code defines a SelectionBrush for a TextBox, so that selected text will be highlighted with a gradient:

<TextBox Width="250" Height="40" Name="TextBox1" FontSize="16"

FontWeight="Bold">

<TextBox.SelectionBrush>

</LinearGradientBrush>

</TextBox.SelectionBrush>

</TextBox >

The above code produces the following result:

As you can imagine, you can use other Brush types too, such as the ImageBrush for highlighting the selection with an image. The SelectionBrush can also be applied to other kinds of controls, such as the FlowDocumentPageViewer for displaying dynamic documents.

The CaretBrush works very similarly. The following XAML code defines a gradient that fills the mouse pointer with a gradient within the TextBox:

<TextBox.CaretBrush>

</LinearGradientBrush>

</TextBox.CaretBrush>

Although difficult to see :-), the result is the following:

Also in this case you can apply different kinds of brushes.

Alessandro

XAML serialization with .NET 4.0 and VB 2010

alessandro.delsole@nospamvisual-basic.it — Sat, 17 Oct 2009 22:45:00 GMT

To be honest the technique I'm going to describe in this blog post is not really new in .NET 4.0 (although I'm going to explain it with Visual Basic 2010), by the way the new Framework version introduces something new. First, there is a new assembly named System.Xaml.dll which is responsible for processing and parsing XAML code in WPF applications. Most of what was part of the WindowsBase.dll assembly about XAML, now is exposed by the new library which exposes a namespace named System.Xaml.

Now it's time to discuss the technique that entitles this blog post. During the years, serialization in the .NET development had some changes and improvements, with particular regard to technologies such as WCF and the Entity Framework. With that said, one of the most recent techniques is the Xaml Serialization which is the ability of serializing our data to XAML markup code; such technique offers several advantages: first, it allows serializing entire object graphs to Xml. XAML is basically Xml, thus it is portable. Second, the possibility of serializing WPF objects; last but not least, the possibility of using such technique against classic .NET objects even if outside WPF applications.

The following code has been written with the Visual Studio 2010 Beta 1 and I will show also some of the new language features in VB 2010. With that said, let's create a new Console application and add a reference to the System.Xaml.dll assembly (added by default in WPF applications).

Now suppose you have a Customer class defined as follows:

Public Class Customer

'Using auto-implemented properties :-)

Public Property CustomerID As String

Public Property CompanyName As String

Public Property Orders As List(Of Order)

End Class

The class exposes a Orders property of type List(Of Order). In this way we can simulate an object graph. The Order could be defined like this (a simplified implementation):

Public Class Order

Public Property OrderID As Integer

Public Property OrderDate As Date

Public Property ShipAddress As String

End Class

Now we need some object instances for demo purposes. First, let's create two new instances of the Order class. Notice how the code takes advantage of object initializers for in-line initialization:

Dim order1 As New Order With {.OrderDate = Date.Today, .OrderID = 1, .ShipAddress = "Somewhere"}

Dim order2 As New Order With {.OrderDate = Date.Today, .OrderID = 2, .ShipAddress = "Somewhere else"}

Now let's create an instance of the Customer class and populate its Orders properties with a collection of Order. We can take advantage of a new VB 2010 feature, known as collection initializers so that we can initialize our collection when creating the instance:

Dim cust As New Customer With {.CustomerID = "DELSO", .CompanyName = "Del Sole",

.Orders = New List(Of Order) From {order1, order2}}

To serialize the cust object we need a stream (either on disk or in memory); then we can invoke the XamlServices.Save method, as shown here:

'Imports System.Xaml, System.IO directives required

'Serialization

Using target As New FileStream("C:\temp\CustomerData.xaml", FileMode.Create)

XamlServices.Save(target, cust)

End Using

Save requires the target stream and the object to serialize as arguments. If we investigate the content of the new .Xaml generated file, we'll get the following result:

<Customer CompanyName="Del Sole"

CustomerID="DELSO"

xmlns="clr-namespace:XamlSerialization;assembly=XamlSerialization"

xmlns:scg="clr-namespace:System.Collections.Generic;assembly=mscorlib"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Customer.Orders>

<scg:List x:TypeArguments="Order" Capacity="4">

</scg:List>

</Customer.Orders>

</Customer>

Over than the usual Xml namespace pointing to the XAML schema, notice how the System.Collections.Generic namespace is also referred. This is because we used generics in our code. The serialization result is quite simple to understand; the object was serialized as XAML and referenced objects are represented by a Customer.Orders node, completing the graph serialization. Notice how the scg:List tag means that its content needs to be represented by a generic list when deserializing.

Deserializing XAML is also simple. You invoke the XamlServices.Load method, as in the following code:

'Deserialize

Using source As New FileStream("C:\temp\CustomerData.xaml", FileMode.Open)

'Conversion required, the method returns Object

Dim myCustomer As Customer = CType(XamlServices.Load(source), Customer)

For Each ord In myCustomer.Orders

Console.WriteLine(ord.ShipAddress)

End Using

The For..Each loop has the only purpose of demonstrating that the deserialization process was successful. Only one notice about generics: if you serialize generics, remember that they must implement at least IList or IDictionary.

Of course this is just a small example but this technique can be also very complex. Surely it opens to new important scenarios, especially if considered within WPF applications.

Alessandro

WPF 4: assigning images to Image controls at design-time

alessandro.delsole@nospamvisual-basic.it — Thu, 08 Oct 2009 13:35:00 GMT

Another improvement to the Visual Studio 2010 designer for WPF that you can check out in the Beta 1 is the capability of assigning images to Image controls at design-time in a better way. After adding Image controls to the UI, simply click the "..." button for the Source property in the Properties window. This will show up the Choose image dialog (see figure below) where you can select one or more images:

The interesting thing is the Path text box: Visual Studio shows the so called Packed Uri pointing to the image. At this point selected images are basically part of the application resouces. You will notice how the IDE generates a project-level folder named Images, where it copies the selected image files. The IDE is also responsible for writing the related XAML code that, in our example, looks like the following:

This small tool simplifies working with images at design-time and offers a more efficient way for pointing to images themselves in code.

Alessandro

WPF 4: setting controls' color brushes in the Visual Studio 2010 designer

alessandro.delsole@nospamvisual-basic.it — Wed, 07 Oct 2009 22:52:00 GMT

If you are interested into WPF and you had a chance of trying the bits of Visual Studio 2010 Beta 1 you will have probably noticed some improvements to the WPF designer (also known as Cider) although this is just the first Beta.

In fact the designer now offers more advanced tools than in the past. One of such tools provides the ability of setting controls colors, such as Background, Foreground and all those properties that you can assign with brushes. For example, if you want to define a gradient color as the background to a Window you simply click the Background property within the Properties window to see the following pop-up tool appear:

Notice how you can select the brush type (SolidColorBrush, GradientBrush, ImageBrush). Also notice how, about gradients, you can establish the direction for linear gradients or just select the radial gradient. To provide additional colors to the gradient (GradientStop) you simply click the point where you want to place the new color, on the lowest line.

You can take advantage of the palette and of selectors to set colors and transparency. The (very cool :D) gradient shown in the above figure is represented by the following XAML, which has been generated for us by Visual Studio 2010 consequently to our design-time actions:

<Window.Background>

</LinearGradientBrush>

</Window.Background>

The good news is that such tool is available in different scenarios, for example when setting colors for a DataGrid cells! I personally like very much this new designer, really better than previous editions.

Alessandro

Updated version of my WPF client for Azure's blob storage

alessandro.delsole@nospamvisual-basic.it — Sat, 26 Sep 2009 15:02:00 GMT

Some time ago I published onto CodePlex the first version of a WPF client to manage files on the Windows Azure blob storage. I just updated the application so that it can take advantage of the July 2009 CTP of Windows Azure SDK APIs removing also some unused references to unit testing assemblies that caused crashes with ClickOnce installations.

If you are interested in Windows Azure and you need a simple tool for uploading and removing files and folders in the blob storage without reinventing the wheel, try to take a look at its CodePlex workspace :-)

The client's source code is in Visual Basic 2008, while the SDK APIs are in C#. You can also download the only ClickOnce installer if you like.

Feedbacks are really appreciated.

Alessandro

Behind the scenes of the ObservableCollection(Of T)

alessandro.delsole@nospamvisual-basic.it — Tue, 01 Sep 2009 18:39:00 GMT

When developing WPF applications, in many situations you will use the ObservableCollection(Of T) that supports the two ways data-binding and therefore it is able to notify the UI of changes happening on items of the collection itself. This is due to the implementation of the INotifyPropertyChanged interface.

It is interesting to understand how this works behind the scenes. For the sake of simplicity, for this blog post I created a Console application adding a reference to the WindowsBase.dll assembly that defines the above mentioned collection.

The ObservableCollection basically works like the List(Of T), meaning that it exposes methods such as Add, Remove and so on. Now let's imagine we want to build a simple collection of strings, as follows:

'Requires an Imports System.Collections.ObjectModel directive

Dim stringCollection As New ObservableCollection(Of String)

The collection exposes an event named CollectionChanged, which is raised each time items within the collection are edited (including add/remove operations). First of all, we have to specify an event handler that will be implemented later:

AddHandler stringCollection.CollectionChanged,

AddressOf stringCollectionChangedEventHandler

Now we can perform some operations such as adding and removing items:

stringCollection.Add("One string")

stringCollection.Add("Two strings")

stringCollection.Add("Three strings")

stringCollection.Remove("Three strings")

The event handler adheres to the specific delegate's signature; the following is just an example:

Private Sub stringCollectionChangedEventHandler(ByVal sender As Object,

ByVal e As Specialized.NotifyCollectionChangedEventArgs)

Select Case e.Action

Case Is = Specialized.NotifyCollectionChangedAction.Add

Console.WriteLine("Added a new string")

Case Is = Specialized.NotifyCollectionChangedAction.Remove

Console.WriteLine("Removed a string")

End Select

End Sub

The System.Collections.Specialized.NotifyCollectionChangedEventArgs type allows getting information on what modifications affected the collection. For example, the Action property allows discovering what kind of action (add, remove, replace) affected the collection, while the NewItems and OldItems properties allow respectively getting information on what items were added and what items were removed/moved/replaced.

Because of this mechanism, the two ways WPF data-binding can intercept the event and can communicate to the runtime that the UI needs to refresh according to the modifications.

Alessandro