Data See, Data Do : Data binding

A Custom Storyboard Component in Xaml

MikeHillberg — Fri, 20 Nov 2009 23:19:00 GMT

In WPF & Silverlight, a Storyboard is a collection of animations running in parallel. Not everyone likes the name “Storyboard” though. The idea behind the name was that that list of timelines running in parallel are like a list of plot lines in the plan for a movie.

In any case, just like you can package up a tree of elements into a re-usable UserControl component, it’s nice to be able to package up a tree of timelines into a re-usable Storyboard component. Here’s an approach to do just that, using Xaml, and made simpler by using a new Xaml feature in WPF4.

For example, here’s a Storyboard that puts three animations on a Rectangle:

<Grid>

    <Grid.Resources>
        <BackEase Amplitude="0.5" x:Key="backEase" />
    </Grid.Resources>

    <Grid.Triggers>
        <EventTrigger RoutedEvent="Grid.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="Rectangle1">
                    <DoubleAnimation Storyboard.TargetProperty="Width"
                                     From="0"
                                     EasingFunction="{StaticResource backEase}"
                                     Duration="0:0:1" />

                    <DoubleAnimation Storyboard.TargetProperty="Height"
                                     From="0"
                                     EasingFunction="{StaticResource backEase}"
                                     Duration="0:0:1" />

                    <ColorAnimation Storyboard.TargetProperty="Fill.Color"
                                    From="LightGray"
                                    Duration="0:0:1" />
                </Storyboard>

            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Rectangle Name="Rectangle1" Width="100" Height="100" Fill="Red" />

</Grid>

The goal is to package up this Storyboard into a re-usable component that I can use on any Rectangle that has a SolidColorBrush Fill. To do that, I’ll just move that <Storyboard> markup into a separate Xaml file and parameterize it.

Unfortunately there’s no single menu item for this e.g. in Visual Studio, but it’s not hard to do. What I do is right click on the project, “Add”, “User Control”, name it something like “MyRectangleStoryboard.xaml”, and get something like this:

<UserControl x:Class="CustomStoryboard.MyRectangleStoryboard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Grid>
            
    </Grid>
</UserControl>

… and this:

public partial class MyRectangleStoryboard : UserControl
{
    public MyRectangleStoryboard()
    {
        InitializeComponent();
    }
}

Now, just change “UserControl” to “Storyboard (and remove the <Grid> from the Xaml), and you’re all set:

<Storyboard x:Class="CustomStoryboard2.MyRectangleStoryboard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    
</Storyboard>

public partial class MyRectangleStoryboard : Storyboard
{
    public MyRectangleStoryboard()
    {
        InitializeComponent();
    }
}

The goal is to use this component instead of the storyboard/animation markup:

<Grid>
    <Grid.Resources>
        <BackEase Amplitude="0.5" x:Key="backEase" />
    </Grid.Resources>

    <Grid.Triggers>
        <EventTrigger RoutedEvent="Grid.Loaded">
            <BeginStoryboard>
                <l:MyRectangleStoryboard TargetName="Rectangle1" Duration="0:0:1" EasingFunction="{StaticResource backEase}"/>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Rectangle Name="Rectangle1" Width="100" Height="100" Fill="Red" />

</Grid>

As for the implementation of the MyRectangleStoryboard here’s the markup, which is cut/paste from the original with a couple of modifications for parameterization (which I’ll explain):

<Storyboard x:Class="CustomStoryboard.MyRectangleStoryboard"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:l="clr-namespace:CustomStoryboard" >

    <DoubleAnimation Storyboard.TargetProperty="Width"
                     From="0"
                     Duration="{Binding Duration, Source={l:XRoot}}"
                     EasingFunction="{Binding EasingFunction, Source={l:XRoot}}" />

    <DoubleAnimation Storyboard.TargetProperty="Height"
                     From="0"
                     Duration="{Binding Duration, Source={l:XRoot}}"
                     EasingFunction="{Binding EasingFunction, Source={l:XRoot}}" />

    <ColorAnimation Storyboard.TargetProperty="Fill.Color"
                    From="LightGray"
                    Duration="{Binding Duration, Source={l:XRoot}}" />

    
</Storyboard>

Notice that this custom storyboard is parameterized for the setting of the Duration and the EasingFunction properties on the animations. (Recall that these two properties were set when the MyRectangleStoryboard was used above).

Ordinarily, if you set the Duration on the storyboard it doesn’t inherit down to its children timelines, instead it clips its children timelines. But I want the MyRectangleStoryboard.Duration to actually be the Double/ColorAnimation.Duration, so I bound the Animation.Duration properties to the root’s Duration property.

The source of this binding is a custom “XRoot” markup extension that I wrote. You could equivalently establish this binding in code, and in fact you pretty much have to today. But in WPF4 (which is now in beta), you can write a custom MarkupExtension to access the root of a Xaml document, using the new IRootObjectProvider service. Here’s the implementation:

public class XRoot : MarkupExtension
{
    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var rootProvider = serviceProvider.GetService(typeof(IRootObjectProvider)) as IRootObjectProvider;
        if (rootProvider == null)
            return null;

        return rootProvider.RootObject;
    }
}

The other parameterization on this MyRectangleStoryboard component is the EasingFunction. This is a custom property on MyRectangleStoryboard so that I can set it any time I use it. The implementation is just a DependencyProperty:

public partial class MyRectangleStoryboard : Storyboard
{
    public MyRectangleStoryboard()
    {
        InitializeComponent();
    }

    public EasingFunctionBase EasingFunction
    {
        get { return (EasingFunctionBase)GetValue(EasingFunctionProperty); }
        set { SetValue(EasingFunctionProperty, value); }
    }

    public static readonly DependencyProperty EasingFunctionProperty =
        DependencyProperty.Register("EasingFunction", typeof(EasingFunctionBase), typeof(MyRectangleStoryboard));

}

So in the end there’s three takeaways from this:

You can create powerful custom animation sets by subclassing Storyboard.
Xaml is a useful component definition language, it’s not just for controls.
In WPF4, Xaml markup extensions can get explicit access to the lexical root of the Xaml document.

TreeView and HierarchicalDataTemplate, Step-by-Step

MikeHillberg — Fri, 30 Oct 2009 19:40:00 GMT

I’ve never found TreeView to be terribly confusing by itself. But usually I want to data bind a TreeView to a collection with some hierarchy, which leads me to HierarchicalDataTemplate, which didn’t always just write itself for me. If you look at it in steps, though, there really is a pretty nice progression from ListBox to TreeView. Like a lot of my posts, this goes way too deep if you just want to create a quick TreeView. But it’s useful to look at it if you want the HierarchicalDataTemplate to just write itself …

First, start with the example of a simple ListBox:

<sys:String>Western Conference</sys:String>

<sys:String>Eastern Conference</sys:String>

</ListBox>

We can add a trivial ItemTemplate to it:

<ListBox.ItemTemplate>

</DataTemplate>

</ListBox.ItemTemplate>

<sys:String>Western Conference</sys:String>

<sys:String>Eastern Conference</sys:String>

</ListBox>

… and now the list box items are red.

A ListBox is an ItemsControl, and what ItemsControls like to do is wrap their items in a container (more on that here). So the above essentially becomes:

<ListBoxItem.ContentTemplate>

</DataTemplate>

</ListBoxItem.ContentTemplate>

</ListBoxItem>

<ListBoxItem Content="Western Conference"

ContentTemplate="{Binding ElementName=_template1}" />

</ListBox>

That is, for each item in the ListBox, a ListBoxItem is created. The ListBoxItem’s Content property is bound to the item, and the ListBoxItem’s ContentTemplate property is bound to the ListBox’s ItemTemplate.

On to TreeView …

A TreeView is also an ItemsControl; it generates TreeViewItem controls for its items. And actually, if you just take the original example and change “ListBox” to “TreeView”, it looks almost the same:

<sys:String>Eastern Conference</sys:String>

<sys:String>Western Conference</sys:String>

</TreeView>

You can similarly set an explicit item template:

<TreeView.ItemTemplate>

</DataTemplate>

</TreeView.ItemTemplate>

<sys:String>Western Conference</sys:String>

<sys:String>Eastern Conference</sys:String>

</TreeView>

The next step here caught be by surprise when I first saw it. The TreeView is going to create a TreeViewItem for each of its items (the two strings). A TreeViewItem is a HeaderedItemsControl, which is an ItemsControl (just like ListBox and TreeView), but also has a Header (and HeaderTemplate) property. (The Header is the part of the tree view item that you always see, right next to the expand/collapse button.) The Header/HeaderTemplate of a HeaderedItemsControl is analogous to the Content/ContentTemplate of a ContentControl. So, whereas the ListBox items were bound to each ListBoxItem’s Content property, in the TreeView case the items are bound to the TreeViewItem’s Header property. Similarly, the TreeView’s ItemTemplate property is bound to the TreeViewItem’s HeaderTemplate property. And in the end we essentially have:

<TreeViewItem.HeaderTemplate>

</DataTemplate>

</TreeViewItem.HeaderTemplate>

</TreeViewItem>

<TreeViewItem Header='Eastern Conference'

HeaderTemplate='{Binding ElementName=_template2}' />

</TreeView>

Now what we need is some hierarchy. Those items are the MLS conferences, and there’s supposed to be teams in those conferences. Here’s the full data:

var western = new Conference("Western")

{

Teams =

{

new Team("Club Deportivo Chivas USA"),

new Team("Colorado Rapids"),

new Team("FC Dallas"),

new Team("Houston Dynamo"),

new Team("Los Angeles Galaxy"),

new Team("Real Salt Lake"),

new Team("San Jose Earthquakes"),

new Team("Seattle Sounders FC"),

new Team("Portland 2011"),

new Team("Vancouver 2011")

}

};

var eastern = new Conference("Eastern")

{

Teams =

{

new Team("Chicago Fire"),

new Team("Columbus Crew"),

new Team("D.C. United"),

new Team("Kansas City Wizards"),

new Team("New York Red Bulls"),

new Team("New England Revolution"),

new Team("Toronto FC"),

new Team("Philadelphia Union 2010")

}

};

var league = new Collection<Conference>() { western, eastern };

DataContext = new

{

WesternConference = western,

EasternConference = eastern,

League = league

};

(Note that the DataContext now has this sample data.)

And now we can show all the teams with some explicit hierarchy:

<TreeViewItem Header='Western Conference'

ItemsSource="{Binding WesternConference.Teams}">

<TreeViewItem.ItemTemplate>

</DataTemplate>

</TreeViewItem.ItemTemplate>

</TreeViewItem>

<TreeViewItem Header='Eastern Conference'

ItemsSource="{Binding EasternConference.Teams}">

<TreeViewItem.ItemTemplate>

</DataTemplate>

</TreeViewItem.ItemTemplate>

</TreeViewItem>

</TreeView>

Of course, what you really want to do is bind the TreeView itself to the hierarchical collection (the League of the DataContext). I.e.:

As you can see, there’s two items, as you’d expect, just like a ListBox. Also just like a ListBox, it doesn’t show anything except for the ToString() of the Conference object. So we need to give it an ItemTemplate to show the conference Name:

<TreeView.ItemTemplate>

</DataTemplate>

</TreeView.ItemTemplate>

</TreeView>

Now, recall that the TreeView here is creating two TreeViewItems, binding the TreeViewItem’s Header to the Conference object, and setting the TreeViewItem’s HeaderTemplate to the TreeView’s ItemTemplate. Next question is, how do we get the TreeViewItem’s ItemsSource bound to Conference.Teams? That’s where the HierarchicalDataTemplate comes in.

A HierarchicalDataTemplate is a DataTemplate with some extra properties. But if you don’t use the extra properties, it’s no different than DataTemplate. For example, change the last markup from DataTemplate to HierarchicalDataTemplate, and nothing changes:

<TreeView.ItemTemplate>

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

But HierarchicalDataTemplate adds two key properties: ItemsSource and ItemTemplate. The ItemsSource gets mapped to the TreeViewItem.ItemsSource, and the ItemTemplate gets mapped to the TreeViewItem.ItemTemplate. So now we can show the conferences and the teams:

<TreeView.ItemTemplate>

<HierarchicalDataTemplate.ItemTemplate>

</DataTemplate>

</HierarchicalDataTemplate.ItemTemplate>

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

And if you want to show one level deeper in the hierarchy, you can change that team DataTemplate to a HierarchicalDataTemplate:

<TreeView.ItemTemplate>

<HierarchicalDataTemplate.ItemTemplate>

<HierarchicalDataTemplate.ItemTemplate>

</DataTemplate>

</HierarchicalDataTemplate.ItemTemplate>

</HierarchicalDataTemplate>

</HierarchicalDataTemplate.ItemTemplate>

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

</TreeView>

In the end, the bottom line that I keep in mind when I’m writing a HierarchicalDataTemplate, is that it’s the template for the TreeViewItem.Header, and it lets me set the TreeViewItem’s ItemsSource and ItemTemplate properties.

A Comparable DataTrigger

MikeHillberg — Tue, 30 Sep 2008 10:04:00 GMT

Property triggers today only check for equality. We’d like to add support for other comparison operators, but that hasn’t happened yet. But I needed them for a project, and wrote a workaround for it. It’s a bit hacky in a couple of places, but if you can get past that, it’s a handy way to simplify some coding.

Here’s a sample of what I ended up with:

The basics:

· You have to set the DataTrigger.Value to null. That’s the main hack.

· The supported comparison operators are GT, GTE, LT, LTE, and EQ.

· The comparand (“65” in the above example) is converted from string to the type of the target value (presumably Age is an int in the above example), using Compare.ChangeType or the target’s TypeConverter.

That’s all there is to use it. You have to remember to set DataTrigger.Value to null, otherwise it’s relatively straightforward.

And here’s the implementation:

// ComparisonBinding is a Binding that should be used in a DataTrigger.Binding.

// It supports a comparison operator and a comparand, so that you can use it as a

// conditional DataTrigger. The trick is to set {x:Null} as the DataTrigger.Value.

// E.g.:

// <DataTrigger Value={x:Null}

// Binding={h:ComparisonBinding Width, EQ, 100}"

// The operator can be EQ, LT, LTE, GT, GTE.

public class ComparisonBinding : Binding

{

// Default constructor

public ComparisonBinding()

: this(null, ComparisonOperators.EQ, null)

{

}

// Construction with an operator & comparand

public ComparisonBinding(string path, ComparisonOperators op, object comparand)

: base(path)

{

RelativeSource = RelativeSource.Self;

Comparand = comparand;

Operator = op;

Converter = new ComparisonConverter( this );

}

// Operator and comparand

public ComparisonOperators Operator { get; set; }

public object Comparand { get; set; }

}

// Supported types of comparisons

public enum ComparisonOperators

{

EQ = 0,

GT,

GTE,

LT,

LTE

}

// Thie IValueConverter is used by the StyleBinding to

// implement the logical comparisson. ConvertBack isn't supported.

// Convert returns null if the condition is met, non-null otherwise.

internal class ComparisonConverter : IValueConverter

{

// Keep a back reference to the StyleBinding

ComparisonBinding _styleBinding;

// Return this if the condition isn't met

static object _notNull = new Object();

// In construction, get a reference to the StyleBinding

public ComparisonConverter(ComparisonBinding styleBinding)

{

_styleBinding = styleBinding;

}

// IValueConverter.Convert

// Return null of the condition is met, non-null if not.

public object Convert(

object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

// Simple check for null

if (value == null || _styleBinding.Comparand == null)

{

return ReturnHelper( value == _styleBinding.Comparand );

}

// Convert the comparand so that it matches the value

object convertedComparand = _styleBinding.Comparand;

try

{

// Only support simple conversions in here.

convertedComparand = System.Convert.ChangeType(_styleBinding.Comparand, value.GetType());

}

catch (InvalidCastException)

{

// If Convert.ChangeType didn't work, try a type converter

TypeConverter typeConverter = TypeDescriptor.GetConverter(value);

if (typeConverter != null)

{

if (typeConverter.CanConvertFrom(_styleBinding.Comparand.GetType()))

{

convertedComparand = typeConverter.ConvertFrom(_styleBinding.Comparand);

}

// Simple check for the equality case

if (_styleBinding.Operator == ComparisonOperators.EQ)

{

// Actually, equality is a little more interesting, so put it in

// a helper routine

return ReturnHelper(

CheckEquals(value.GetType(), value, convertedComparand) );

}

// For anything other than Equals, we need IComparable

if (!(value is IComparable) || !(convertedComparand is IComparable))

{

Trace(value, "One of the values was not an IComparable");

return ReturnHelper(false);

}

// Compare the values

int comparison = (value as IComparable).CompareTo(convertedComparand);

// And return the comparisson result

switch (_styleBinding.Operator)

{

case ComparisonOperators.GT:

return ReturnHelper( comparison > 0 );

case ComparisonOperators.GTE:

return ReturnHelper( comparison >= 0 );

case ComparisonOperators.LT:

return ReturnHelper( comparison < 0 );

case ComparisonOperators.LTE:

return ReturnHelper( comparison <= 0 );

}

return _notNull;

}

// This helper produces the return value; null if the values

// match, non-null otherwise.

object ReturnHelper(bool result)

{

return result ? null : _notNull;

}

// Trace output to the debugger

void Trace(object value, string message)

{

if (Debugger.IsAttached)

{

Debug.WriteLine("StyleBinding couldn't convert '"

+ value.GetType()

+ "' to '"

+ _styleBinding.Comparand.GetType()

+ "'");

Debug.WriteLine("(" + message + ")");

}

// Check for equality of two values

private bool CheckEquals(Type type, object value1, object value2)

{

if (type.IsValueType || type == typeof(string))

{

return Object.Equals(value1, value2);

}

else

{

return Object.ReferenceEquals(value1, value2);

}

// IValueConverter.ConvertBack isn't supported.

public object ConvertBack(

object value,

Type targetType,

object parameter,

System.Globalization.CultureInfo culture)

{

throw new NotImplementedException();

}

Trying out Binding.StringFormat

MikeHillberg — Fri, 30 May 2008 00:15:00 GMT

StringFormat is a new property in .Net 3.5 SP1, which is currently in Beta. See Scott’s blog for more info on the beta.

When you bind data into a property on an element, it’s automatically type converted for you. For example, this markup:

<StackPanel.DataContext>

<sys:Int32>123</sys:Int32>

</StackPanel.DataContext>

</StackPanel>

… shows a TextBlock with the text “123”.

If you want to have more control over the conversion of the value during binding, you can write a value converter for it. For example, with this code:

public class TestConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter,

System.Globalization.CultureInfo culture)

{

return String.Format(culture, "Cost: {0:C}", value);

}

public object ConvertBack(object value, Type targetType, object parameter,

System.Globalization.CultureInfo culture)

{

throw new NotImplementedException();

}

… and this markup:

<StackPanel.Resources>

<local:TestConverter x:Key="testConverter" />

</StackPanel.Resources>

<StackPanel.DataContext>

<sys:Int32>123</sys:Int32>

</StackPanel.DataContext>

</StackPanel>

… my TextBlock shows “Cost: $123.00”.

The New StringFormat Property

That’s great, but it’s too bad that you have to write a value converter to get that. To make it simpler, we’ve added the StringFormat property to Binding, which causes the value to be run through, not surprisingly, the String.Format method.

So, the above can now be accomplished with this markup, and no code:

<StackPanel.DataContext>

<sys:Int32>123</sys:Int32>

</StackPanel.DataContext>

</StackPanel>

If you just want to add the format specifier, e.g. just “{0:C}” rather than “Cost: {0:C}”, there’s nothing unusual if you’re in code, but in Xaml the syntax gets confused with the markup extension syntax. That is, a property value that starts with a “{“ (as the first character) is interpreted to be a markup extension, such as {Binding}, {DynamicResource}, {x:Null}, etc. The way to really have a “{“ as the first character of a property value is to escape it with a “{}”, so the above example becomes:

Not Just on Bindings

StringFormat shows up on some controls too. For example, just like ContentControl (the base class of Button) lets you template your content with the ContentTemplate property, you can now format your content with the ContentFormatString property, such as:

<sys:Int32>123</sys:Int32>

</Button>

The ContentStringFormat property is available on ContentControl, ContentPresenter, and TabControl.

There’s an analogous HeaderStringFormat for HeaderedContentControl, GridViewColumn, GroupStyle, and HeaderedItemsControl. Again, these are all cases where there is an analogous HeaderTemplate property.

Finally, there’s an ItemStringFormat on ItemsControl (the base class for ListBox) that allows you to format items. For example, this produces a ListBox with two entries, “1,234.00” and “5,6789.00”:

<sys:Int32>1234</sys:Int32>

<sys:Int32>5678</sys:Int32>

</ListBox>

Multi Bindings

All of the examples so far reference the bound value with some form of “{0}”, which is the zero-th index into the array of sources. With a MultiBinding, you can actually get more than one input. For example, the following has a TextBlock that composes the value in two other TextBlocks (in a real-world example, those would probably be TextBox’s for user input):

<TextBlock Name="Last">Flintstone</TextBlock>

<TextBlock.Text>

</MultiBinding>

</TextBlock.Text>

</TextBlock>

This produces “Name: Flintstone, Fred”.

Culture

All of the examples so far have been in US English (“en-US”). But you can pick the culture for StringFormat, the same way that you pick culture for the Binding.Converter property. That is, you can set it explicitly on the Binding, as in:

… which gives me “123.00” (note the period for the decimal separator), or as in:

… which gives me “123,00” (note the comma for the decimal separator).

Or you can specify it on the element in the Language property, as in:

</StackPanel>

As an aside, note that the xml:lang attribute is mapped to the Language property. So the above is equivalent to:

</StackPanel>

More Samples

Finally, see Lester’s post for more StringFormat examples.

Model-see, Model-do, and the Poo is Optional

MikeHillberg — Thu, 22 May 2008 01:05:00 GMT

Like a lot of people, I’ve developed software professionally for a lot of different environments: PC systems and embedded systems; high- and low-level languages; kernel mode, user mode, real mode, and protected mode; system services; domain controllers; bootstrappers; image processors; a debugger; a compiler; a search engine; small systems and really big systems; file systems; COM; real-time and internet time. I’ve never quite developed professionally for a mainframe, but I’ve worked on clients for mainframe services, and I sat next to a guy that wrote the services (I also sat next to a guy once who would only use a Commodore 64).

But I’ve been spending the last bunch of years helping to create WPF and Silverlight. So in a model/view world, I look at a lot of things from the View point of view. And from that point of view, you come to realize that all computer applications are really just data visualization applications. There’s certainly other software – services, device drivers, pi calculators (I’m still waiting for that one to respond) – but end-user applications are all about data viz.

Except that’s not quite the right, because you don’t just visualize data; you manipulate it too. E.g. Netflix.com lets me both see and modify my queue. And the word “data” isn’t great either, because it makes you think just of the bits stored in a database. So that got me to all applications being some form of “model visualization and manipulation”.

That doesn’t roll of the tongue either though. So now I just consider all applications to be a case of “model see model do”. Which makes me a code monkey.

Models, Views, and Poo

As for models and views, in my current View point of view, there’s always a view, and there’s optionally some amount (and maybe a large amount) of model. The view visualizes the model, and the end-user interacts with that visualization, which propagates back as changes to the model.

A lot of simple apps just need a view – a bunch of UI controls created in Xaml, with event handlers hooked up to some code-behind logic. But I usually end up splitting up my application logic into some model objects and a view object, with the controls in the view bound to model properties.

For more complex applications, you could have a more complicated view. But then you can’t change the look of your application easily, and views are more difficult to test. The solution to that is more sophisticated models. I like the Model/View/ViewModel approach (MVVM), which is similar to the Model/View/Presenter (MVP) pattern.

But I think it’s really useful to be able to pick the right number of layers and sophistication behind my view as is appropriate for the application; it’s all just some form of model in the end. Dr. WPF and Josh Smith talk about this too. Dr. WPF put a name on this agnosticism towards the particular model – Model/View/Poo. I like it. (There’s a joke in there somewhere about code monkeys and poo.)

Another thing I find interesting about the layers of models is that we continue to work to narrow the gap between the model and the view, by making the model more view-friendly:

· For example, tools generate classes with IEditableObject implementations, which enables view controls to perform cancelable updates to the model objects.

· For example, Linq makes it easier to convert data sources into objects, or to re-shape existing objects into objects more appropriate for the view.

Similarly, we’re making the view more model-friendly:

· For example, it’s easy to bind to any model object, or to lists of objects, or to find visualizations for model objects, etc.

· For example, the CollectionView class provides built-in support for the classic problem of synchronizing two parts of the view, such as the master list and the details pane.

Updates to the Model, from the View, in Xaml

Along the general lines of the “model do” side of things, it’s common to hook events in the view and write code to update the model, or to define commands in the model that are invoked by e.g. buttons in the view. As an experiment, I played with one way of somewhat marrying the two approaches – allow the view to phrase a model method in the form of a command.

The example is a view that’s bound to a File object; the view shows the file name, but as TextBox so that you can change the name. When you click the “Rename” button, it fires a command which calls the Rename method on the File object with the new name from the TextBox.

I.e., here’s the File object, which just has a Name property and a Rename method:

public class File : INotifyPropertyChanged

{

string _name;

public string Name

{

get { return _name; }

set

{

_name = value;

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs("Name"));

}

public void Rename(string newName)

{

// Perform the file rename here

}

public event PropertyChangedEventHandler PropertyChanged;

}

… here’s some sample data getting hooked up as the DataContext:

public Window1()

{

InitializeComponent();

DataContext = new File() { Name = "TestName" };

}

… and here’s the view, which has a TextBox and a Button, a command on the Button that calls the Rename method, and the argument to the Rename coming from the TextBox:

<Button.Command>

<mc:MethodCommand MethodName="Rename">

<mc:MethodArgument Value="{Binding Text, ElementName=_renameTextBox}" />

</mc:MethodCommand>

</Button.Command>

</Button>

</StackPanel>

The key here is that when the Button is clicked, the MethodCommand is invoked. That MethodCommand calls the Rename method on the File object, passing in the current value of the TextBox as the newName parameter. The File object is picked up by the MethodCommand by inheriting the DataContext.

The rest of this post is the MethodCommand implementation. The reason I made the MethodCommand class and the Arguments property of type Freezable was so that the bindings would be fully functional (so that the DataContext would inherit, and so that ElementName bindings could work).

(I haven’t tested this on Commodore 64 yet.)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows.Input;

using System.Windows;

using System.Reflection;

using System.Collections;

using System.Windows.Data;

using System.ComponentModel;

using System.Windows.Markup;

namespace MethodCommandNS

{

[ContentProperty("Arguments")]

public class MethodCommand

: Freezable, // Enable ElementName and DataContext bindings

ICommand,

INotifyPropertyChanged

{

// The name of the method to call on Invoke

public string MethodName { get; set; }

// When this is set, exceptions during invoke are caught, and the exception

// is set as the Exception property

[DefaultValue(true)]

public bool CatchExceptions { get; set; }

// If there is an exception during a command invoke, and CatchExceptions

// is set, this will have the exception object.

public Exception Exception

{

get { return _exception; }

private set

{

_exception = value;

FirePropertyChanged("Exception");

}

Exception _exception;

// This holds the arguments to be passed to the method.

// This is Freezable so that the DataContext and ElementName bindings

// can work correctly.

public FreezableCollection<MethodArgument> Arguments

{

get { return (FreezableCollection<MethodArgument>)GetValue(ArgumentsProperty); }

}

public static readonly DependencyProperty ArgumentsProperty =

DependencyProperty.Register("Arguments", typeof(FreezableCollection<MethodArgument>), typeof(MethodCommand), null);

// This is a private DP that's used to get the inherited DataContext

// (see it used in the MethodCommand constructor).

private static readonly DependencyProperty ElementDataContextProperty =

DependencyProperty.Register("ElementDataContext", typeof(object), typeof(MethodCommand), null);

// The Target property specifies the object on which to invoke the method.

// If this is null, invoke the method on the DataContext

public object Target

{

get { return (object)GetValue(TargetProperty); }

set { SetValue(TargetProperty, value); }

}

public static readonly DependencyProperty TargetProperty =

DependencyProperty.Register("Target", typeof(object), typeof(MethodCommand), null);

// Constructor

public MethodCommand()

{

// The Arguments property is read-only and never null

SetValue(ArgumentsProperty, new FreezableCollection<MethodArgument>());

// Set a default Binding onto the private ElementDataContextProperty.

// A default binding just binds to the inherited DataContext. This is how

// MethodCommand typically gets the object on which to invoke the method.

BindingOperations.SetBinding(

this,

ElementDataContextProperty,

new Binding());

// By default, catch exceptions that are raised by the method.

CatchExceptions = true;

}

// Fire the PropertyChanged event when the Exception property changes.

public event PropertyChangedEventHandler PropertyChanged;

void FirePropertyChanged(string propertyName)

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

}

// We need to implement this method because we're a Freezzable subtype.

protected override Freezable CreateInstanceCore()

{

throw new NotImplementedException();

}

// Implement the CanExecute members of ICommand

public event EventHandler CanExecuteChanged;

public bool CanExecute(object parameter)

{

// We'll always be enabled to be invokes.

return true;

}

// ICommand.Execute implementation. This version calls ExecuteImpl, which does the

// the actual call. But this method wraps that call in a try/finally, depending on

// the value of CatchExceptions.

public void Execute(object parameter)

{

// Clear out any exception of a former invocation.

Exception = null;

if (CatchExceptions)

{

// Invoke the method in a try/finally

try

{

ExecuteImpl(parameter);

}

catch (Exception e)

{

// Any exceptions will likely come back as a

// TargetInvocationException, but the original exception

// is more interesting.

if (e is TargetInvocationException)

{

if (e.InnerException != null)

Exception = e.InnerException;

else

Exception = e;

}

else

Exception = e;

}

// Otherwise, CatchExceptions isn't set, so just forward the call

else

{

ExecuteImpl(parameter);

}

// ExecuteImpl is where we actually invoke the method.

void ExecuteImpl(object parameter)

{

// See if the Target property is set

object target = Target;

if (target == null)

{

// If not, look for an inherited DataContext

target = GetValue(ElementDataContextProperty);

}

// We must have a target, either from Target or DataContext

if (target == null)

{

throw new InvalidOperationException("MethodCommand target not found (must set either Target or DataContext)");

}

// Get the method to be called. Note that this doesn't support

// overloaded methods, but it could be updated to do so.

MethodInfo methodInfo = target.GetType().GetMethod(MethodName);

if (methodInfo == null)

{

throw new InvalidOperationException("Method '" + MethodName + "' couldn't be found on type '" + target.GetType().Name + "'");

}

// Copy the Arguments to an array

object[] arguments = new object[Arguments.Count];

for (int i = 0; i < Arguments.Count; i++)

arguments[i] = Arguments[i].Value;

// Invoke the method

methodInfo.Invoke(target, arguments);

}

// The MethodArgument class plugs into MethodCommand.Arguments

public class MethodArgument

: Freezable // Enable ElementName and DataContext bindings

{

public MethodArgument() { }

// The value of a method argument

public object Value

{

get { return (object)GetValue(ValueProperty); }

set { SetValue(ValueProperty, value); }

}

public static readonly DependencyProperty ValueProperty =

DependencyProperty.Register("Value", typeof(object), typeof(MethodArgument), null);

// We need to implement this method since we are a subtype of Freezable. But since

// we don't need to support cloning, we won't implement it.

protected override Freezable CreateInstanceCore()

{

throw new NotImplementedException();

}

Binding to anonymous types in an Xbap or Silverlight application

MikeHillberg — Mon, 05 May 2008 19:56:00 GMT

It's easy to use Linq queries to create objects, and to use {Binding}s to bind properties of those objects into your view. If you're doing this for an application that will run as an Xbap ("WPF Browser Application") or as a Silverlight app, just note that you need to generate nominal types rather than anonymous types.

For example, say you have a bound ListBox like:

<ListBox.ItemTemplate>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

... where the ListBox ItemsSource is established with the following code at initialization-time:

public partial class Window1 : Window

{

private Collection<Person> _collection = new Collection<Person>()

{

new Person() { FirstName = "John", LastName = "Doe" },

new Person() { FirstName = "Jane", LastName = "Doe" },

new Person() { FirstName = "Fred", LastName = "Flinstone" }

};

public Window1()

{

InitializeComponent();

ListBox1.ItemsSource = from person in _collection

where person.LastName == "Doe"

select new { First = person.FirstName, Last = person.LastName };

}

This won’t show anything in the ListBox. (You might see debug output like “System.Windows.Data Error: 12 : Cannot get 'First' value (type 'String') from '' (type '<>f__AnonymousType0`2')”).

The issue here is that the select statement in the query (select new { First = person.FirstName, Last = person.LastName }) generates an internal (anonymous) type, and with an Xbap or Silverlight app you can’t bind to internal types. The solution is to use a nominal type. E.g., add this class definition:

public class SelectedPerson

{

public string First { get; set; }

public string Last { get; set; }

}

... and use it in the select:

ListBox1.ItemsSource = from person in _collection

where person.LastName == "Doe"

select new SelectedPerson { First = person.FirstName, Last = person.LastName };

... and your list box is populated with “John” and “Jane”.

Where does a Binding find its data?

MikeHillberg — Mon, 14 May 2007 20:04:00 GMT

If you’ve look at much WPF Xaml you’ve probably seen bindings like this:

… which binds the Text property of the TextBlock to the Name property of some data object.

The question that begets is: where does the data come from? The rest of this post looks at the answer.

Properties on Binding

The Binding class has a few properties that provide ways to let you set the source of the data onto the Binding, depending on what works best for your situation. Binding looks like this:

public class Binding : BindingBase

{

...

public object Source { get; set; }

public string ElementName { get; set; }

public RelativeSource RelativeSource { get; set; }

...

}

The Source Property

The most straightforward way to set the source of the Binding is to use the Source property. One of the more common ways to do that is to reference the data out of a resource dictionary:

<Grid>

<Grid.Resources>

</Grid.Resources>

</Grid>

(This example creates a ListBox with 3 entries in it, labeled “1”, “2”, and “3”.)

You can be even more explicit by setting the Source directly, specifying the Binding in full Xml syntax (rather than the above markup extension syntax):

<Grid>

<ListBox.ItemsSource>

<Binding.Source>

</Binding.Source>

</Binding>

</ListBox.ItemsSource>

</ListBox>

</Grid>

You can also set the Binding.Source by referencing a static member:

namespace MyNamespace

{

class MyClass

{

public static List<int> MyData;

static MyClass()

{

MyData = new List<int>();

MyData.Add(1);

MyData.Add(2);

MyData.Add(3);

}

…

<Page

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

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

xmlns:my="clr-namespace:MyNamespace" >

</Page>

The ElementName Property

Aside from the Binding.Source property, you can also reference your data by name, using Binding.ElementName, such as:

</StackPanel>

(This example causes the button label to be whatever you type into the text box.)

The RelativeSource Property

The RelativeSource property provides a way to tell the Binding to look around where it’s used to find its source. For example, the ‘Self’ RelativeSource binds to the object on which the Binding is placed, such as in the following (which creates a TextBlock that says “Hi”):

As another example, the following binds the TextBlock.Text property to the Grid in its ancestry (again displaying “Hi” in this case):

<TextBlock

Text='{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType=Grid}}' />

</Border>

</Grid>

The other two modes of a RelativeSource are TemplatedParent and PreviousData.

Explicit DataContext Property

A common way the Binding can get its source is via a DataContext property set on an element (on the element itself, not on the Binding). For (a rather boring) example, this creates a Button that says “Click”:

<Button.DataContext>

<sys:String>Click</sys:String>

</Button.DataContext>

</Button>

This gets more interesting and typical if you set the DataContext somewhere else, usually on the root of the page/window. That works because the DataContext property inherits. The following example shows that by setting the DataContext onto the root. In this case, it is set to be an XmlDataProvider which is querying a Yahoo web service for the weather in Barrow, Alaska. Since the DataContext inherits, Bindings throughout the page have access to it automatically. Note also in this case that since we’re binding to XML, the Bindings are using XPath syntax.

<Page

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

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

<Page.DataContext>

<XmlDataProvider

Source="http://xml.weather.yahoo.com/forecastrss?p=99723"

XPath="/rss/channel"/>

</Page.DataContext>

<Border BorderBrush="Black"

BorderThickness="1" Width="370" Height="170" CornerRadius="6">

<Image Margin="15,15,0,0"

Stretch="None"

HorizontalAlignment="Left"

Source="{Binding XPath=image/url}" />

<!-- Text to say e.g. "Yahoo! Weather - Bellevue, WA", with a hyperlink to a

detailed weather page -->

</Hyperlink>

</TextBlock>

<TextBlock FontWeight="Bold" Margin="15,15,0,0"

Text="{Binding XPath=item[1]/title}"/>

<TextBlock.Text>

<Binding.XPath>

item[1]/*[local-name()="condition" and

namespace-uri()="http://xml.weather.yahoo.com/ns/rss/1.0"]/@text

</Binding.XPath>

</Binding>

</TextBlock.Text>

</TextBlock>,

<TextBlock.Text>

<Binding.XPath>

item[1]/*[local-name()="condition" and

namespace-uri()="http://xml.weather.yahoo.com/ns/rss/1.0"]/@temp

</Binding.XPath>

</Binding>

</TextBlock.Text>

</TextBlock>°

<TextBlock.Text>

<Binding.XPath>

*[local-name()="units" and

namespace-uri()="http://xml.weather.yahoo.com/ns/rss/1.0"]/@temperature

</Binding.XPath>

</Binding>

</TextBlock.Text>

</TextBlock>

Sunrise:

<TextBlock.Text>

<Binding.XPath>

*[local-name()="astronomy" and

namespace-uri()="http://xml.weather.yahoo.com/ns/rss/1.0"]/@sunrise

</Binding.XPath>

</Binding>

</TextBlock.Text>

</TextBlock>, sunset:

<TextBlock.Text>

<Binding.XPath>

*[local-name()="astronomy" and

namespace-uri()="http://xml.weather.yahoo.com/ns/rss/1.0"]/@sunset

</Binding.XPath>

</Binding>

</TextBlock.Text>

</TextBlock>

</StackPanel>

</Border>

</Page>

… Sunrise at midnight, sunset at noon:

Implicit DataContext

Finally, there are a couple of places where the DataContext gets set automatically for you. That usually happens with ContentControl (e.g. Button) and ItemsControl (e.g. ListBox).

Here’s a ContentControl example. In this markup we have a DataTemplate set up in a ResourceDictionary so that it will be used for any ContentControl that has a String as its content. So it’s automatically picked up in the subsequent Button. In that DataTemplate, we have a binding to the data item, which in this case is the ContentControl.Content. Therefore what we get here is a Button that says “Click” in bold italic.

<Page

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

<Page.Resources>

<!-- The Text property is bound to the Content property of

whatever ContentControl with which this DataTemplate is used -->

</DataTemplate>

</Page.Resources>

<Button>Click</Button>

</Page>

And here’s an ItemsControl example. In this markup, we have a ListBox bound to an integer collection again (using the inherited DataContext as the source), but this time we have an item template, which is a template to use when displaying the items in the ListBox. And within that item template, the DataContext is again automatically set to be the item

<Page

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

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

<Page.DataContext>

</Page.DataContext>

<ListBox.ItemTemplate>

<DataTemplate.Triggers>

<!-- Within the DataTemplate, the DataContext is set to be the data item.

So this DataTrigger.Binding property's DataContext is going to be

the item (1, 2, or 3) -->

</DataTrigger>

</DataTemplate.Triggers>

</Border>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Page>