Alessandro Del Sole's Blog

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:

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:

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

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

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>

        <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 x:Key="OverlayImage">

            <!-- Populating the Drawing property...-->

            <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 Width="100" Height="30" Name="Combo1">

            <ComboBoxItem Content="Normal" />

            <ComboBoxItem Content="With overlay" />

        </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 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>

        <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

        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 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">

    <!--A simple gradient background -->

    <Window.Background>

        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

            <GradientStop Color="Black" Offset="0" />

            <GradientStop Color="White" Offset="1" />

        </LinearGradientBrush>

    </Window.Background>

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition Height="50" />

        </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:

        <!-- Some buttons. Notice how predefined commands are assigned to the Command property -->

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:

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 Description="Control your media" ThumbnailClipMargin="5">

            <TaskbarItemInfo.ThumbButtonInfos>

                <ThumbButtonInfoCollection>

                    <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

If you are Windows 7 users, probably you know that you can anchor windows to the four sides of the screen by simply clicking the windows' title bar and moving to the desired side. This will automatically resize your window; for example, if you drag a window to the right side of the screen, such window will be automatically anchored and resized so that it will occupy half of the screen.

Then, with Visual Studio 2010 Beta 2 it is possible dragging code window outside the IDE and treating them like any other window. Try: open a project, click the tab related to the desired code file, drag it outside the IDE and anchor it anywhere. The following figure shows an example (click to enlarge):

This is very useful if you need to take a look at a different code file while coding another one. To restore the original situation, simply click the title bar of the code window and drag it onto the IDE.

Sweet! :-)

Alessandro

It could happen that when completing Visual Studio 2010 Beta 2 setup, the button for launching the off-line documentation installation is not available or that the specific link in the installer start page is disabled.

If you experience this problem, don't worry; it is of course possible installing the off-line documentation later. Select the Manage Help Settings command in the Help menu within Visual Studio:

The Help Library Manager will run; from here you will be able to install the documentation, for example selecting Find Content On Disk:

This last option requires the availability of the installation media for Visual Studio.

Alessandro

Some time ago I published onto CodePlex an open source add-in for Visual Studio 2008 which allows exporting the selected code block within the code editor to a reusable code snippet (.snippet file), providing full VB 2008 source code, installer and video.

I decided to update the add-in to target Visual Studio 2010 Beta 2, with Visual Basic 2010. I had no particular problems in updating my code and I could also take advantage of some new features such as auto-implemented properties which make the code clearer. I still used Xml literals and Linq to Xml for easily generating snippets. If anyone of you already used the add-in, the usage remains unchanged.

You can find the new Visual Studio 2010 Beta 2 version of the add-in here: Export selection as Code Snippet. I look forward to hearing your feedback but you can also edit the code as you like.

Considerations/future plans: at the moment the add-in can export VB, C# and Xml code. Because Visual Studio 2010 is still in Beta, I did not provide a binary installer. For the future I'm considering to add Html snippets support and WPF interface. Check it out and let me know what you think about it!

Alessandro