Anatomy of the Windows 7 taskbar – TabbedThumbnail (Part 2)

In my “quest” to create thumbnails similar to the ones used in Internet Explorer 8, I hit a couple of snags! In part 1, we looked at the basics of creating a TabbedThumbnail. This is still a very manual process, so I decided to make it more WPF-like!

Introducing TabbedThumbnailContentControl

Maybe I should take a step back and first recap what a ContentControl is in WPF?

Represents a control with a single piece of content.

http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol.aspx

Ok, so that isn't the greatest MSDN article every but the ContentControl is a fundamental building block of WPF… As you might have guessed by now, the TabbedThumbnailContentControl is a UI element that can host a single piece of content! The magic though is that it will auto-magically create the TabbedThumbnail for you and show as its preview whatever you placed inside the content control!!!

And to make it a little more useful, it's also fully MVVM-able! The TabbedThumbnailControl exposes 2 commands that can be bound too by the VM:

• ActivateView - The event that occurs when a tab is activated (clicked) on the taskbar thumbnail preview.
• CloseView - The event that occurs when a tab is closed on the taskbar thumbnail preview.

And to use the TabbedThumbnailContentControl? Very easy… Here is my view:

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:TabbedThumbnailContentControl Title="{Binding Title}" 
		ActivateView="{Binding ActivatedCommand}" 
		CloseView="{Binding CloseCommand}">
                <Image Source="{Binding Path}" Width="200" Height="200" />
            </local:TabbedThumbnailContentControl>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

My ViewModel:

public class PhotoViewModel : WorkspaceViewModel
{
    public string Title { get; set; }
    public string Path { get; set; }

    private bool isSelected = false;
    public bool IsSelected
    {
        get { return isSelected; }
        set
        {
            if (isSelected != value)
            {
                isSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }
    }

    ICommand activatedCommand;
    public ICommand ActivatedCommand
    {
        get
        {
            if (activatedCommand == null)
                activatedCommand = new DelegateCommand(Activated);

            return activatedCommand;
        }
    }

    private void Activated()
    {
        IsSelected = true;
    }
}

My VM borrowed Josh’s WorkspaceViewModel base class (to support a VM closing itself)!

And that is it! Now I can add photos to my ListBox and it would be shown in the taskbar! There is also FULL integration! If you close a thumbnail in the taskbar, it will be removed from the ListBox.