Christian Moser's WPF Tutorial.net

WPF Inspector

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002017-04-18 07:14:53

WPF Inspector

WPF Inspector is a utility that attaches to a running WPF application to troubleshoot common problems with layouting, databinding or styling. WPF Inspector allows you to explore a live view of the logical- and visual tree, read and edit property values of elements, watch the data context, debug triggers, trace styles and much more. Since March 2011, WPF Inspector is open source and available on CodePlex.

Download WPF Inspector from CodePlex

Development Tools

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002015-05-26 08:05:14

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

List of 3rd-Party Controls

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002014-10-07 13:33:27

WPF - Third Party Controls

WPF Component Vendors

Bar Code

Data Grids

CAD

Charts

Color Picker

Diagram Editors

Dialogs and Windows

Dock

Editors

Effects

Transitionals - Framework to transition between screens.

GIS and Maps

Multimedia

Misc

Office Components

Outlook Bar

Panels

Progress Bars

Mindscape Progress Bar

Property Grids

PDF & Reporting

Ribbon

Schedule

Slider

Toolbar

Theming

WPF Theme Selector

Tree

Web Browser

Chromium Web Browser

Wizard

3D

Xceed 3D Views

Home

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002014-07-09 21:26:57

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.

[news]

[tipofday] [popular]

PasswordBox

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002014-06-22 08:58:38

WPF PasswordBox Control

The password box control is a special type of TextBox designed to enter passwords. The typed in characters are replaced by asterisks. Since the password box contains a sensible password it does not allow cut, copy, undo and redo commands.

 
<StackPanel>
      <Label Content="Password:" />
      <PasswordBox x:Name="passwordBox" Width="130" />
</StackPanel>

Change the password character

To replace the asteriks character by another character, set the PasswordChar property to the character you desire.

 
<PasswordBox x:Name="passwordBox" PasswordChar="*" />

Limit the length of the password

To limit the length of the password a user can enter set the MaxLength property to the amount of characters you allow.

 
<PasswordBox x:Name="passwordBox" MaxLength="8" />

Databind the Password Property of a WPF PasswordBox

When you try to databind the password property of a PasswordBox you will recognize that you cannot do data binding on it. The reason for this is, that the password property is not backed by a DependencyProperty.

The reason is databinding passwords is not a good design for security reasons and should be avoided. But sometimes this security is not necessary, then it's only cumbersome that you cannot bind to the password property. In this special cases you can take advantage of the following PasswortBoxHelper.

 
<StackPanel>
    <PasswordBox w:PasswordHelper.Attach="True" 
         w:PasswordHelper.Password="{Binding Text, ElementName=plain, Mode=TwoWay}" 
                 Width="130"/>
    <TextBlock Padding="10,0" x:Name="plain" />
</StackPanel>

The PasswordHelper is attached to the password box by calling the PasswordHelper.Attach property. The attached property PasswordHelper.Password provides a bindable copy of the original password property of the PasswordBox control.

 
public static class PasswordHelper
{
    public static readonly DependencyProperty PasswordProperty =
        DependencyProperty.RegisterAttached("Password",
        typeof(string), typeof(PasswordHelper),
        new FrameworkPropertyMetadata(string.Empty, OnPasswordPropertyChanged));
 
    public static readonly DependencyProperty AttachProperty =
        DependencyProperty.RegisterAttached("Attach",
        typeof(bool), typeof(PasswordHelper), new PropertyMetadata(false, Attach));
 
    private static readonly DependencyProperty IsUpdatingProperty =
       DependencyProperty.RegisterAttached("IsUpdating", typeof(bool), 
       typeof(PasswordHelper));
 
 
    public static void SetAttach(DependencyObject dp, bool value)
    {
        dp.SetValue(AttachProperty, value);
    }
 
    public static bool GetAttach(DependencyObject dp)
    {
        return (bool)dp.GetValue(AttachProperty);
    }
 
    public static string GetPassword(DependencyObject dp)
    {
        return (string)dp.GetValue(PasswordProperty);
    }
 
    public static void SetPassword(DependencyObject dp, string value)
    {
        dp.SetValue(PasswordProperty, value);
    }
 
    private static bool GetIsUpdating(DependencyObject dp)
    {
        return (bool)dp.GetValue(IsUpdatingProperty);
    }
 
    private static void SetIsUpdating(DependencyObject dp, bool value)
    {
        dp.SetValue(IsUpdatingProperty, value);
    }
 
    private static void OnPasswordPropertyChanged(DependencyObject sender,
        DependencyPropertyChangedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
        passwordBox.PasswordChanged -= PasswordChanged;
 
        if (!(bool)GetIsUpdating(passwordBox))
        {
            passwordBox.Password = (string)e.NewValue;
        }
        passwordBox.PasswordChanged += PasswordChanged;
    }
 
    private static void Attach(DependencyObject sender,
        DependencyPropertyChangedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
 
        if (passwordBox == null)
            return;
 
        if ((bool)e.OldValue)
        {
            passwordBox.PasswordChanged -= PasswordChanged;
        }
 
        if ((bool)e.NewValue)
        {
            passwordBox.PasswordChanged += PasswordChanged;
        }
    }
 
    private static void PasswordChanged(object sender, RoutedEventArgs e)
    {
        PasswordBox passwordBox = sender as PasswordBox;
        SetIsUpdating(passwordBox, true);
        SetPassword(passwordBox, passwordBox.Password);
        SetIsUpdating(passwordBox, false);
    }
}

The Idea for this password helper was originally posted here:

http://blog.functionalfun.net/2008/06/wpf-passwordbox-and-data-binding.html

XAML

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002013-12-13 09:08:46

Introduction to XAML

XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees.

Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard.

All classes in WPF have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.

Advantages of XAML

All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:

XAML code is short and clear to read
Separation of designer code and logic
Graphical design tools like Expression Blend require XAML as source.
The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.

XAML vs. Code

As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.

 
<StackPanel>
    <TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
    <Button Margin="10" HorizontalAlignment="Right">OK</Button>
</StackPanel>

The same expressed in C# will look like this:

 
// Create the StackPanel
StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;
 
// Create the TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "Welcome to the World of XAML";
stackPanel.Children.Add(textBlock);
 
// Create the Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button);

As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

Properties as Elements

Properties are normally written inline as known from XML <Button Content="OK" />. But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? To do that we can use the property element syntax. This allows us to extract the property as an own child element.

 
<Button>
  <Button.Content>
     <Image Source="Images/OK.png" Width="50" Height="50" />
  </Button.Content>
</Button>

Implicit Type conversion

A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word "Blue" is only a string. The implicit BrushConverter makes a System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing converted implicit into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classses.

 
<Border BorderBrush="Blue" BorderThickness="0,10">
</Border>

Markup Extensions

Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). WPF has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in markup extensions:

Binding
To bind the values of two properties together.
StaticResource
One time lookup of a resource entry
DynamicResource
Auto updating lookup of a resource entry
TemplateBinding
To bind a property of a control template to a dependency property of the control
x:Static
Resolve the value of a static property.
x:Null
Return null

The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose Content is bound to the Text of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label.

 
<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/>

Namespaces

At the beginning of every XAML file you need to include two namespaces.
The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all wpf controls in System.Windows.Controls.
The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markup that defines the XAML keywords.
The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition attribute at assembly level. You can also directly include a CLR namespace in XAML by using the clr-namespace: prefix.

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

Query Screen Resolutions

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002012-12-06 16:52:36

WPF replacemenet for `Screen.AllScreens()`

Many WPF applications want to check the available screen resolution to adjust window placements of sizes. In WinForms was a nice helper called Screen.AllScreens that returned a list of screens with their corresponding resolution. To use it from WPF you have to reference System.Windows.Forms and System.Windows.Drawing which is not always what you want (because of application load time, dependencies, ambigue class names, etc.).

To get around this limitation I created a helper called Monitor which is a simple port of the Screen functionality from WinForms.

 
public class Monitor
{
    #region Dll imports
 
    [DllImport("user32.dll", CharSet = CharSet.Auto)]
    [ResourceExposure(ResourceScope.None)]
    private static extern bool GetMonitorInfo
                  (HandleRef hmonitor, [In, Out]MonitorInfoEx info);
 
    [DllImport("user32.dll", ExactSpelling = true)]
    [ResourceExposure(ResourceScope.None)]
    private static extern bool EnumDisplayMonitors
         (HandleRef hdc, IntPtr rcClip, MonitorEnumProc lpfnEnum, IntPtr dwData);
 
    private delegate bool MonitorEnumProc
                 (IntPtr monitor, IntPtr hdc, IntPtr lprcMonitor, IntPtr lParam);
 
    [StructLayout(LayoutKind.Sequential)]
    private struct Rect
    {
        public int left;
        public int top;
        public int right;
        public int bottom;
    }
 
    [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto, Pack = 4)]
    private class MonitorInfoEx
    {
        internal int cbSize = Marshal.SizeOf(typeof(MonitorInfoEx));
        internal Rect rcMonitor = new Rect();
        internal Rect rcWork = new Rect();
        internal int dwFlags = 0;
        [MarshalAs(UnmanagedType.ByValArray, SizeConst = 32)]
        internal char[] szDevice = new char[32];
    }
 
    private const int MonitorinfofPrimary = 0x00000001;
 
    #endregion
 
    public static HandleRef NullHandleRef = new HandleRef(null, IntPtr.Zero);
 
    public System.Windows.Rect Bounds { get; private set; }
    public System.Windows.Rect WorkingArea { get; private set; }
    public string Name { get; private set; }
 
    public bool IsPrimary { get; private set; }
 
    private Monitor(IntPtr monitor, IntPtr hdc)
    {
        var info = new MonitorInfoEx();
        GetMonitorInfo(new HandleRef(null, monitor), info);
        Bounds = new System.Windows.Rect(
                    info.rcMonitor.left, info.rcMonitor.top, 
                    info.rcMonitor.right - info.rcMonitor.left, 
                    info.rcMonitor.bottom - info.rcMonitor.top);
        WorkingArea = new System.Windows.Rect(
                    info.rcWork.left, info.rcWork.top, 
                    info.rcWork.right - info.rcWork.left, 
                    info.rcWork.bottom - info.rcWork.top);
        IsPrimary = ((info.dwFlags & MonitorinfofPrimary) != 0);
        Name = new string(info.szDevice).TrimEnd((char)0);
    }
 
    public static IEnumerable<Monitor> AllMonitors
    {
        get
        {
            var closure = new MonitorEnumCallback();
            var proc = new MonitorEnumProc(closure.Callback);
            EnumDisplayMonitors(NullHandleRef, IntPtr.Zero, proc, IntPtr.Zero);
            return closure.Monitors.Cast<Monitor>();
        }
    }
 
    private class MonitorEnumCallback
    {
        public ArrayList Monitors { get; private set; }
 
        public MonitorEnumCallback()
        {
            Monitors = new ArrayList();
        }
 
        public bool Callback(IntPtr monitor, IntPtr hdc, 
                       IntPtr lprcMonitor, IntPtr lparam)
        {
            Monitors.Add(new Monitor(monitor, hdc));
            return true;
        }
    }
}

Books

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002012-10-24 09:40:51

Books about WPF

Windows Presentation Foundation 4.5 Cookbook

The book contains over 80 recipes to effectively and efficiently develop rich Windows client applications on the Windows platform. It is full of illustrations, diagrams, and tips with clear step-by-step instructions and real world examples to gain a strong foundation of WPF features and patterns. It shows how to leverage the MVVM pattern to build decoupled, maintainable apps.

Autor:	Pavel Yosifovich
ISBN:	978-1849686228
Published:	Sept 2012
	Find it at Packt publishing

WPF 4 - Unleashed

In my opinion one of the best books about WPF - now updated to version 4.0. It's printed fully in color, so all code samples have syntax highlighting. It includes all the good explanations and samples of version 3 including new chapters about multitouch, XAML 2009, VSM, improved text rendering, windows 7 shell integration and more.

Autor:	Adam Nathan
ISBN:	978-0672331190
Published:	June 2010
	Find it at Amazon

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

Architecture of WPF

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002012-10-23 16:32:19

Architecture of WPF

This article is still in constuction...

Undo/Redo

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-12-23 09:14:09

How to implement undo/redo using MVVM

Introduction

One feature that many users demand is a neatless undo/redo integration. This means that the application allows the user to revert any modification he made - one by one - back to the start of the application and than eventually reapply them again. This improves the usability a lot, because it allows the user to carelessly use an unclear command, because he is certain, that he can undo it if he was wrong. Today undo/redo has gotten almost standard for any modern data editing application.

The MVVM-Pattern

Because of the strong databinding functionality in WPF, most applications are using the popular MVVM (Model-View-ViewModel) pattern. The idea of this pattern is basically to define a class that aggregates all data and commands for a certain view and provides them to the view as properties where it can bind to. Changes on properties are notified by an event on the INotifyPropertyChanged interface.

A concept of implementing undo/redo

A classical approach to implement undo/redo is to allow changes on the model only through commands. And every command should be invertible. The user than executes an action, the application creates a command, executes it and puts an inverted command on the undo-stack. When the user clicks on undo, the application executes the top-most (inverse) command on the undo-stack, inverts it again (to get the original command again) and puts it on the redo-stack. That's it.

Scenario 1: Executing an action

Scenario 2: Undoing an action

Adoption for WPF

We start with a base class that implements the INotifyPropertyChanged interface and provides a private method Notify(string propertyName).

 
public class NotifyableObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
 
    protected void Notify(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Then we build the base class TrackableObject where all model objects or view models that are directly bound to the view should inherit from.

 
public class TrackableObject : NotifyableObject
{
    private readonly List<ITrackable> _trackableItems = new List<ITrackable>();
 
    public bool HasChanges
    {
        get { return _trackableItems.Any(i => i.HasChanges); }
    }
 
    public IModificationTracker ModificationTracker { get; set; }
 
    protected TrackableValue<T> RegisterTrackableValue<T>(string propertyName, 
           T defaultValue = default(T))
    {
        var property = new TrackableValue<T>(propertyName, Modify, Notify, defaultValue);
        _trackableItems.Add(property);
        return property;
    }
 
    protected TrackableCollection<T> RegisterTrackableCollection<T>()
    {
        var collection = new TrackableCollection<T>(Modify);
        _trackableItems.Add(collection);
        return collection;
    }
 
    private void Modify(Action doAction, Action undoAction, Action notification)
    {
        var modification = new Modification(doAction, undoAction, notification);
        modification.Execute();
        ModificationTracker.TrackModification(modification);
    }
}

To simplify the generation of modifactions when changing a property value, we build a generic wrapper for each property called TrackableValue.

 
public class TrackableValue<T> : ITrackable
{
    private readonly string _propertyName;
    private readonly Action<Action, Action, Action> _modifyCallback;
    private readonly Action<string> _notifyAction;
    private T _value;
 
    public TrackableValue(string propertyName, 
               Action<Action, Action, Action> modifyCallback,
               Action<string> notifyAction, T defaultValue)
    {
        _propertyName = propertyName;
        _modifyCallback = modifyCallback;
        _notifyAction = notifyAction;
        _value = defaultValue;
    }
 
    public bool HasChanges
    {
        get { return _originalValue.Equals(_value); }
    }
 
    public T Value
    {
        get { return _value; }
        set
        {
            var oldValue = _value;
            _modifyCallback(() => _value = value, 
                            () => _value = oldValue,
                            () => _notifyAction(_propertyName));
        }
    }
}

To same thing we need to do for collections to track add/remove of items from a collection

 
public class TrackableCollection<T> : IList<T>, ITrackable
{
    private readonly Action<Action, Action, Action> _modifyCallback;
    private readonly List<T> _list = new List<T>();
    private readonly List<T> _originalList = new List<T>();
 
    public TrackableCollection(Action<Action, Action, Action> modifyCallback)
    {
        _modifyCallback = modifyCallback;
    }
 
    public event EventHandler<EventArgs<T>> ItemAdded;
    public event EventHandler<EventArgs<T>> ItemRemoved;
    public event EventHandler CollectionChanged;
 
    public bool HasChanges
    {
        get
        {
            if( _list.Count == _originalList.Count)
            {
                return _list.Where((item, index) => 
                       !item.Equals(_originalList[index])).Any();
            }
            return true;
        }
    }
 
    public void AcceptChanges()
    {
        _originalList.Clear();
        _originalList.AddRange(_list);
    }
 
    public IEnumerator<T> GetEnumerator()
    { 
        return _list.GetEnumerator();    
    }
 
    IEnumerator IEnumerable.GetEnumerator()
    {
        return GetEnumerator();
    }
 
    public void Add(T item)
    {
        _modifyCallback(() =>
        {
            _list.Add(item); 
            ItemAdded.Notify(this, new EventArgs<T>(item));
        }, 
        () =>
        {
            _list.Remove(item);
            ItemRemoved.Notify(this, new EventArgs<T>(item));
        }, 
        OnCollectionModified);
    }
 
    public void Clear()
    {
        var items = new T[_list.Count];
        _list.CopyTo(items);
        _modifyCallback(() =>
        {
            _list.ForEach(i => ItemRemoved.Notify(this, new EventArgs<T>(i)));
            _list.Clear();
        }, 
        () =>
        {
            _list.AddRange(items);
            _list.ForEach(i => ItemAdded.Notify(this, new EventArgs<T>(i)));
        }, 
        OnCollectionModified);
    }
 
    public bool Contains(T item)
    {
        return _list.Contains(item);
    }
 
    public void CopyTo(T[] array, int arrayIndex)
    {
        _list.CopyTo(array, arrayIndex);
    }
 
    public bool Remove(T item)
    {
        var result = _list.Contains(item);
        _modifyCallback(() =>
        {
            _list.Remove(item);
            ItemRemoved.Notify(this, new EventArgs<T>(item));
        }, 
        () =>
        {
            _list.Add(item);
            ItemAdded.Notify(this, new EventArgs<T>(item));
        }, 
        OnCollectionModified);
        return result;
    }
 
    public int Count
    {
        get { return _list.Count; }
    }
 
    public bool IsReadOnly
    {
        get { return false; }
    }
 
    public int IndexOf(T item)
    {
        return _list.IndexOf(item);
    }
 
    public void Insert(int index, T item)
    {
        _modifyCallback(() =>
        {
            _list.Insert(index, item);
            ItemAdded.Notify(this, new EventArgs<T>(item));
        }, 
        () =>
        {
            _list.Remove(item);
            ItemRemoved.Notify(this, new EventArgs<T>(item));
        }, 
        OnCollectionModified);
    }
 
    public void RemoveAt(int index)
    {
        var item = _list[index];
        _modifyCallback(() =>
        {
            _list.Remove(item);
            ItemRemoved.Notify(this, new EventArgs<T>(item));
        }, 
        () =>
        {
            _list.Insert(index, item);
            ItemAdded.Notify(this, new EventArgs<T>(item));
        }, 
        OnCollectionModified);
    }
 
    public T this[int index]
    {
        get { return _list[index]; }
        set
        {
            var oldItem = _list[index];
            _modifyCallback(() =>
           {
               _list[index] = value;
               ItemAdded.Notify(this, new EventArgs<T>(value));
           }, 
           () =>
           {
               _list[index] = oldItem;
               ItemRemoved.Notify(this, new EventArgs<T>(oldItem));
           }, 
           OnCollectionModified);
        }
    }
 
    private void OnCollectionModified()
    {
        CollectionChanged.Notify(this, EventArgs.Empty);   
    }
}

Grid Panel

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-10-03 09:22:29

Grid Panel

Introduction

How to define rows and columns

How to add controls to the grid

Resize columns or rows

How to share the width of a column over multiple grids

Using GridLenghts from code

Introduction

The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible. A cell can contain multiple controls, they can span over multiple cells and even overlap themselves.

The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. The distance between the anchor and the grid line is specified by the margin of the control

Define Rows and Columns

The grid has one row and column by default. To create additional rows and columns, you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. The following example shows a grid with three rows and two columns.

The size can be specified as an absolute amount of logical units, as a percentage value or automatically.

Fixed	Fixed size of logical units (1/96 inch)
Auto	Takes as much space as needed by the contained control
*Star ()**	Takes as much space as available (after filling all auto and fixed sized columns), proportionally divided over all star-sized columns. So 3/5 means the same as 30/50. Remember that star-sizing does not work if the grid size is calculated based on its content.

 
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
</Grid>

How to add controls to the grid

To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row- and columndefinitions must precced any definition of child controls.

The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
            MinWidth="80" Margin="3" Content="Send"  />
</Grid>

Resizable columns or rows

WPF provides a control called the GridSplitter. This control is added like any other control to a cell of the grid. The special thing is that is grabs itself the nearest gridline to change its width or height when you drag this control around.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Label Content="Left" Grid.Column="0" />
    <GridSplitter HorizontalAlignment="Right" 
                  VerticalAlignment="Stretch" 
                  Grid.Column="1" ResizeBehavior="PreviousAndNext"
                  Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" />
</Grid>

The best way to align a grid splitter is to place it in its own auto-sized column. Doing it this way prevents overlapping to adjacent cells. To ensure that the grid splitter changes the size of the previous and next cell you have to set the ResizeBehavior to PreviousAndNext.

The splitter normally recognizes the resize direction according to the ratio between its height and width. But if you like you can also manually set the ResizeDirection to Columns or Rows.

<GridSplitter ResizeDirection="Columns"/>

How to share the width of a column over multiple grids

The shared size feature of the grid layout allows it to synchronize the width of columns over multiple grids. The feature is very useful if you want to realize a multi-column listview by using a grid as layout panel within the data template. Because each item contains its own grid, the columns will not have the same width.

By setting the attached property Grid.IsSharedSizeScope to true on a parent element you define a scope within the column-widths are shared.

To synchronize the width of two columndefinitions, set the SharedSizeGroup to the same name.

 
<ItemsControl Grid.IsSharedSizeScope="True" >
  <ItemsControl.ItemTemplate> 
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/>
        <TextBlock Text="{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/>
      </Grid>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Useful Hints

Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.

Using GridLenghts from code

If you want to add columns or rows by code, you can use the GridLength class to define the differenz types of sizes.

Auto sized	`GridLength.Auto`
Star sized	`new GridLength(1,GridUnitType.Star)`
Fixed size	`new GridLength(100,GridUnitType.Pixel)`

Grid grid = new Grid();
 
ColumnDefinition col1 = new ColumnDefinition();
col1.Width = GridLength.Auto;
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(1,GridUnitType.Star);
 
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);

Introduction to WPF

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-08-15 18:49:42

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 - it just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scaleable user interfaces.

ContextMenu

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-05-23 08:36:43

Context Menus in WPF

Context Menus can be defined on any WPF controls by setting the ContextMenu property to an instance of a ContextMenu. The items of a context menu are normal MenuItems.

 
<RichTextBox>
    <RichTextBox.ContextMenu>
        <ContextMenu>
            <MenuItem Command="Cut">
                <MenuItem.Icon>
                    <Image Source="Images/cut.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="Copy">
                <MenuItem.Icon>
                    <Image Source="Images/copy.png" />
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="Paste">
                <MenuItem.Icon>
                    <Image Source="Images/paste.png" />
                </MenuItem.Icon>
            </MenuItem>
        </ContextMenu>
    </RichTextBox.ContextMenu>
</RichTextBox>

Show ContextMenus on a disabled controls

If you rightclick on a disabled control, no context menu is shown by default. To enable the context menu for disabled controls you can set the ShowOnDisabled attached property of the ContextMenuService to True.

 
<RichTextBox IsEnabled="False" ContextMenuService.ShowOnDisabled="True">
    <RichTextBox.ContextMenu>
        <ContextMenu>
            ...
        </ContextMenu>
    </RichTextBox.ContextMenu>
</RichTextBox>

Merge ContextMenus

If you want to fill a menu with items coming from multiple sources, you can use the CompositeCollection to merge multiple collection into one.

 
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib">
  <Grid Background="Transparent">
    <Grid.Resources>
        <x:Array Type="{x:Type sys:Object}" x:Key="extensions">
            <Separator />
            <MenuItem Header="Extension MenuItem 1" />
            <MenuItem Header="Extension MenuItem 2" />
            <MenuItem Header="Extension MenuItem 3" />
        </x:Array>
    </Grid.Resources>
    <Grid.ContextMenu>
        <ContextMenu>
            <ContextMenu.ItemsSource>
                <CompositeCollection>
                    <MenuItem Header="Standard MenuItem 1" />
                    <MenuItem Header="Standard MenuItem 2" />
                    <MenuItem Header="Standard MenuItem 3" />
                    <CollectionContainer Collection="{StaticResource extensions}" />
                </CompositeCollection>
            </ContextMenu.ItemsSource>
        </ContextMenu>
    </Grid.ContextMenu>
  </Grid>
</Window>

How to bind a Command on a ContextMenu within a DataTemplate using MVVM

Since the Popuup control has it's separate visual tree, you cannot use find ancestor to find the Grid. The trick here is to use the PlacementTarget property, that contains the element, the ContextMenu is aligned to, what is the Grid in our case.

But this is only half of the solution. Because of the data template, the DataContext is set to a dataitem, and not the view model. So you need another relative source lookup, to find the view model. Trick Nr. 2 is to use the Tag property to bind the view model from outside to the grid, which is the PlacementTarget used above. And there we are.

 
<DataTemplate>
   <Grid Tag="{Binding DataContext, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}">
      <Grid.ContextMenu>
          <ContextMenu DataContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self}}">
             <MenuItem Content="Cut" Command="{Binding CutCommand}" />
             <MenuItem Content="Copy" Command="{Binding CopyCommand}" />
             <MenuItem Content="Paste" Command="{Binding PasteCommand}" />
          </ContextMenu>
      </Grid.ContextMenu>
   </Grid>
</DataTemplate>

How to open a context menu from code

The following sample shows you how to open a context menu of a control programmatically:

 
private void OpenContextMenu(FrameworkElement element)
{
    if( element.ContextMenu != null )
    {
       element.ContextMenu.PlacementTarget = element;
       element.ContextMenu.IsOpen = true;
    }
}

ListBox

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-05-23 08:36:27

WPF ListBox Control

Introduction

The ListBox control displays a list of items. The user can select one or multiple items depending on the selection mode. The typical usage of a listbox in WPF is to bind its items to a list of business objects and display them by applying a data template.

 
<ListBox Margin="20">
    <ListBoxItem>New York</ListBoxItem>
    <ListBoxItem>Los Angeles</ListBoxItem>
    <ListBoxItem>Paris</ListBoxItem>
    <ListBoxItem>Zurich</ListBoxItem>
</ListBox>

How to define a Trigger for IsSelected in the DataTemplate

If you want to change the appearance of a ListBoxItem when it is selected, you have to bind the IsSelected property of the ListBoxItem. But this is a bit tricky, you have to use a relative source with FindAcestor to navigate up the visual tree until you reach the ListBoxItem.

 
<DataTemplate x:Key="myDataTemplate">
    <Border x:Name="border" Height="50">
        <TextBlock Text="{Binding Text}" />
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource=
            {RelativeSource Mode=FindAncestor, AncestorType=
                {x:Type ListBoxItem}},Path=IsSelected}" Value="True">
            <Setter TargetName="border" Property="Height" Value="100"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

Designtime vs. Runtime

moc@zuehlke.com (Christian Moser) — Fri, 19 Apr 2024 12:19:12 +02002011-05-04 15:22:02

Designtime vs. Runtime

Introduction

An application often looks great at runtime, but when you open it in a designer like VisualStudio or Expression Blend, the experience is quite different. The rason is that at designtime:

UserControls are not embedded in a parent view
- Width and Height are not set
Constructor of the root-element is not called
- Root Element is replaced by the designer
- ViewModel is not created
Controls behave different
- No mouse and keyboard events
- Design time extensions loaded

This can be kind of annoying, especially if you want to edit data templates or layout controls.

Designtime attributes

To improve the design experience, Microsoft provides special designtime attributes that can be added to any WPF element and serve as a hint for the design tool.

The designtime attributes are defined in a special namespace, that is usually mapped to the d: prefix. To tell the XAML parser not to interprete these attributes at runtime, the markup compatibility namespace is mapped to mc: and with the mc:Ignorable="d" instruction, the d: namespace is excluded.

 
<Window 
   xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d" />

`d:DesignHeight` and `d:DesignWidth`

The d:DesignHeight and d:DesignWidth sets a fixed height and width for the element at designtime

 
<UserControl
    xmlns="http://schemas.microsoft.com/..."
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    d:DesignWidth="640" d:DesignHeight="480" >
<UserControl />

`d:LayoutOverrides`

If a property is set to a fixed value at runtime, but you want to override it at designtime, you can use the d:LayoutOverrides attribute. All properties that should be ignored at designtime can be listed, separated by a semicolon.

 
<Border Height="250" Width="160" d:LayoutOverrides="Width, Height" >
</Border>

Additional Resources

MSDN Designtime-attributes

This article is still under construction

Christian Moser's WPF Tutorial.net

WPF Inspector

WPF Inspector

Development Tools

WPF Development Tools

Microsoft Visual Studio 2010

Microsoft Expression Blend 3 + Sketch Flow

Other useful tools

List of 3rd-Party Controls

WPF - Third Party Controls

WPF Component Vendors

Bar Code

Data Grids

CAD

Charts

Color Picker

Diagram Editors

Dialogs and Windows

Dock

Editors

Effects

GIS and Maps

Multimedia

Misc

Office Components

Outlook Bar

Panels

Progress Bars

Property Grids

PDF & Reporting

Ribbon

Schedule

Slider

Toolbar

Theming

Tree

Web Browser

Wizard

3D

Home

Welcome to the WPF Tutorial

PasswordBox

WPF PasswordBox Control

Change the password character

Limit the length of the password

Databind the Password Property of a WPF PasswordBox

XAML

Introduction to XAML

Advantages of XAML

XAML vs. Code

Properties as Elements

Implicit Type conversion

Markup Extensions

Namespaces

Query Screen Resolutions

WPF replacemenet for Screen.AllScreens()

Books

Books about WPF

Windows Presentation Foundation 4.5 Cookbook

WPF 4 - Unleashed

WPF Control Development Unleashed

Windows Presentation Foundation - Unleashed (My favorite!)

Application = Code + Markup

Essential Windows Presentation Foundation

Foundations of WPF: An Introduction to Windows Presentation Foundation

Pro WPF in C# 2008

Foundations of WPF: An Introduction to Windows Presentation Foundation

Architecture of WPF

Architecture of WPF

Undo/Redo

How to implement undo/redo using MVVM

Introduction

The MVVM-Pattern

A concept of implementing undo/redo

Adoption for WPF

Grid Panel

Grid Panel

Introduction

Define Rows and Columns

How to add controls to the grid

WPF replacemenet for `Screen.AllScreens()`

`d:DesignHeight` and `d:DesignWidth`

`d:LayoutOverrides`