Christian Moser's WPF Tutorial.net

Wrap Panel

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-02 11:01:47

Wrap Panel

Introduction

The wrap panel is similar to the StackPanel but it does not just stack all child elements to one row, it wraps them to new lines if no space is left. The Orientation can be set to Horizontal or Vertical.

The WrapPanel can be used to arrange tabs of a tab control, menu items in a toolbar or items in an Windows Explorer like list. The WrapPanel is often used with items of the same size, but its not a requirement.

 
<WrapPanel Orientation="Horizontal">
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
    <Button Content="Button" />
</WrapPanel>

Install the Development Tools

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-02 00:34:15

WPF Development Tools

Microsoft provides two development tools for WPF applications. One is Visual Studio, made for developers and the other is Expression Blend made for designers. While Visual Studio is good in code and XAML editing, it has a rare support for all the graphical stuff like gradients, template editing, animation, etc. This is the point where Expression Blend comes in. Blend covers the graphical part very well but it has (still) rare support for code and XAML editing.

So the conclusion is that you will need both of them.

Microsoft Visual Studio 2010

Visual Studio is the tool for developers to develop WPF applications. It includes a graphical designer for WPF since version 2008. If you're using Visual Studio 2005 you can install an add-on that enables you to develop WPF applications.

Microsoft provides a free Express Edition of Visual Studio that also includes the WPF designer. You can download it from the following URL

Download Microsoft Visual C# 2010 - Express Edition

Microsoft Expression Blend 3 + Sketch Flow

Expression Blend is the tool for designers. It's part of the Expression Studio, a new tool suite from Microsoft especially created for user experience designers. Blend covers all the missing features of the Visual Studio designer like styling, templating, animations, 3D graphics, resources and gradients.

In the latest Version it also includes a powerful prototyping tool called SketchFlow. Expression Blend can open solution files created by visual studio.

Download Microsoft Expression Blend 3

Other useful tools

Adjust the Frame Rate

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-02 00:31:02

How to control the frame rate for WPF animations

Animations are very cool, but they can cause a high CPU load. One reason could be a missing hardware acceleration due to a old graphics adapter or a software rendering constraint. Another reason could be the the high frame rate of animations that is set to 60 fps by default.

You can easily lower the framerate for all animations by overriding the DesiredFrameRate property of the timeline. Just add the following code to your project and play around with the setting to find a good tradeoff between performance and aesthetic.

 
Timeline.DesiredFrameRateProperty.OverrideMetadata(typeof(Timeline),
   new FrameworkPropertyMetadata { DefaultValue = 30 });

Or you can set the framerate individually for each animation in XAML, using the following code:

 
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" 
                 From="1.0" To="0.5" Timeline.DesiredFrameRate="30" />

Home

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-02 00:15:36

Welcome to the WPF Tutorial

Welcome to my website about the Windows Presentation Foundation. The tutorials will show you how to create the next generation user experience. I hope you will get amazed by the possibilities of this fascinating technology.

[tipofday] [popular]

[news]

Watch Viedos about WPF

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 23:25:18

Videos about WPF

General

Multimedia

How to use text-to-speech in WPF

Third Party Controls

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 22:45:51

WPF - Third Party Controls

Data Grids

Charts

Dialogs

Pure WPF FileOpen, FileSave and FolderBrowser Dialogs

Dock

Editors

Effects

Transitionals - Framework to transition between screens.

GIS and Maps

Multimedia

Misc

Outlook Bar

Panels

Reporting

Toolbar

Tree

Telerik RadTree View for WPF

Schedule

3D

Xceed 3D Views

Web Browser

Chromium Web Browser

Calendar

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 22:32:47

WPF Calendar Control

Introduction

Since WPF 4.0, Microsoft provides a full featured calendar control. It provides the following features:

Set the displayed date
Multiple selection modes
Blackout dates
Calendar Modes

Set the displayed date

The calendar displays by default the current date. But you can specify any other date to be displayed by setting the DisplayDate property.

 
<Calendar DisplayDate="01.01.2010" />

Selection Modes

The calendar control provides multiple modes for selection. You can set the SelectionMode property to SingleDateSingleRange, MultipleRanges or None.

 
<Calendar SelectionMode="MultipleRange" />

Blackout dates

The calendar control provides a feature to black out dates that are not valid for selection. You can define multiple ranges by setting the BlackoutDates property to one or multiple CalendarDateRange.

 
<Calendar SelectionMode="{Binding SelectedItem, ElementName=selectionmode}" >
    <Calendar.BlackoutDates>
        <CalendarDateRange Start="01/01/2010" End="01/06/2010" />
        <CalendarDateRange Start="05/01/2010" End="05/03/2010" />
    </Calendar.BlackoutDates>
</Calendar>

Calendar Modes

The calendar supports three modes to display ranges of dates: Year, Month and Decade. You can control the mode by setting the DisplayMode property.

 
<Calendar DisplayMode="Year" />

DataGrid

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 21:34:07

WPF DataGrid Control

Introduction

Since .NET 4.0, Microsoft is shipping a DataGrid control that provides all the basic functionality needed, like:

Auto generation of columns
Manual definition of columns
Selection
Grouping
Column sorting, reordering and resizing
Row Details
Alternating BackgroundBrush
Frozen columns
Headers Visibility

Basic usage: Auto generate columns

To show a basic data grid , just drop a DataGrid control to your view and bind the ItemsSource to a collection of data objects and you're done. The DataGrid provides a feature called AutoGenerateColumns that automatically generates column according to the public properties of your data objects. It generates the following types of columns:

TextBox columns for string values
CheckBox columns for boolean values
ComboBox columns for enumerable values
Hyperlink columns for Uri values

 
<DataGrid ItemsSource="{Binding Customers}" />

Manually define columns

Alternatively you can define your columns manually by setting the AutoGenerateColumns property to False. In this case you have to define the columns in the Columns collection of the data grid. You have the following types of columns available:

DataGridCheckBoxColumn for boolean values
DataGridComboBoxColumn for enumerable values
DataGridHyperlinkColumn for Uri values
DataGridTemplateColumn to show any types of data by defining your own cell template
DataGridTextColumn to show text values

 
<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Image" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Image}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Selection

The data grid includes a variety of selection modes. They are configured by the SelectionMode and SelectionUnit property.

The SelectionMode can be set to Single or Extended to define if one or multiple units can be selected simultaneously.
The SelectionUnit defines the scope of one selection unit. It can be set to Cell, CellAndRowHeader and FullRow.

 
<DataGrid ItemsSource="{Binding Customers}" 
          SelectionMode="Extended" SelectionUnit="Cell" />

Column sorting, reordering and resizing

The data grid provides features to sort, reorder and resize columns. They can be enabled or disabled by the following properties:

CanUserReorderColumns enables or disables column re-ordering
CanUserResizeColumns enables or disables column resizing
CanUserResizeRows enables or disables row resizing
CanUserSortColumns enables or disables column sorting

 
<DataGrid ItemsSource="{Binding Customers}" 
          CanUserReorderColumns="True" CanUserResizeColumns="True" 
          CanUserResizeRows="False" CanUserSortColumns="True"/>

Grouping

The data grid also supports grouping. To enable grouping you have to define a CollectionView that contains to least one GroupDescription that defines the criterias how to group.

 
Customers = new ListCollectionView(_customers);
Customers.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));

Second thing you need to do is defining a template how the groups should look like. You can do this by setting the GroupStyle to something like the following snippet.

 
<DataGrid ItemsSource="{Binding GroupedCustomers}">
    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Path=Name}" />
                    </StackPanel>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupItem}">
                                <Expander>
                                    <Expander.Header>
                                        <StackPanel Orientation="Horizontal">
                                          <TextBlock Text="{Binding Path=Name}" />
                                          <TextBlock Text="{Binding Path=ItemCount}"/>
                                          <TextBlock Text="Items"/>
                                        </StackPanel>
                                    </Expander.Header>
                                    <ItemsPresenter />
                                </Expander>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </DataGrid.GroupStyle>
</DataGrid>

Row Details

The data grid provides a feature that shows a detail panel for a selected row. It can be enabled by setting a DataTemplate to the RowDetailsTemplate property. The data template gets the object that is bound to this row passed by the DataContext and can bind to it.

 
<DataGrid ItemsSource="{Binding Customers}">
    <DataGrid.Columns>
    <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Image Height="100" Source="{Binding Image}" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

Row Details depending on the type of data

You can specify a RowDetailsTemplateSelector that selects a data template according to the type or data that this row contains. To do this, create a type that derives from DataTemplateSelector and override the SelectTemplate method. In the items argument you get the data and you can determine which data template to display. Return an instance of that data template as return value.

 
public class GenderTemplateSelector : DataTemplateSelector
{
    public DataTemplate MaleTemplate { get; set; }
    public DataTemplate FemaleTemplate { get; set; }
 
    public override DataTemplate SelectTemplate(object item, 
                  DependencyObject container)
    {
        var customer = item as Customer;
        if (customer == null)
            return base.SelectTemplate(item, container);
 
        if( customer.Gender == Gender.Male)
        {
            return MaleTemplate;
        }
        return FemaleTemplate;
    }
}

 
<l:GenderTemplateSelector x:Key="genderTemplateSelector">
    <l:GenderTemplateSelector.MaleTemplate>
        <DataTemplate>
            <Grid Background="LightBlue">
                <Image Source="{Binding Image}" Width="50" />
            </Grid>
        </DataTemplate>
    </l:GenderTemplateSelector.MaleTemplate>
    <l:GenderTemplateSelector.FemaleTemplate>
        <DataTemplate>
            <Grid Background="Salmon">
                <Image Source="{Binding Image}" Width="50" />
            </Grid>
        </DataTemplate>
    </l:GenderTemplateSelector.FemaleTemplate>
</l:GenderTemplateSelector>
 
<DataGrid ItemsSource="{Binding Customers}" 
          RowDetailsTemplateSelector="{StaticResource genderTemplateSelector}" />

Alternating BackgroundBrush

You can define a an AlternatingRowBackground that is applied every even row. You can additionally specify an AlternationCount if you only want to ink every every n-th data row.

 
<DataGrid ItemsSource="{Binding Customers}" 
          AlternatingRowBackground="Gainsboro"  AlternationCount="2"/>

Frozen Columns

The data grid also supports the feature to freeze columns. That means they stay visible while you scoll horizontally through all columns. This is a useful feature to keep a referencing column like an ID or a name always visible to keep your orientation while scrolling.

To freeze a numer of columns just set the FrozenColumnCount property to the number of columns you want to freeze.

 
<DataGrid ItemsSource="{Binding Customers}" FrozenColumnCount="2"  />

Headers visbility

You can control the visibility of row and column headers by setting the HeadersVisibility property to either None,Row,Column or All

 
<DataGrid ItemsSource="{Binding Customers}" HeadersVisibility="None" />

Introduction to WPF

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 19:53:34

Introduction to Windows Presentation Foundation

Overview

The Windows Presentation Foundation is Microsofts next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.

WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.

The followinig illustration gives you an overview of the main new features of WPF

Separation of Appearance and Behavior

WPF separates the appearance of an user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by databinding, events and commands. The separation of appearance and behavior brings the following benefits:

Appearance and behaviour are loosely coupled
Designers and developers can work on separate models.
Graphical design tools can work on simple XML documents instead of parsing code.

Rich composition

Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although these flexibility sounds horrible to designers, its a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combobox to choose a video file.

 
<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="speaker.png" Stretch="Uniform"/>
        <TextBlock Text="Play Sound" />
    </StackPanel>
</Button>

Highly customizable

Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.

The following example shows an default WPF button and a customized button.

Resolution independence

All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - if just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scaleable user interfaces.

Read Books about WPF

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-03-01 10:26:48

Books about WPF

Brand New!

WPF Control Development Unleashed

In this book, two leading Windows Presentation Foundation experts give developers everything they need to build next-generation WPF applications--software that is more robust, usable, and compelling. Drawing on their close ties with Microsoft's WPF development team, Pavan Podila and Kevin Hoffman give you a clear, robust, and practical understanding of WPF, its underpinnings, its overall architecture, and its design philosophy.

Autor:	Pavan Podila, Kevin Hoffman
ISBN:	978-0672330339
Published:	September 2009
	Find it at Amazon

Windows Presentation Foundation - Unleashed (My favorite!)

In my opinion one of the best book about WPF. It covers all important themes including 3D programming. All code samples have syntax highlighting. Digging deeper sections with additional informations for advanced programmers.

Autor:	Adam Nathan
ISBN:	978-0672328916
Published:	January 2007
	Find it at Amazon

Application = Code + Markup

"Get the definitive guide to the Windows Presentation Foundation (WPF), the new client programming interface for the Microsoft .NET Framework 3.0 and Windows Vista. Award-winning author Charles Petzold teaches you how to combine C# code and the Extensible Application Markup Language (XAML) to develop applications for the WPF.". I cannot unterstand how anyone can write a book about a UI technology without a single illustration. If you prefer gray text to colorful images, it might be the book for you.

Autor:	Charles Petzold
ISBN:	978-0735619579
Published:	August 2006

Essential Windows Presentation Foundation

Chris Anderson was one of the chief architects of the next-generation GUI stack, the Windows Presentation Framework (WPF), which is the subject of this book. Chris's insights shine a light from the internals of WPF to those standing at the entrance, guiding you through the concepts that form the foundation of his creation.

Autor:	Chris Anderson
ISBN:	978-0321374479
Published:	April 2007

Foundations of WPF: An Introduction to Windows Presentation Foundation

Foundations of WPF: An Introduction to Windows Presentation Foundation teaches you everything you need to get started with the technology, and is broken into three parts. The first introduces and contextualizes the WPF technology; the second part dives deeper into the facets of the technology that are of immediate and valuable use in developing applications; the last part offers you the real-world perspective you need to be productive in the community and customer base.

Autor:	Laurence Moroney
ISBN:	978-1590597606
Published:	November 2006

Pro WPF in C# 2008

This book explains how WPF works from the ground up. It follows on from the author s previous and highly successful books, covering Windows Forms (WPF's predecessor technology) and earlier versions of WPF. It is a one-stop shop in Apress proven Pro style that leaves readers with a deep understanding of the technology and able to take the concepts away and apply them for themselves.

Autor:	Matthew McDonald
ISBN:	978-1590599556
Published:	Februar 2008

Foundations of WPF: An Introduction to Windows Presentation Foundation

If you want to build applications that take full advantage of Windows Vista's new user interface capabilities, you need to learn Microsoft's Windows Presentation Foundation (WPF). This new edition, fully updated for the official release of .NET 3.0, is designed to get you up to speed on this technology quickly.

Autor:	Chris Sells and Ian Griffiths
ISBN:	978-0596510374
Published:	September 2007

Evaluate a localization mechanism

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-02-25 08:31:07

How to evaluate a localization mechanism

Criterias for evaluation

To choose an appropriate localization mechanism you have to find one that meets the requirements and your companys established translation process.

Criterias to compare the localization mechanisms among each others:

Dynamic language switching
Usage in XAML and Code
Types of applicable resources
Ease and flexibility of use
Translation performance

Different WPF translation mechanisms compared

Localization using Satelite Assemblies

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-02-25 07:57:28

Localization using Satelite Assemblies

MSDN Documentation about Localization

Localization using a MarkupExtension

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-02-24 01:21:25

Localization of a WPF application using a custom MarkupExtension

The Idea

A simple and effective way to localize application resources is to write a custom MarkupExtension that provides a localized value. The extension takes a parameter in the constructor that is the unique resource key. When the DepdendencyProperty asks for the value, the markup extension looks up the value from a generic resource provider. This gives you the flexibility to reuse the resource management and translation process that is already established within your company.

Using a custom markup extension has some advantages

Lightweight and flexible solution
Dynamic language switch at runtime
Works with any kind of resource providers.

How to use it

The usage of the markup extension is very simple. Just replace the string you want to localize by {l:Translate resourceKey}.

 
 <TextBlock Text="{l:Translate CustomerForm.FirstName}" />

Implementation details of the translation infrastructure

The translation infrastructure consists of the folling parts

Translation manager
The translation manager is a static class that manages the current language and notifies all markup extensions, to update their values when the language changes. It also provides access to translated resources. The resources itself are provided by a generic translation provider.
Translate markup extension
The tanslate markup extension knows the resource key and provides the translated value. It listens to the LanguageChanged event of the translation manager and updates its value. This event handler is implemented by the weak event pattern to prevent memory leaks.
Translation provider
The translation provider is a class that provides the translated resources. It has to implement the ITranslationProvider and can access any kind of resources you like. For e.g. ResX, XML or text files.

 
public class TranslateExtension : MarkupExtension
{
    private string _key;
 
    public TranslateExtension(string key)
    {
        _key = key;
    }
 
    [ConstructorArgument("key")]
    public string Key
    {
        get { return _key; }
        set { _key = value;}
    }
 
    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var binding = new Binding("Value")
              {
                  Source = new TranslationData(_key)
              };
        return binding.ProvideValue(serviceProvider);
    }
}

 
public class TranslationData : IWeakEventListener, 
                  INotifyPropertyChanged
{
    private string _key;
 
    public TranslationData( string key)
    {
        _key = key;
        LanguageChangedEventManager.AddListener(
                  TranslationManager.Instance, this);
    }
 
    ~TranslationData()
    {
        LanguageChangedEventManager.RemoveListener(
                 TranslationManager.Instance, this);
    }
 
    public object Value
    {
        get
        {
            return TranslationManager.Instance.Translate(_key);
        }
    }
 
    public bool ReceiveWeakEvent(Type managerType, 
                            object sender, EventArgs e)
    {
        if (managerType == typeof(LanguageChangedEventManager))
        {
            OnLanguageChanged(sender, e);
            return true;
        }
        return false;
    }
 
    private void OnLanguageChanged(object sender, EventArgs e)
    {
        if( PropertyChanged != null )
        {
            PropertyChanged( this, new PropertyChangedEventArgs("Value"));
        }
    }
 
    public event PropertyChangedEventHandler PropertyChanged;
}

 
public class TranslationManager
{
    private static TranslationManager _translationManager;
 
    public event EventHandler LanguageChanged;
 
    public CultureInfo CurrentLanguage
    {
        get { return Thread.CurrentThread.CurrentUICulture; }
        set
        {
           if( value != Thread.CurrentThread.CurrentUICulture)
           {
               Thread.CurrentThread.CurrentUICulture = value;
               OnLanguageChanged();
           }
        }
    }
 
   public IEnumerable<CultureInfo> Languages
   {
       get
       {
           if( TranslationProvider != null)
           {
               return TranslationProvider.Languages;
           }
           return Enumerable.Empty<CultureInfo>();
       }
    }
 
    public static TranslationManager Instance
    {
        get
        {
            if (_translationManager == null)
                _translationManager = new TranslationManager();
            return _translationManager;
        }
    }
 
    public ITranslationProvider TranslationProvider { get; set; }
 
   private void OnLanguageChanged()
   {
        if (LanguageChanged != null)
        {
            LanguageChanged(this, EventArgs.Empty);
       }
    }
 
   public object Translate(string key)
   {
       if( TranslationProvider!= null)
       {
            object translatedValue =TranslationProvider.Translate(key);
            if( translatedValue != null)
           {
               return translatedValue;
           }
        }
       return string.Format("!{0}!", key);
    }
}

Localization

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-02-23 00:17:46

Localization in WPF

[sublist]

Weak Event Pattern

moc@zuehlke.com (Christian Moser) — Sat, 13 Mar 2010 21:01:00 +01002010-02-22 23:25:46

Weak Event Pattern

Introduction

Events can easily cause memory leaks, if the handler is not de-registrated, because the event source helds a reference to the object and so the garbage collector will not destroy the object. WPF introduces the "weak event" design pattern, that addresses this issue by providing a dedicated event manager that does the trick.