Tips on how to write well behaved WPF controls

• Download demo application for VS2008 Beta2 (includes source code) - 124 KB

Contents

• Introduction
• The Articles Meat
  • Disection of a standard control
• References
• So What Do You Think ?
• Conclusion

Introduction

With the advent of WPF, the fine folk at Microsoft have now given developers (and the rest of us) the ability to totally alter the way we see the visual representation of a Control. This is achieved by the use of Templates and Styles. Where Styles which will more than likely also contain Templates. But with this freedom, what is to stop a user from changing the VisualTree of a Control entirely in such a way that it is totally different from what the Control was originally authored to do. In fact if we are authoring a CustomControl in WPF, there is no user interface at all, and the assumption is that the UI would be provided by a Template. But what sort of Template? What does it need to have in it?

That is what this article is all about, it explains several key techniques that may be used by WPF developers, to not only ensure their own controls work correctly, but that they also apply Templates and Styles, in a good manner to other controls.

It should be noted that I will NOT be discussing theme awareness for custom authored Controls, this is a whole different issue, that would probably make yet another interesting article for someone.

As I say what this article is about, is really making sure that the control works as it was/is intended to work.

Its going to be a fairly small article about several techniques that will help creating well behaved Templatable and Stylable custom controls. This article should also help you to understand how to customize other existing controls and even 3rd party WPF controls.

The Articles Meat

I think the best place to start with is probably an example of one of the standard Controls that ships with .NET 3.0. Lets pick a nice simple one to start with, lets say a scrollbar, I think everyone knows what one of them looks like.

Disection of a standard control

A scrollbar simply looks like this. I am using Windows Vista, and the Aero theme. So dont be suprised/or at all worried, if your scrollbar look a little different to this, as the current control theme, is not the main focus of this article.

And if we look at the standard Control Template that makes up the scrollbar, either using Expression Blend, or by using the attached DumpControlTemplate project, which is supplied by a download from Charles Petzolds WPF book, Applications = Code + Markup: A Guide to the Microsoft® Windows® Presentation Foundation, which is available here, or you could look up the Control Template at the MSDN web site

Which ever of these you choose the code generated should be functionally the same. I have chosen to take the code for the Scrollbar Template from the MSDN web site where a default template listing is supplied for most of the standard controls.

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" 
   StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />




<Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border 
          Name="Border"
          Margin="1" 
          CornerRadius="2" 
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}"
          BorderThickness="1">
          <Path 
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Fill="{StaticResource GlyphBrush}"
            Data="{Binding Path=Content,
        RelativeSource={RelativeSource TemplatedParent}}" />
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" 
        Value="{StaticResource PressedBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" 
        Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RepeatButton}">
        <Border Background="Transparent" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="IsTabStop" Value="false"/>
  <Setter Property="Focusable" Value="false"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Border 
          CornerRadius="2" 
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="1" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
  <Grid >
    <Grid.RowDefinitions>
      <RowDefinition MaxHeight="18"/>
      <RowDefinition Height="0.00001*"/>
      <RowDefinition MaxHeight="18"/>
    </Grid.RowDefinitions>
    <Border
      Grid.RowSpan="3"
      CornerRadius="2" 
      Background="#F0F0F0" />
    <RepeatButton 
      Grid.Row="0"                           
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineUpCommand"
      Content="M 0 4 L 8 4 L 4 0 Z" />
    <Track 
      Name="PART_Track"
      Grid.Row="1"
      IsDirectionReversed="true">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageUpCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb 
          Style="{StaticResource ScrollBarThumb}" 
          Margin="1,0,1,0"  
          Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton 
      Grid.Row="3" 
      Style="{StaticResource ScrollBarLineButton}"
      Height="18"
      Command="ScrollBar.LineDownCommand"
      Content="M 0 0 L 4 4 L 8 0 Z"/>
  </Grid>
</ControlTemplate>

<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
  <Grid >
    <Grid.ColumnDefinitions>
      <ColumnDefinition MaxWidth="18"/>
      <ColumnDefinition Width="0.00001*"/>
      <ColumnDefinition MaxWidth="18"/>
    </Grid.ColumnDefinitions>
    <Border
      Grid.ColumnSpan="3"
      CornerRadius="2" 
      Background="#F0F0F0" />
    <RepeatButton 
      Grid.Column="0"                           
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineLeftCommand"
      Content="M 4 0 L 4 8 L 0 4 Z" />
    <Track 
      Name="PART_Track"
      Grid.Column="1"
      IsDirectionReversed="False">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageLeftCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb 
          Style="{StaticResource ScrollBarThumb}" 
          Margin="0,1,0,1"  
          Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageRightCommand" />
      </Track.IncreaseRepeatButton>
    </Track>
    <RepeatButton 
      Grid.Column="3" 
      Style="{StaticResource ScrollBarLineButton}"
      Width="18"
      Command="ScrollBar.LineRightCommand"
      Content="M 0 0 L 4 4 L 0 8 Z"/>
  </Grid>
</ControlTemplate>

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
  <Setter Property="SnapsToDevicePixels" Value="True"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Style.Triggers>
    <Trigger Property="Orientation" Value="Horizontal">
      <Setter Property="Width" Value="Auto"/>
      <Setter Property="Height" Value="18" />
      <Setter Property="Template" 
        Value="{StaticResource HorizontalScrollBar}" />
    </Trigger>
    <Trigger Property="Orientation" Value="Vertical">
      <Setter Property="Width" Value="18"/>
      <Setter Property="Height" Value="Auto" />
      <Setter Property="Template" 
        Value="{StaticResource VerticalScrollBar}" />
    </Trigger>
  </Style.Triggers>
</Style>

Now if we have a look at at a ScrollBar control that I have started to edit in Expression Blend, we can see the default VisualTree that makes up the default Template for the ScrollBar control. This is shown below

There is something that looks rather odd, well at least to me it does. What the heck is this PART_Track thing all about. It just looks strange.

As explained in the previous section, the default appearance of a control, including any triggers that may change its appearance or behavior, is defined by a ControlTemplate, which is composed of various elements that represent different parts of a control, some of which are required in order to handle specific control behavior. The absence of these template parts will result in controls not behaving as expected.

Mmmm, I thought we could do what we wanted to do with custom controls, well as it turns out, No.We are not quite as free as we thought we were, there are some restrictions imposed on us. Of course we dont have to abide by these restrictions, but its probably a good idea to, as we want our control to work, even if it does look different. It should still work.

Microsoft have thought about this situation, and have not fixed it (which they couldnt do anyway, as they dont know what the user is going to do to the ControlTemplate), but have provided a basic mecahnism to kind of ensure that a control, tries to behave correctly. This mechanism is called Template Parts.

Think of Template Parts as a loose contract between a control and its Template. The naming convention is Part_XXXX where the PART_XXX name is applied to the item within the Template that MUST be provided in order for the control to work.

Well how do we know which PARTS we are expected to provide, well thats done to the control author doing a good job, and supplying a documentation attribute, called TemplatePartAttribute. Dont worry well look at this a bit more indepth in a while. Its just important that you understand that in some cases, there is a guideline as to what the Template should contain.

For example my previous codeproject article MyFriends uses a 3rd party Data Grid for WPF by a company called Xceed. And if we examine their documentation, we can see that their data grids ControlTemplate expects the following control parts to be provided.

Dont worry about this XCeed example, that was really just to show you a what a large control might expect from its users, but we are simply going to go back to our simple ScrollBar Template. Lets analyse that a bit further shall we. Taking the trivial (at first glance) scroll bar, it can be seen that the scroll bar control is actually made up as follows:

And as I stated above the default template contains a template part, where the part is expected to be called PART_Track and is as shown below

    <Track 
      Name="PART_Track"
      Grid.Row="1"
      IsDirectionReversed="true">
      <Track.DecreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageUpCommand" />
      </Track.DecreaseRepeatButton>
      <Track.Thumb>
        <Thumb 
          Style="{StaticResource ScrollBarThumb}" 
          Margin="1,0,1,0"  
          Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
      </Track.Thumb>
      <Track.IncreaseRepeatButton>
        <RepeatButton 
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
      </Track.IncreaseRepeatButton>
    </Track>

And as ive also demonstrated, the Track is expected to be a part of the Template or Style that is used by the ScrollBar control. In fact if we dont have Track whos name is PART_Track, the control will not work as expected.

To prove this ive included as part of the attached demo application 2 ScrollBars that have a Style applied to them. In one case I've supplied the PART_Track name for the Track and in the other case I've missed out the naming of the Track altogether. And guess what one ScrollBar works correctly, and the other doesnt. Thus is the power of the mighty PART_XXX name.

In fact I think now may be a good time to show a small screen shot of the attached demo application. As I say this is a small article, so its nothing fancy.

Its basically split into 4 areas. Each area conducts a different function as follows:

Top Left : Hosting a custom control, and making it work using Template_Parts

Top Right : Hosting a custom control, and making it work using Commands

Bottom Left : Has a working Styled ScrollBar that included the correct PART_Track named Template visual tree object

Bottom Right : Has a non-working Styled ScrollBar that DOESN'T include the PART_Track named Template visual tree object, so DOESN't work correctly. Try it you'll see.

I think I've talked about the bottom row, in what we have discussed above, where I mentioned that in some cases there is expected to be a certain element type and name supplied as part of the applied Template. But how should this information be dealt with by a user of a control, and what should a control author do to ensure that their own controls are well written and behave correctly when the user doesnt supply these expected control parts.

Well according to the sourced that i've read there are really only a couple of options available, to ensure controls behave well, and that users of controls know what they have to do to ensure this hamonyous arrangement. So the rest of this article will be dedicated to the dicussion of what custom control authors can do with their controls.

OPTION 1

As the designer of a control, you should decide which parts are important parts of the controls inner workings, and these should probably be designated as template parts. Remember template parts are a loose contract between a control and its template. After you decide on which elements to designate as template parts, you should pick a name for them. The convention is "PART_XXX". You should then document each parts existence by using the TemplatePartAttribute (one for each part). WPF doesnt actually do anything with the TemplatePartAttribute, but it will be used in the documentation by some XAML tools, such as Expression Blend.

The next step is to, deal with the designated template parts, which should be done in an override of the OnApplyTemplate method inherited from FrameworkElement. This method is called anytime the template is applied, so it gives the chance to handle dynamic template changes gracefully. To retrieve the instances of any elements inside the control template, the GetTemplateChild method, also inherited from FrameworkElement can be called. Lets see an example. In this example, I have created a CustomControl which I expect to have a Button and a Image. The Button allows users to browse for a Image. Yes, it's a simply image browser.

Lets see the associated code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlsAndTemplates
{
    [TemplatePart(Name = "Part_OpenImage", Type = typeof(Button))]
    [TemplatePart(Name = "Part_Image", Type = typeof(Image))]
    public class OpenImageCustomControlUsingRoutedEvents : Control
    {
        static OpenImageCustomControlUsingRoutedEvents()
        {
            DefaultStyleKeyProperty.OverrideMetadata(
                typeof(OpenImageCustomControlUsingRoutedEvents), 
                new FrameworkPropertyMetadata(
        typeof(OpenImageCustomControlUsingRoutedEvents)));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            Button openImageButton = base.GetTemplateChild("Part_OpenImage") as Button;
            Image selectedImage = base.GetTemplateChild("Part_Image") as Image;
            if (openImageButton != null && selectedImage != null)
                openImageButton.Click += new RoutedEventHandler(openImageButton_Click);
        }

        private void openImageButton_Click(object sender, RoutedEventArgs e)
        {
            Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
            ofd.AddExtension = false;
            ofd.Multiselect = false;
            ofd.DefaultExt = ".jpg";
            ofd.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|
        *.BMP;*.JPG;*.GIF|All files (*.*)|*.*";
            ofd.InitialDirectory=System.Environment.GetFolderPath(
                Environment.SpecialFolder.MyPictures);

            if (ofd.ShowDialog().HasValue)
            {
                if (!string.IsNullOrEmpty(ofd.FileName))
                {
                    OpenImageCustomControlUsingRoutedEvents parent = 
                        (sender as Button).TemplatedParent as 
                        OpenImageCustomControlUsingRoutedEvents;
                    Image selectedImage = parent.Template.FindName("Part_Image", parent) 
                        as Image;
                    if (selectedImage != null)
                        selectedImage.Source = new BitmapImage(new Uri(ofd.FileName));
                }
            }
        }
    }
}

And here is the control being used in XAML, with the correct Part_Image and Part_OpenImage being supplied

<local:OpenImageCustomControlUsingRoutedEvents 
        x:Name="openImageControlUsingRoutedEvents" Width="80" Height="80" Background="Yellow" Margin="0,5,0,0">
    <local:OpenImageCustomControlUsingRoutedEvents.Template>
        <ControlTemplate>
            <StackPanel Orientation="Vertical" Background="{TemplateBinding Background}">
                <Border BorderBrush="Black" BorderThickness="2,2,2,2" Height="60">
                    <Image x:Name="Part_Image" Margin="0" Stretch="Fill" />
                </Border>
                <Button x:Name="Part_OpenImage" Width="Auto" 
        Content="Browse" Height="20"/>
            </StackPanel>
        </ControlTemplate>
    </local:OpenImageCustomControlUsingRoutedEvents.Template>
</local:OpenImageCustomControlUsingRoutedEvents>

Note that this implementation gracefully handles Templates that omit Part_OpenImage causing the openImageButton variable to be null. This is the recommmended approach. After all its fairly possible and probably quite reasonable that a user of this control could provide a Template that doesnt contain a Part_OpenImage Button element. This implementation deals with it. If the Part_OpenImage Button element is provided, its Click RoutedEvent is used, otherwise nothing happens.

Although this option is fine, its not that flexable, not only do we expect there to be a Button but we also need it to be called a certain name. Isnt there a better method. Well yes there is. Commands. Thats option 2.

OPTION 2

A more flexible way to attach logic to peices of a template is to define and use commands. This not only avoids the need to special names, but the element trigger no longer even needs to be a Button.

The following is a re-write of the OpenImage CustomControl that has been changes to use commands. In this example im still using a Button, but this could be swapped for anything that supports commands.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlsAndTemplates
{
    [TemplatePart(Name = "Part_OpenImage", Type = typeof(Button))]
    [TemplatePart(Name = "Part_Image", Type = typeof(Image))]
    public class OpenImageCustomControlUsingCommands : Control
    {
        private static RoutedUICommand openImageCommand = new
            RoutedUICommand("Opem File", "OpenImageCommand", 
            typeof(OpenImageCustomControlUsingCommands));

        static OpenImageCustomControlUsingCommands()
        {
            DefaultStyleKeyProperty.OverrideMetadata(
                typeof(OpenImageCustomControlUsingCommands), 
                new FrameworkPropertyMetadata(
        typeof(OpenImageCustomControlUsingCommands)));

            //Attach the command to the custom logic


            CommandManager.RegisterClassCommandBinding(
                typeof(OpenImageCustomControlUsingCommands),
                new CommandBinding(OpenImageCommand, 
                    new ExecutedRoutedEventHandler(openImageButton_Click)));

        }

        public static RoutedUICommand OpenImageCommand
        {
            get { return openImageCommand; }
        }

        private static void openImageButton_Click(object sender, RoutedEventArgs e)
        {
            Microsoft.Win32.OpenFileDialog ofd = new Microsoft.Win32.OpenFileDialog();
            ofd.AddExtension = false;
            ofd.Multiselect = false;
            ofd.DefaultExt = ".jpg";
            ofd.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|
        *.BMP;*.JPG;*.GIF|All files (*.*)|*.*";
            ofd.InitialDirectory=System.Environment.GetFolderPath(
                Environment.SpecialFolder.MyPictures);

            if (ofd.ShowDialog().HasValue)
            {
                if (!string.IsNullOrEmpty(ofd.FileName))
                {
                    OpenImageCustomControlUsingCommands parent = 
                        sender as OpenImageCustomControlUsingCommands;
                    Image selectedImage = parent.Template.FindName(
                        "selectedImage", parent) as Image;
                    if (selectedImage != null)
                        selectedImage.Source = new BitmapImage(new Uri(ofd.FileName));
                }
            }
        }
    }
}

And here is the control being using in XAML with the command being wired up.

<local:OpenImageCustomControlUsingCommands x:Name="openImageCustomControlUsingCommands" 
        Width="80" Height="80" Background="Yellow" Margin="0,5,0,0">
    <local:OpenImageCustomControlUsingCommands.Template>
        <ControlTemplate>
            <StackPanel Orientation="Vertical" Background="{TemplateBinding Background}">
                <Border BorderBrush="Black" BorderThickness="2,2,2,2" Height="60">
                    <Image x:Name="selectedImage" Margin="0" Stretch="Fill" />
                </Border>
                <Button Command="{x:Static 
        local:OpenImageCustomControlUsingCommands.OpenImageCommand}" 
        Width="Auto" Content="Browse" Height="20"/>
            </StackPanel>
        </ControlTemplate>
    </local:OpenImageCustomControlUsingCommands.Template>
</local:OpenImageCustomControlUsingCommands>

The only problem I guess with this approach is that you have to know that there is a command available that will do what you want.

Well thats it, for this article. I told you it was small. But I hope this was useful in some way. I think its fairly strange, so should still in your mind. At least thats how my mind works, I forget the easy stuff, and remember the outright strange and scary stuff just fine

References

The following is a list of the code that I have looked at and in some case used and altered for this article:

• Charles Petzold : Using Templates to Customize WPF Controls
• Microsoft guidelines for building styable controls
• WPF Default ScrollBar ControlTemplate Example

So What Do You Think ?

I would just like to ask, if you liked the article please vote for it, and leave some comments, as it lets me know if the article was at the right level or not, and whether it contained what people need to know.

Conclusion

Although this article was fairly short I hope it was of help to someone out there, that may be thinking of authoring a custom WPF control or is dealing with a 3rd party WPF control.