Data See, Data Do : Tips and Tricks

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.

Implementing SelectedValue with the Silverlight ComboBox

MikeHillberg — Fri, 27 Mar 2009 05:53:00 GMT

Here’s the scenario … You have a Customers collection and an Orders collection. In the Orders collection, an Order has a CustomerID property; this is the key to an item in the Customers collection. Your goal is a ComboBox that updates the CustomerID property of a Customer, but interacts with the end user in terms of customer names. If that doesn’t make sense, code & pictures help …

Here’s how you can accomplish this in markup in WPF (the l:Collection here is just a Collection<object>):

<Grid>

<Grid.Resources>

<l:Collection x:Key="Customers">

<l:Customer ID="1" CustomerName="Wilma" />

<l:Customer ID="2" CustomerName="Betty" />

<l:Customer ID="3" CustomerName="Fred" />

<l:Customer ID="4" CustomerName="Barney" />

</l:Collection>

<l:Collection x:Key="Orders">

<l:Order Description="Magic carpet" CustomerID="1" />

<l:Order Description="Blue suede shoes" CustomerID="4" />

<l:Order Description="Hanna Montana wig" CustomerID="1" />

</l:Collection>

</Grid.Resources>

</StackPanel>

<ComboBox ItemsSource="{StaticResource Customers}"

SelectedValuePath="ID"

SelectedValue="{Binding Text, ElementName=TextBlock1}"

DisplayMemberPath="CustomerName" />

</StackPanel>

</Grid>

More on that ComboBox after these pictures,

Initially we get this:

… and here I am opening the ComboBox, and changing the customer to Betty (her CustomerID is 2):

So that changed the “Customer ID” from 1 to 2, but I (the end user) interacted only with customer names via the ComboBox.

Now let’s analyze that ComboBox markup:

<ComboBox ItemsSource="{StaticResource Customers}"

SelectedValuePath="ID"

SelectedValue="{Binding Text, ElementName=TextBlock1}"

DisplayMemberPath="CustomerName" />

The ItemsSource is set to the Customers list. So when you open the ComboBox, you’ll see customers. Specifically, for each customer in that list, you’ll see the Customer.CustomerName, because the DisplayMemberPath is set to the “CustomerName” property.

Now whatever is selected in the ComboBox, I want it to show up in TextBlock1. If I just bind SelectedItem to TextBlock1, I’d be sending the whole Customer object over, but really I just want the TextBlock.Text to show the Customer.CustomerID. So, instead of binding SelectedItem to the TextBlock, I bind SelectedValue. SelectedValue behaves the same as SelectedItem, though, until you set a SelectedValuePath. When you set SelectedValuePath, then SelectedValue becomes that path into the SelectedItem. For example, if your SelectedItem is a Customer, and your SelectedValuePath is “ID”, then SelectedValue is going to be Customer.ID, which is just what we want.

(Note in this example I defaulted TextBlock1.Text to ‘1’. Otherwise the SelectedValue binding gets confused. Alternatively, I could have set the Binding.Mode to ‘OneWayToSource’.)

Next let’s do this with the Silverlight ComboBox, because it doesn’t have the SelectedValue or SelectedValuePath properties. But we can still get it to work with a little bit of code.

Update: The Silverlight 4 Beta does now have SelectedValue and SelectedValuePath properties.

Change the markup to this:

<ComboBox ItemsSource="{StaticResource Customers}"

DisplayMemberPath="CustomerName"

SelectionChanged="ComboBox_SelectionChanged" />

… and write a little code:

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

var comboBox = sender as ComboBox;

TextBlock1.Text = (comboBox.SelectedItem as Customer).ID.ToString();

}

It’d be nice if we could do this all in markup, though, and in fact there have been some posts on the Silverlight forums to do just that with a Binding value converter. Also, I wish I could have this feature on a TextBlock too, not just on ComboBox. So below is a handy value converter that can be used with a Binding. (I created this on the Silverlight 3 beta, but most of this is applicable to Silverlight 2 as well.) The idea of this is to mimic the ComboBox mechanism. First, here’s an example of the converter being created:

<Grid.Resources>

<l:Collection x:Key="Customers">

...

</l:Collection>

<l:Collection x:Key="Orders">

...

</l:Collection>

<l:ValueToItemConverter x:Key="CustomerID2Name"

ItemsSource="{StaticResource Customers}"

ValuePath="ID"

DisplayMemberPath="CustomerName" />

</Grid.Resources>

… notice that it looks much like the ComboBox. The only thing it doesn’t have is a counterpart to the SelectedValue property, because the value is what comes into the IValueConverter methods. Now let’s use it in a trivial master/detail:

<Grid >

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ListBox.ItemTemplate>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

<StackPanel Grid.Column="1"

DataContext="{Binding SelectedItem, ElementName=ListBox1}">

<TextBlock Text="{Binding CustomerID,

Converter={StaticResource CustomerID2Name}}" />

</StackPanel>

</Grid>

… which gives us this (here I’ve selected the first order):

The key here is that in the detail, rather than showing CustomerID 1 from the Order, we see “Wilma”.

And finally, here’s an example using this value converter in the column of a DataGrid. Again, the items are Orders, and the column shows a CustomerID as a CustomerName, using a TextBlock when the cell isn’t being edited, and as a ComboBox when it is.

First, create a version of the value converter that doesn’t have DisplayMemberPath set (because ComboBox has its own DisplayMemberPath property):

<l:ValueToItemConverter x:Key="CustomerID2Customer"

ItemsSource="{StaticResource Customers}"

ValuePath="ID" />

… and then the DataGrid itself:

<d:DataGrid AutoGenerateColumns="False"

ItemsSource="{StaticResource Orders}">

<d:DataGrid.Columns>

<d:DataGridTextColumn Binding="{Binding Description}" />

<d:DataGridTemplateColumn>

<d:DataGridTemplateColumn.CellTemplate>

<TextBlock Text="{Binding CustomerID,

Converter={StaticResource CustomerID2Name}}"

Margin="4"/>

</DataTemplate>

</d:DataGridTemplateColumn.CellTemplate>

<d:DataGridTemplateColumn.CellEditingTemplate>

<ComboBox

DisplayMemberPath="CustomerName"

ItemsSource="{StaticResource Customers}"

SelectedItem="{Binding CustomerID, Mode=TwoWay,

Converter={StaticResource CustomerID2Customer}}" />

</DataTemplate>

</d:DataGridTemplateColumn.CellEditingTemplate>

</d:DataGridTemplateColumn>

</d:DataGrid.Columns>

</d:DataGrid>

An ICommand with IsEnabled

MikeHillberg — Tue, 24 Mar 2009 08:13:00 GMT

ICommand is a simple interface with three members – Execute, CanExecute, and CanExecuteChanged (more on those here). You can write your own implementations of that interface, one for each command, but that gets a bit heavyweight. So there are several implementations of ICommand that are pluggable and re-usable, like DelegateCommand, RelayCommand, and RoutedCommand.

One tricky part of implementing ICommand is the CanExecuteChanged event, because you have to know when to raise it. (The easy alternative is to raise it whenever the CommandManager.RequerySuggested event is raised, but you need to use that with caution, because it can happen frequently and get expensive.)

Really, though, CanExecute and CanExecuteChanged look like a typical Foo/FooChanged property/event pair that we use in data binding. The reason that CanExecute isn’t actually a property, though, is that it takes an optional parameter. But if you’re not using that parameter, a property would work just as well.

So I’ve been playing with an ICommand implementation that takes a delegate for the Execute method (just like DelegateCommand and RelayCommand), but also has an IsEnabled property that wraps CanExecute/CanExecuteChanged. And since it’s all a DependencyObject, you can put a binding on IsEnabled.

I wasn’t sure what to call it though. The key is that it has an IsEnabled property, but DelegateCommandWithIsEnabled didn’t sound good. And it turns out that Enabled-able isn’t a word. The closest thing I could come up with that had “able” in it was AbilityCommand. Good enough for a blog post.

Anyway, here’s what the public members look like:

public class AbilityCommand : DependencyObject, ICommand

{

public AbilityCommand(

Action<object> executeDelegate,

Binding isEnabledBinding );

public AbilityCommand( Action<object> executeDelegate )

: this( executeDelegate, null ) { }

public bool IsEnabled {get; set; }

public static readonly DependencyProperty IsEnabledProperty ...;

}

Note that you can set IsEnabled however you want, including with a binding, and in fact the constructor lets you pass in the Binding to use. AbilityCommand’s ICommand.CanExecute simply returns IsEnabled. And any time IsEnabled’s value changes, AbilityCommand raises ICommand.CanExecuteChanged.

And here it is in practice. In this snippet, the (View)Model object is the first page of a wizard-type view (with a “Next” button on it). The SubmitCommand property binds the command’s IsEnabled to the object’s IsValid property:

public class FirstPage : INotifyPropertyChanged

{

public FirstPage()

{

SubmitCommand = new AbilityCommand(

(x) => OnSubmit(),

new Binding("IsValid") { Source=this } );

}

public ICommand SubmitCommand { get; private set; }

private void OnSubmit()

{

// ...

}

// INotifyPropertyChanged fires for this IsValid property if

// either the "FirstProperty" or "SecondProperty" property is updated

public bool IsValid

{

get

{

return !String.IsNullOrEmpty(FirstProperty)

&& !String.IsNullOrEmpty(SecondProperty);

}

And finally, here’s the whole AbilityCommand:

public class AbilityCommand : DependencyObject, ICommand

{

Action<object> _executeDelegate;

public AbilityCommand( Action<object> executeDelegate )

: this( executeDelegate, null ) { }

public AbilityCommand(

Action<object> executeDelegate,

Binding isEnabledBinding )

{

_executeDelegate = executeDelegate;

if( isEnabledBinding != null )

BindingOperations.SetBinding(this, IsEnabledProperty, isEnabledBinding);

}

void ICommand.Execute(object parameter)

{

_executeDelegate(parameter);

}

bool ICommand.CanExecute(object parameter)

{

return IsEnabled;

}

public event EventHandler CanExecuteChanged;

private void RaiseCanExecuteChanged()

{

if( CanExecuteChanged != null )

CanExecuteChanged( this, new EventArgs() );

}

public bool IsEnabled

{

get { return (bool)GetValue(IsEnabledProperty); }

set { SetValue(IsEnabledProperty, value); }

}

public static readonly DependencyProperty IsEnabledProperty =

DependencyProperty.Register("IsEnabled", typeof(bool), typeof(AbilityCommand),

new PropertyMetadata(OnIsEnabledChanged));

static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)

{

(d as AbilityCommand).RaiseCanExecuteChanged();

}

A master/detail view with navigation

MikeHillberg — Fri, 09 Jan 2009 21:50:00 GMT

I don’t remember what got me thinking about it, but somewhere along the line I wanted a master/detail view with a navigation bar. E.g., when you change selection in the master view, you can navigate back to the previous selection.

Here’s an example (here my selection started on “Wilma”, then I changed it to “Fred”, which is why the Back button of the navigation bar is enabled):

It looks like a Frame, and it is, but I just used the Frame for its navigation UI and its journaling functionality; I didn’t put anything (visible anyway) into the Content of the Frame.

Here’s the basic markup for the above Window sample:

<navbar:NavigationBar

JournaledValue="{Binding SelectedItem, ElementName=_listBox, Mode=TwoWay}"

NavigationUIVisibility="Visible"/>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ListBox.ItemTemplate>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

...

</Grid>

</StackPanel>

What does this do? The NavigationBar control has the navigation UI (forward/backward button). It also journals whatever you put in the JournaledValue property. That means:

If you change NavigationBar.JournaledValue, the old value will be added to the navigation service’s “BackStack”, and the Back button will become enabled.
If you then click on the Back button, NavigationBar.JournaledValue will be restored to its previous value.

So the way the properties are bound in this example, if the ListBox.SelectedItem changes, the old value gets journaled by the NavigationBar. If you then click the Back button, the ListBox.SelectedItem gets restored to that previous value. And of course, in the full example, the details view is similarly bound to the ListBox.SelectedItem, so it updates as well.

The NavigationBar control just has a couple of properties and a default ControlTemplate. The properties are JournaledValue (which drives, and is driven by, the navigation bar UI), and NavigationUIVisibility (Automatic, Visible, or Hidden). Here’s the control code:

public class NavigationBar : Control

{

static NavigationBar()

{

DefaultStyleKeyProperty.OverrideMetadata(

typeof(NavigationBar),

new FrameworkPropertyMetadata(typeof(NavigationBar)));

}

// The JournaledValue property is the value that controls the navigation bar UI.

public object JournaledValue

{

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

set { SetValue(JournaledValueProperty, value); }

}

public static readonly DependencyProperty JournaledValueProperty =

DependencyProperty.Register("JournaledValue", typeof(object), typeof(NavigationBar));

// The NavigationUIVisibility property is aliased to the

// Frame.NavigationUIVisibility property.

public NavigationUIVisibility NavigationUIVisibility

{

get { return (NavigationUIVisibility)GetValue(NavigationUIVisibilityProperty); }

set { SetValue(NavigationUIVisibilityProperty, value); }

}

public static readonly DependencyProperty NavigationUIVisibilityProperty =

Frame.NavigationUIVisibilityProperty.AddOwner(typeof(NavigationBar));

}

The NavigationBar’s ControlTemplate simplify forwards everything to a Frame. Frame has the UI for the navigation controls, and journals its Content property. So for journaling, I just bound the NavigationBar.JournaledValue to Frame.Content, and Frame takes care of the rest. (Note that NavigationBar.NavigationUIVisibility is also bound to the corresponding property on Frame.) The only trick is, I didn’t want the JournaledValue to actually get displayed by the Frame, so I put an empty ContentTemplate on it. This leads to:

<Frame NavigationUIVisibility

='{TemplateBinding local:NavigationBar.NavigationUIVisibility}'

Content='{Binding JournaledValue,

RelativeSource={RelativeSource TemplatedParent},

Mode=TwoWay}'

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" >

<!-- Don't show the frame content, we're just using Frame

for it's navigation UI and journaling -->

<Frame.ContentTemplate>

</Frame.ContentTemplate>

</Frame>

</ControlTemplate>

That’s it for the NavigationBar control. Here’s the rest of the sample app too. For the details view, I used an ItemsControl to list the “fields” of the selected object, where each field is a HeaderedContentControl. To get the right look, I then templated HeaderedContentControl. Easier to show the markup. First, the sample data:

<Window.DataContext>

<x:Array Type="local:Person">

<local:Person FirstName="Wilma" LastName="Flintstone" Age="41" />

<local:Person FirstName="Fred" LastName="Flintstone" Age="42" />

<local:Person FirstName="Betty" LastName="Rubble" Age="36" />

<local:Person FirstName="Barney" LastName="Rubble" Age="35" />

</x:Array>

</Window.DataContext>

… and then the details view:

<ItemsControl

DataContext="{Binding SelectedItem, ElementName=_detailsView}"

Grid.IsSharedSizeScope="True"

Grid.Column="1"

Margin="5" >

<!-- Create a HeaderedContentControl template to display each item

as "Label: Value", e.g. "Age: 42" -->

<ItemsControl.Resources>

<Setter.Value>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition SharedSizeGroup="FirstColumn"

Width="Auto" />

</Grid.ColumnDefinitions>

<TextBlock Text="{TemplateBinding Header}" Grid.Column="0"

Margin="0,0,5,0" FontWeight="Bold"/>

<TextBlock Text="{TemplateBinding Content}" Grid.Column="1"

Margin="0,0,5,0"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ItemsControl.Resources>

</ItemsControl>

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();

}

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”.

Simple way to create a gradient brush in Xaml

MikeHillberg — Fri, 25 Apr 2008 09:06:00 GMT

Rob, Nikhil & I were talking today about the early days of Xaml when you could create linear gradient brushes as an attribute value. E.g. (borrowing from Rob’s post on this subject) instead of creating a LinearGradientBrush for the fill of a rectangle with this Xaml:

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

… you could write:

<Rectangle Width="300" Height="200"

Fill="HorizontalGradient Blue White" >

</Rectangle>

The up side of the latter syntax obviously is that it’s terser. The drawback is that it’s difficult for a tool to understand it; it has no idea what “HorizontalGradient” means, nor that it has two arguments (nor how those arguments should be interpreted).

For that reason, we created the markup extension primitive for Xaml. A markup extension is any type that derives from MarkupExtension, and it can be specified in an attribute using “squiggle” syntax. The most common markup extension you see in Xaml is the binding extension, e.g.:

So we caution against “mini languages” in Xaml, such as the HorizontalGradient example above, because of the lack of toolability and compile-time validation, and we recommend markup extensions instead.

And so, here’s an example of a definition for such an extension, in this case to create a LinearGradientBrush:

[MarkupExtensionReturnType(typeof(LinearGradientBrush))]

public class LinearGradientBrushExtension : MarkupExtension

{

public LinearGradientBrushExtension()

{

StartColor = EndColor = Colors.White;

}

public LinearGradientBrushExtension( Color startColor, Color endColor, double angle)

{

StartColor = startColor;

EndColor = endColor;

Angle = angle;

}

public Color StartColor { get; set; }

public Color EndColor { get; set; }

public double Angle { get; set; }

public override object ProvideValue(IServiceProvider serviceProvider)

{

return new LinearGradientBrush(StartColor, EndColor, Angle);

}

… which can be used in Xaml like this:

<Rectangle Width="300" Height="200"

Fill="{helper:LinearGradientBrush StartColor=red, EndColor=blue, Angle=0}" />

… or, since the LinearGradientBrushExtension has a convenience constructor for setting the properties, the Xaml can simply be:

<Rectangle Width="300" Height="200"

Fill="{helper:LinearGradientBrush red, blue, 0}" />

Similarly, here’s a markup extension for a RadialGradientBrush:

[MarkupExtensionReturnType(typeof(RadialGradientBrush))]

public class RadialGradientBrushExtension : MarkupExtension

{

public RadialGradientBrushExtension()

{

StartColor = EndColor = Colors.White;

}

public RadialGradientBrushExtension( Color startColor, Color endColor )

{

StartColor = startColor;

EndColor = endColor;

}

public Color StartColor { get; set; }

public Color EndColor { get; set; }

public override object ProvideValue(IServiceProvider serviceProvider)

{

return new RadialGradientBrush(StartColor, EndColor);

}

… which enables this Xaml:

<Rectangle Width="300" Height="200"

Fill="{local:RadialGradientBrush red, blue}" />

A Context-Sensitive Help Provider in Wpf

MikeHillberg — Fri, 27 Jul 2007 05:56:00 GMT

Here's an example of a way to add context-sensitive help to your application.

The main idea is to simply use the built-in ApplicationCommands.Help command. This command is already tied to the F1 key, and so executes when you hit F1, and tells your command handler what element the user was on when it was hit.

First, start with this little application:

<Window x:Class="ContextSensitiveHelp.Window1"

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

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

Title="Window1" Height="300" Width="300" >

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Column='0' Grid.Row='1' >Address</TextBlock>

</Grid>

</Window>

... which looks like this:

Now add some help text. I'll add specific help text to the NameField text box, and general help text to the Window, but nothing to the AddressField, just to show how that behaves:

<Window x:Class="ContextSensitiveHelp.Window1"

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

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

Title="Window1" Height="300" Width="300"

xmlns:h="clr-namespace:ContextSensitiveHelp"

h:HelpProvider.HelpString='This form is for your name and address' >

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Column='0' Grid.Row='1' >Address</TextBlock>

<TextBox Grid.Column='1' Grid.Row='0' Name='NameField'

h:HelpProvider.HelpString="Enter your name here"/>

</Grid>

</Window>

So you see here that the help text is being provided by attached properties defined by a class named HelpProvider. Here's the attached property definition:

static class HelpProvider

{

public static string GetHelpString(DependencyObject obj)

{

return (string)obj.GetValue(HelpStringProperty);

}

public static void SetHelpString(DependencyObject obj, string value)

{

obj.SetValue(HelpStringProperty, value);

}

public static readonly DependencyProperty HelpStringProperty =

DependencyProperty.RegisterAttached(

"HelpString", typeof(string), typeof(HelpProvider));

}

I made this a help string property, but you could have a HelpKeyword property that held a help topic ID, or a HelpURI property that referenced online documentation, etc.

Now we just need to respond to the command. The way you respond to commands is with event listeners registered to handle the command. You can simply set up a command handler on a particular element by setting a CommandBinding like this:

<Window x:Class="ContextSensitiveHelp.Window1"

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

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

Title="Window1" Height="300" Width="300"

xmlns:h="clr-namespace:ContextSensitiveHelp"

h:HelpProvider.HelpString='This form is for your name and address' >

<Window.CommandBindings>

</Window.CommandBindings>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Column='0' Grid.Row='1' >Address</TextBlock>

<TextBox Grid.Column='1' Grid.Row='0' Name='NameField'

h:HelpProvider.HelpString="Enter your name here"/>

</Grid>

</Window>

... and then respond to the command like this:

private void Window_Help_Executed(object sender, ExecutedRoutedEventArgs e)

{

FrameworkElement source = e.Source as FrameworkElement;

if (source != null)

{

string helpString = HelpProvider.GetHelpString(source);

if (helpString != null)

{

System.Windows.MessageBox.Show("Help: " + helpString);

}

The problem with that is that you'd really rather not implement the handling as part of your application, but rather as part of the HelpProvider (following the WinForms model). Also, the code above finds the HelpString on NameField, which has a HelpString set, but it doesn't find anything for the AddressField, because it doesn't have a good way to find the more general HelpString set on the Window.

So instead of putting the command handler in the Window, we'll put it in the HelpProvider itself. We can do this by registering a command handler directly against the FrameworkElement class; now we'll get called for any FrameworkElement instance in the application. We'll also register for the command's CanExecute handler. This allows us to decide if we should handle a command at an element, or let it bubble up to a higher handler. That is, this will allow the Help command to bubble up from AddressField, which has no HelpString, to Window which does.

The HelpProvider class is then updated with these new members:

static class HelpProvider

{

static HelpProvider()

{

CommandManager.RegisterClassCommandBinding(

typeof(FrameworkElement),

new CommandBinding(

ApplicationCommands.Help,

new ExecutedRoutedEventHandler(Executed),

new CanExecuteRoutedEventHandler(CanExecute)));

}

static private void CanExecute(object sender, CanExecuteRoutedEventArgs e)

{

FrameworkElement senderElement = sender as FrameworkElement;

if (HelpProvider.GetHelpString(senderElement) != null)

e.CanExecute = true;

}

static private void Executed(object sender, ExecutedRoutedEventArgs e)

{

MessageBox.Show("Help: " + HelpProvider.GetHelpString(sender as FrameworkElement));

}

...

... and we can remove the CommandBindings from the Window:

<Window x:Class="ContextSensitiveHelp.Window1"

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

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

Title="Window1" Height="300" Width="300"

xmlns:h="clr-namespace:ContextSensitiveHelp"

h:HelpProvider.HelpString='This form is for your name and address' >

<~~Window.CommandBindings~~>

<~~CommandBinding~~ ~~Command~~=~~'ApplicationCommands.Help' Executed='Window_Help_Executed' />~~

</~~Window.CommandBindings~~>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Column='0' Grid.Row='1' >Address</TextBlock>

<TextBox Grid.Column='1' Grid.Row='0' Name='NameField'

h:HelpProvider.HelpString="Enter your name here"/>

</Grid>

</Window>

... and now F1 on NameField displays "Enter your name here", and F1 on the AddressField displays "This form is for your name and address".

Finally, note that you can also do more exciting things in the help handler, like load a chm file with the System.Windows.Forms.Help class:

static private void Executed(object sender, ExecutedRoutedEventArgs e)

{

System.Windows.Forms.Help.ShowHelp(null, @"MyHelp.chm");

}

Building read-only objects in Xaml

MikeHillberg — Mon, 02 Jul 2007 20:32:00 GMT

We often use Xaml to instantiate and initialize objects. For example, given “<Foo Bar=’1’/>”, a Xaml loader creates a Foo object, and sets the Bar property to 1. That works when the Bar property is settable, but what can you do if it isn’t?

An example of this scenario in .Net today shows up with strings; the String type is immutable, it doesn’t have any settable properties. But sometimes you want to build a string with formats, concatenation, etc. Thus the invention of the StringBuilder class, where the properties have setters (and the methods can mutate an instance).

You can follow the same idea in Xaml by creating builder types, using markup extensions.

Here’s an example of a type whose properties can’t be set except internally, since it has read-only properties:

<Assembly: XmlnsDefinition("http://blogs.msdn.com/mikehillberg/BuilderPattern", "PeopleNamespace")>

Namespace PeopleNamespace

Public Class Person

Private _name As String

Public ReadOnly Property Name() As String

Get

Return _name

End Get

End Property

Private _age As Integer

Public ReadOnly Property Age() As Integer

Get

Return _age

End Get

End Property

Public Shared Function Create(ByVal Name As String, ByVal Age As Integer) As Person

Dim person As New Person

person._name = Name

person._age = Age

Return person

End Function

End Class

End Namespace

(I’m using the XmlnsDefinition assembly attribute here so that I can have a normal-looking Uri in my Xaml, but you can also make references directly to an assembly using the “clr-namespace” syntax, as described here.)

For demonstration, also define a List(Of Person) named “People”:

Namespace PeopleNamespace

Public Class People

Inherits List(Of Person)

End Class

End Namespace

… and then, for example, you can’t load this Xaml, because of the read-only properties:

</People>

(This gives an error of “'Name' property is read-only and cannot be set from markup”).

But we can create a markup extension that follows the builder pattern to create the object.

First, define the markup extension, named PersonExtension. It looks just like the Person type, except it has setters for the properties, and overrides the ProvideValue function:

<Assembly: XmlnsDefinition("http://blogs.msdn.com/mikehillberg/BuilderPatternBuilder", "PeopleBuilderNamespace")>

Namespace PeopleBuilderNamespace

Public Class PersonExtension

Inherits MarkupExtension

Private _name As String

Public Property Name() As String

Get

Return _name

End Get

Set(ByVal value As String)

_name = value

End Set

End Property

Private _age As Integer

Public Property Age() As Integer

Get

Return _age

End Get

Set(ByVal value As Integer)

_age = value

End Set

End Property

Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object

Return Person.Create(Name, Age)

End Function

End Class

End Namespace

And now we can modify the markup slightly so that it successfully loads:

<People

xmlns="http://blogs.msdn.com/mikehillberg/BuilderPattern"

xmlns:builder="http://blogs.msdn.com/mikehillberg/BuilderPatternBuilder" >

<builder:Person Name='Mike' Age='5' />

<builder:Person Name='Dwayne' Age='7' />

</People>

To test it out, run this code:

Sub Main()

Dim people As People

people = XamlReader.Load(File.Open("..\..\Test.xaml", FileMode.Open))

For Each person As Person In people

Console.WriteLine("Name = " + person.Name + ", Age = " + person.Age.ToString())

End Sub

… and we get this output:

Name = Mike, Age = 5

Name = Dwayne, Age = 7

One last note about markup extensions … Notice that I named the builder class “PersonExtension”, but I referred to it from Xaml as “Person”. That’s possible because when Xaml doesn’t find “Person”, it automatically appends the “Extension” suffix, and looks for “PersonExtension”. If Person and PersonExtension had been in the same Clr namespace, that would have caused confusion, so I put them in different namespaces (“PeopleNamespace” and “PeopleBuilderNamespace”). Alternatively, I could have put them both in the “PeopleNamespace”, and used the specific <PersonExtension> tag (or maybe I would have named it “PersonBuilder”).

Two ProgressBar Tricks

MikeHillberg — Fri, 18 May 2007 01:57:00 GMT

Here’s a couple of handy ProgressBar tricks …

The first trick is to use a negative Minimum value, so that as soon as a ProgressBar starts, you give the user the visual feel that the progress has already begun. This is especially useful if, in your scenario, it takes a couple of seconds to get the Value moving. So simply:

The second trick allows you to get text or other content overlaid on top of a ProgressBar, which is a look you see a lot of nowadays. All you need to do is put the ProgressBar and text in the same cell of a Grid, causing them to render on top of each other. And if you put the text in a ViewBox to stretch it as necessary, everyone will size appropriately to whatever size the Grid is.

For example, this markup:

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

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

</Viewbox>

</Grid>

</Page>

… produces this look:

With a little more work, you can modify this so that the text changes itself when progress is complete. E.g., make the ProgressBar show “Loading …” until it’s finished, then change the text to “Complete”. Here's an example. (For convenience of trying this out, I also added a Loaded animation on the ProgressBar.Value, so that you can simply load it into IE or XamlPad and see it run.):

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

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

<Page.Triggers>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Page.Triggers>

<Grid >

<TextBlock.Style>

<Style.Triggers>

</DataTrigger>

</Style.Triggers>

</Style>

</TextBlock.Style>

</TextBlock>

</Viewbox>

</Grid>

</Page>

Expandos in xaml

MikeHillberg — Tue, 15 May 2007 03:36:00 GMT

This post has a couple of suggestions on ways to accomplish expandos in Xaml. First some background …

On an HTML page you can define your own new “expando” properties on the fly, such as in this example:

<HTML>

</BODY>

</HTML>

Here I invented a new property named ‘testing’. I can both set that property and get it (the two parts in yellow above).

That’s a good feature when you want it. It’s a frustrating feature when you don’t. For example, in the following markup, I misspelled the “bgcolor” attribute. I’d like to be told that this is invalid, but instead it’s assumed to simply be an expando property.

<HTML>

<P>Hello</P>

</BODY>

</HTML>

It’s for this reason that the Xaml language is strongly-typed. E.g. the following is a compile/load error (the “BGround” should be “Background”):

<TextBlock BGround='Red'>Hello</TextBlock>

But then if you do want an expando, how do you do it?

One way is to actually define the properties you want to use, as attached properties. For example, this markup uses the ‘MyProperties.Testing’ attached property to set a property onto an unsuspecting TextBlock:

<Window x:Class="WPFApplication1.Window1"

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

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

<TextBlock local:MyProperties.Testing='1, 2, 3' >Hello</TextBlock>

</Window>

.. where the code for MyProperties looks like this:

namespace MyNamespace

{

public static class MyProperties

{

public static string GetTesting(FrameworkElement obj)

{

return (string)obj.GetValue(TestingProperty);

}

public static void SetTesting(FrameworkElement obj, string value)

{

obj.SetValue(TestingProperty, value);

}

// Using a DependencyProperty as the backing store for Testing. This enables animation, styling, binding, etc...

public static readonly DependencyProperty TestingProperty =

DependencyProperty.RegisterAttached("Testing", typeof(string), typeof(MyProperties) );

}

If you don’t want to write any code, you can do it all in markup, though it takes more markup than the HTML case.

First of all, recognize that expandos are really just a property bag of key/value pairs. So in the first HTML example above the P element has a dictionary item that maps the key “testing” to the value ”1,2,3”. In WPF you can get a real dictionary using the built-in Hashtable class. (You can’t use the Dictionary<K,T> class, because Generics aren’t supported in Xaml.) There’s also a Tag property on all elements to hold your random data. Put those two together and you can do something like the following:

<Page

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

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

xmlns:col='clr-namespace:System.Collections;assembly=mscorlib.dll'

xmlns:sys='clr-namespace:System;assembly=mscorlib'

Name='Page1' >

<Page.Tag>

<col:Hashtable>

<sys:String x:Key='testing'>1, 2, 3</sys:String>

<sys:String x:Key='anotherOne'>foo</sys:String>

<sys:String x:Key='yetAnotherOne'>bar</sys:String>

</col:Hashtable>

</Page.Tag>

<!-- This TextBlock.Text Binding queries a property out

of the dictionary -->

</Page>

Update: Another common use of expando properties is to “comment out” an attribute, since XML doesn’t provide a built-in means to do so. I was just reading an old post on Chuck’s blog, and he shows there a way to do this in Xaml by using the markup compatibility feature.

How to target a template setter at non-element content

MikeHillberg — Tue, 08 May 2007 03:04:00 GMT

Here’s a technique you can follow to use property triggers in a template on non-element type objects. First, though, some background on what that means …

Take this example of a Button with a custom template which is simply a rectangle:

<Button.Template>

</Rectangle>

<ControlTemplate.Triggers>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

… the rectangle is Red, but changes to Green when the mouse goes over it.

Now fill the Rectangle with a LinearGradientBrush, rather than the SolidColorBrush:

<Button.Template>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ControlTemplate.Triggers>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

… and now the Rectangle is red-to-blue by default, but still the Rectangle changes to green when the mouse is over it.

Now say you want the mouse-over behavior to keep LinearGradientBrush, but to instead just modify the second stop to green. One way you could do that would be to have two copies of the LinearGradientBrush:

<Button.Template>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ControlTemplate.Triggers>

<Setter.Value>

</LinearGradientBrush>

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

But if you have a more complicated object, such as a Drawing, you might not want to have to duplicate the entire thing. The difficulty is that the Setter of a Trigger can only target a FrameworkElement or FrameworkContentElement, not (in this case) a GradientStop. For example, if you tried make the second stop green with a trigger:

<Button.Template>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ControlTemplate.Triggers>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

… you’ll get the error “Cannot find the Trigger target 'SecondStop'. (The target must appear before any Setters, Triggers, or Conditions that use it.)”.

There is a way to solve this, though, by using data binding. With a Binding, you can find your way out of the brush to an element, and then the Setter can target that element. For example, the following markup gives us the desired LinearGradientBrush of red-to-blue when the mouse is away from the button, and red-to-green when the mouse is over it:

<Button.Template>

<Rectangle.Tag>

</Rectangle.Tag>

<Rectangle.Fill>

<GradientStop

Color='{Binding ElementName=MyRectangle, Path=Tag}'

Offset='1' x:Name='SecondStop' />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<ControlTemplate.Triggers>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

Tip: Using XamlWriter and XamlReader to clone an object

MikeHillberg — Tue, 01 May 2007 23:35:00 GMT

There are multiple ways to clone objects, and multiple definitions of what “clone” should even mean.

The main issue is usually about cloning “deep” vs. “shallow”. For example, if you have a Customer object that points to an Address object, and you clone the Customer object, does the Address object get cloned too (this would be a deep clone)? Or does the new Customer reference the original Address object (a shallow clone)?

Another issue is whether you clone just the properties of the object, or the fields instead. And do you clone event listeners?

Yet another issue is that you might clone a property value on the object that is supposed to be unique, such as the Name property on WPF elements.

Anyway, here’s a trick to clone an object by writing it out to Xaml then reading it back in. As such, the cloning rules it follows matches the Xaml serialization rules (see here for some more info). That primarily means that it only clones public properties – no fields or events – and it clones deep.

So here’s what the code might look like:

private Object CloneUsingXaml(Object o)

{

string xaml = XamlWriter.Save(o);

return XamlReader.Load(new XmlTextReader(new StringReader(xaml)));

}

(XamlReader.Load doesn’t have an overload that takes a string, so you need to convert the string into an XmlReader.)

Here’s an example. Take this app:

<Window x:Class="WPFApplication1.Window1"

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

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

Title="Window1" Height="300" Width="300" Loaded='OnLoaded'>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</Window>

… and clone the Rectangle during load with:

private void OnLoaded(object sender, RoutedEventArgs args)

{

Rectangle rectangle2 = CloneUsingXaml(_rectangle1) as Rectangle;

rectangle2.Name = null;

Grid.SetColumn(rectangle2, 1);

Grid1.Children.Add(rectangle2);

}

… and you get a Window with two rectangles.

Here’s what the intermediate Xaml looks like:

<Rectangle

Fill="#FFFF0000"

Name="_rectangle1"

Width="20" Height="20"

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

Note here that the Name property got cloned, which isn’t what we want, so I removed the Name after running the clone.

Parameterized templates; and how to create reusable, custom-looking buttons without code

MikeHillberg — Thu, 01 Feb 2007 20:26:00 GMT

I’ve talked to a few people recently about parameterized templates, and so I wanted to write some of it down. Here’s the scenario … I want to create an application that has a main window with several buttons on it. Clicking one of the buttons navigates you to part of an app. For example, in this picture, you can click on either Flower, Trees, or Toucans:

The question is, how do you create those buttons? By the time we’re done, the markup for the buttons is going to look like this, and we won’t have to write any code:

(“Tag” is a funny name for a property. If you want to write a little code, you can give it a better name, but I’m just going to use Tag for simplicity, as it already exists.)

The key here is that we can now just plop down buttons with a reference to the image/text, and they automatically get the custom look. Also notice that these are real buttons, and are still getting the standard button behavior and chrome. For example, the Toucan button above is the current keyboard focus, so it has a slight dotted outline, like any other button.

But let’s back up. For starters, the easiest way to create one of those buttons is to simply make the text and image part of the button’s content, such as:

</StackPanel>

</Button>

To fill in more of the overall look of the button (with some colors, fonts, etc.) we expand this to:

<Button Margin="5" Width="200"

Foreground="White" >

<Button.Background>

<SolidColorBrush

Color="Orange"

Opacity="0.4" />

</Button.Background>

<TextBlock Text="Flowers"

FontWeight="Bold"

HorizontalAlignment="Center"

Margin="10" />

</StackPanel>

</Button>

(Note that the button’s background has some opacity, so it looks slightly different here than in the original picture, where it was composited on top of a panel that itself had a background color.)

But you don’t want to repeat all of that button content for every button; you’d like to define it once, and just change the text and image for each button instance. One way to share the common look of the buttons is to create a custom Button template, and put the StackPanel, Image, and TextBlock within. That might look like this:

<Setter.Value>

</Setter.Value>

</Setter>

<Setter.Value>

<TextBlock

Text="Flowers"

FontWeight="Bold"

HorizontalAlignment="Center" Margin="10" />

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Note here that in addition to creating a ControlTemplate for the button, I put some of the common properties in a Style.

And since this is defined as the default button style, my “Flowers” button markup just looks like this:

That’s a good start, but this template isn’t really re-usable, because it has the image source and text content (“Flowers”) hard-coded. To solve that, we can parameterize the template using data binding. So update the ControlTemplate like this:

<Image Source="{Binding

Tag,

RelativeSource={RelativeSource

FindAncestor,

AncestorType=Button}}" />

<TextBlock Text="{Binding

Content,

RelativeSource={RelativeSource

FindAncestor,

AncestorType=Button}}"

FontWeight="Bold"

HorizontalAlignment="Center"

Margin="10" />

</StackPanel>

</ControlTemplate>

The bindings just bind a property on the Image and TextBlock to properties on the Button to which the template is applied. That is, the TextBlock.Text is bound to the Button.Content, and the Image.Source is bound to the Button.Tag. That “Tag” property is a funny name, but is just an un-used property that’s defined on all elements, and that isn’t used by WPF internally; it’s just there as a place for you to store random values, like the Tag property in VB.

(Note that these bindings find the Button to which the template is applied using a RelativeSource of FindAncestor. You could also using a RelativeSource of TemplatedParent, or you could use a TemplateBinding in this case. But the FindAncestor approach is simpler here because it will continue to work in the next step below when we make some changes to the template.)

And now we can do an easier button, passing arguments to customize the template instance:

So that’s more usable, but the button doesn’t look the same any more. For one thing, the orange background isn’t showing up. That’s because that is normally the button template’s responsibility, and we didn’t fill it in. That seems easy enough to fix by putting the background color on the template’s StackPanel. That gives us this:

<Setter Property="Width"

Value="200" />

<Setter Property="Margin"

Value="5" />

<Setter Property="Foreground"

Value="White" />

<Setter.Value>

<ControlTemplate

TargetType="Button">

<StackPanel.Background>

<SolidColorBrush

Color="Orange"

Opacity="0.4" />

</StackPanel.Background>

<Image

Source="Garden.jpg" />

<TextBlock Text="Flowers"

FontWeight="Bold"

HorizontalAlignment="Center"

Margin="10" />

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

...

<Button

Content="Flowers"

Tag="Garden.jpg" />

But that still doesn’t look quite right. For example, the corners and border don’t look the same. And if you look at this in a real app (or XamlPad), you’ll see that it doesn’t change its look correctly when the mouse is over it, when it is clicked, etc. That’s because we aren’t just filling in the content of the button with our StackPanel/Image/TextBlock, we’re replacing the whole Button template.

We could fix all of these problems, but there is a way we can let the Button keep it’s normal “chrome” template, and use our template just for the content of the Button – Instead of setting the Button’s Template property, we set the ContentTemplate property.

So make two changes. First, set the ContentTemplate property rather than the Template property. Second, use a DataTemplate rather than a ControlTemplate (otherwise you’ll get a compiler error). There are some differences between a DataTemplate and a ContentTemplate, but none that show up here, it’s just a rename.

That gives us; this:

<Setter Property="Width"

Value="200" />

<Setter Property="Foreground"

Value="White" />

<Setter.Value>

<SolidColorBrush

Color="Orange"

Opacity="0.4" />

</Setter.Value>

</Setter>

<Setter.Value>

<DataTemplate

DataType="Button">

<Image

Source="{Binding Tag,

RelativeSource=

{RelativeSource

FindAncestor,

AncestorType=Button}}" />

<TextBlock

Text="{Binding Content,

RelativeSource=

{RelativeSource

FindAncestor,

AncestorType=Button}}"

FontWeight="Bold"

HorizontalAlignment="Center"

Margin="10" />

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

...

And now we’ve accomplished the original goal; defining the look for the buttons in one template, and parameterizing that template so that each instance of the button can set the image and text.

Here’s the end-result sample that runs in XamlPad (you might need to update the Image URIs to point to images you have, although on Windows Vista this will likely just work):

<Page.Resources>

<Setter.Value>

</Setter.Value>

</Setter>

<Setter.Value>

<Image Source="{Binding Tag,

RelativeSource={RelativeSource

FindAncestor,

AncestorType='Button'}}" />

<TextBlock Margin="10"

HorizontalAlignment="Center"

Text="{Binding Content,

RelativeSource={RelativeSource

FindAncestor,

AncestorType='Button'}}" />

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

</Page.Resources>

<Page.Background>

</LinearGradientBrush>

</Page.Background>

Select an item:

</TextBlock>

</WrapPanel>

</StackPanel>

</Page>