Joe's Blog

Building a Silverlight ComboBox Using Attached Behaviors

Joe — Wed, 20 Aug 2008 09:46:40 GMT

I recently needed to use a ComboBox in an application I was writing. Because there is no built-in ComboBox in Silverlight I decided to explore building one using attached behaviors. If you’re not familiar with this design pattern, check out Nikhil’s posts. My ComboBox behavior is loosely based on his AutoComplete behavior. I also make use of Julian’s ButtonCommands class, which he describes in this post.

I started with a simple behavior interface:

/// <summary>

/// Represents a contract for encapsulation of logic that can be added

/// to a dependency object through a pattern of attachment.

/// </summary>

/// <typeparam name="T"></typeparam>

public interface IBehavior<T> where T : DependencyObject

    /// <summary>

    /// Gets the associated object.

    /// </summary>

    /// <value>The associated object.</value>

    T AssociatedObject { get; }

    /// <summary>

    /// Attaches to the specified associated object.

    /// </summary>

    /// <param name="associatedObject">The associated object.</param>

    void Attach(T associatedObject);

    /// <summary>

    /// Detaches from the associated object.

    /// </summary>

    void Detach();

Which I used to implement a ComboBoxBehavior class. I chose to use FrameworkElement because I wanted to be able to attach this ComboBox to different controls. Possibly a TextBlock, a TextBox, a Border … any number of controls. We’ll come back to this later …

public class ComboBoxBehavior : IBehavior<FrameworkElement>

...

After creating the behavior I created a simple static class which had a single attached property of type ComboBoxBehavior.

public static class Behaviors

    public static readonly DependencyProperty ComboBoxProperty =

        DependencyProperty.RegisterAttached(

            "ComboBox",

            typeof(ComboBoxBehavior),

            typeof(Behaviors),

            new PropertyMetadata(

                new PropertyChangedCallback(OnComboBoxChanged)

);

...

Attach() and Detach() are called in the property changed callback.

private static void OnComboBoxChanged(

    FrameworkElement element,

    ComboBoxBehavior oldValue,

    ComboBoxBehavior newValue)

    if (oldValue != null)

        oldValue.Detach();

    if (newValue != null)

        newValue.Attach(element);

You can then wire up the behavior in XAML … I’m using a Border control in this example.

<Border

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

    <local:Behaviors.ComboBox>

        <local:ComboBoxBehavior

            Opened="SimpleComboBoxBehavior_Opened"

            ItemSelected="SimpleComboBoxBehavior_ItemSelected"

            ShowComboBoxCommand="{StaticResource ShowComboBoxSimple}">

        </local:ComboBoxBehavior>

    </local:Behaviors.ComboBox>

    <TextBlock

        x:Name="uxSimpleComboBox"

        Margin="4,0,4,0">

    </TextBlock>

</Border>

So onto the workhorse … the behavior itself. The way I built this behavior to work is it fires an event, Opened, when the DropDown is opened, in which you can set the ItemsSource and the SelectedIndex of the ItemsSource, as demonstrated in the following code:

private void SimpleComboBoxBehavior_Opened(

    object sender, ComboBoxOpenedEventArgs e)

    List<string> strings = new List<string>();

    strings.Add("A");

    strings.Add("B");

    strings.Add("C");

    strings.Add("D");

    e.ItemsSource = strings;

    var index = strings.IndexOf(uxSimpleComboBox.Text);

    e.SelectedIndex = index;

Once the user selects a value another event is fired, ItemSelected, which can also be handled:

private void SimpleComboBoxBehavior_ItemSelected(

    object sender, ComboBoxItemSelectedEventArgs e)

    if (e.SelectedItem != null)

        uxSimpleComboBox.Text = e.SelectedItem.ToString();

You may be wondering why I took this approach. I decided to go down the eventing route because as I mentioned previously, I wanted to be able to attach this behavior to lots of different controls. As such I felt that it should be up to the implementer to display the data as needed.

I also decided to use commands to drive the opening and closing of the DropDown. This allows the user to declaratively specify when the DropDown is opened or closed. If you look at the XAML for the behavior I’m wiring up a ShowComboBoxSimple command to the ShowComboBoxCommand.

ShowComboBoxCommand="{StaticResource ShowComboBoxSimple}"

This is an ICommand of type MultiDelegateCommand. MultiDelegateCommand is a command which can register multiple delegates to call when it is executed.

I registered a MultiDelegateCommand instance in the Application Resources to be able to use it in the markup:

public Page()

    Application.Current.Resources.Add(

        "ShowComboBoxSimple",

        new MultiDelegateCommand()

);

...

    InitializeComponent();

...

Lastly, I wanted to show the DropDown anytime any portion of the control I’m attaching to is clicked. This is accomplished by subscribing to the MouseLeftButtonUp event when the associated object is being attached:

/// <summary>

/// Attaches to the specified associated object.

/// </summary>

/// <param name="associatedObject">The associated object.</param>

public void Attach(FrameworkElement associatedObject)

    AssociatedObject = associatedObject;

    AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;

    AssociatedObject.LostFocus += AssociatedObject_LostFocus;

private void AssociatedObject_MouseLeftButtonUp(

    object sender, MouseButtonEventArgs e)

    if (ShowComboBoxCommand != null && !IsDropDownOpen)

        ShowComboBoxCommand.Execute();

And that’s basically it! You may be wondering ... does this control support complex types? You betcha! The source show’s a sample of working with complex types. Here is shown a complex City type with a Name property.

<DataTemplate x:Key="CityTemplate">

    <TextBlock

        Text="{Binding Name}"

        ToolTipService.ToolTip="{Binding Name}"/>

</DataTemplate>

...

<local:Behaviors.ComboBox>

    <local:ComboBoxBehavior

        Opened="ComplexComboBoxBehavior_Opened"

        ItemSelected="ComplexComboBoxBehavior_ItemSelected"

        ShowComboBoxCommand="{StaticResource ShowComboBoxComplex}">

        <local:ComboBoxBehavior.DropDownTemplate>

            <DataTemplate>

                <ListBox ItemTemplate="{StaticResource CityTemplate}" />

            </DataTemplate>

        </local:ComboBoxBehavior.DropDownTemplate>

    </local:ComboBoxBehavior>

</local:Behaviors.ComboBox>

...

Download: SilverlightComboBox.zip

Hope that helps!

Joe

Visual Studio 2008 Service Pack 1 (SP1) Released

Joe — Mon, 11 Aug 2008 18:19:00 GMT

Today Microsoft made Visual Studio 2008 Service Pack 1 (SP1) available for download. I was able to participate in a case study done on SP1 with Microsoft, Misys, and Veracity Solutions specifically using ADO.NET Data Services and the Entity Framework. You can read the full case study here, though here’s a small snippet:

“For more than a decade, Misys Healthcare Systems and Veracity Solutions have partnered to develop innovative applications that meet the needs of healthcare providers while improving the quality of patient care. To help medical staff reduce manual, paper-based processes, Misys Healthcare Systems and Veracity Solutions collaborated to create FreeNatal, a Web-based application that provides prenatal care providers with an easy-to-use, secure interface for managing patients’ records. Using Microsoft® Visual Studio® 2008 SP1 and the Microsoft .NET Framework 3.5 SP1, eight members from the Misys-Veracity team created the application. By taking advantage of these powerful technologies, the team increased development speed by 60 percent, enabling accelerated market delivery and further strengthening their respective positions in the healthcare informatics industry.”

FreeNatal “Face Sheet” view.

FreeNatal application architecture diagram.

Composite Silverlight 2.0 Beta 2 Application Library

Joe — Wed, 06 Aug 2008 04:25:00 GMT

Lately I’ve been working with Composite WPF and Silverlight applications at Veracity Solutions. I spent a few hours over the weekend converting the Composite WPF Application Library to Silverlight. Tonight I finished porting one of the QuickStarts to Silverlight. Of course, just today the P&P team posted a AGCompositeApplicationLibrary spike. Just my luck! Regardless, here’s the UIComposition QuickStart running in Silverlight using my ported libraries:

Some things to note:

The TabItem style isn’t using binding to get the header value.
Location tab doesn’t include the map data.
I added a TabControlRegionAdapter class that works with the Silverlight TabControl.

Special thanks to Michael Sync for posting his Silverlight Unity port, it got me started.

Download: CompositeSilverlight.zip

Building Custom Template-able WPF Controls

Joe — Fri, 14 Dec 2007 04:08:40 GMT

Building custom controls in WPF can provide you with lots of flexibility. It allows you to entirely separate the behavior of the control from the look of the control. This is the premise behind most of what WPF offers. In this post I will show you how you can build a simple control similar to the search control in Outlook 2007.

Add a new WPF Application project.

Then add a WPF User Control Library.

Delete the generated UserControl1.xaml that was given to you.

Add a new WPF Custom Control.

Your solution should now look like this:

The template gives you a FilterTextBox.cs and Generic.xaml file.

public class FilterTextBox : Control

    static FilterTextBox()

        DefaultStyleKeyProperty.OverrideMetadata(typeof(FilterTextBox),

            new FrameworkPropertyMetadata(typeof(FilterTextBox)));

The default Generic.xaml is the default look for your custom control, and is found in the Theme directory. It is just an empty border for now:

<Style TargetType="{x:Type local:FilterTextBox}">

  <Setter Property="Template">

    <Setter.Value>

      <ControlTemplate TargetType="{x:Type local:FilterTextBox}">

        <Border Background="{TemplateBinding Background}"

                BorderBrush="{TemplateBinding BorderBrush}"

                BorderThickness="{TemplateBinding BorderThickness}">

        </Border>

      </ControlTemplate>

    </Setter.Value>

  </Setter>

</Style>

Now lets start building the behavior of our control. We'll start by adding a 'Text' dependency property. This will be the filter text that the user types in. Notice that I've created callbacks to be notified when the property has changed. And as always, do NOT put any code within the getter and setter of the CLR property, because WPF bypasses this property at runtime and calls GetValue and SetValue directly. However the CLR property is still needed to use the property in xaml.

public static readonly DependencyProperty TextProperty =

    DependencyProperty.Register("Text",

                                typeof(String),

                                typeof(FilterTextBox),

                                new UIPropertyMetadata(null,

                                    new PropertyChangedCallback(OnTextChanged),

                                    new CoerceValueCallback(OnCoerceText))

);

private static object OnCoerceText(DependencyObject o, Object value)

    FilterTextBox filterTextBox = o as FilterTextBox;

    if (filterTextBox != null)

        return filterTextBox.OnCoerceText((String)value);

    else

        return value;

private static void OnTextChanged(DependencyObject o,

                                  DependencyPropertyChangedEventArgs e)

    FilterTextBox filterTextBox = o as FilterTextBox;

    if (filterTextBox != null)

        filterTextBox.OnTextChanged((String)e.OldValue, (String)e.NewValue);

protected virtual String OnCoerceText(String value)

    return value;

protected virtual void OnTextChanged(String oldValue, String newValue)

public String Text

    // IMPORTANT: To maintain parity between setting a property in XAML

    // and procedural code, do not touch the getter and setter inside

    // this dependency property!

get

        return (String)GetValue(TextProperty);

set

        SetValue(TextProperty, value);

We'll want users of the control to be notified when the text in our TextBox has changed, so lets create a 'TextChanged' event.

public static readonly RoutedEvent TextChangedEvent =

    EventManager.RegisterRoutedEvent("TextChanged",

                                    RoutingStrategy.Bubble,

                                    typeof(RoutedEventHandler),

                                    typeof(FilterTextBox));

public event RoutedEventHandler TextChanged

    add { AddHandler(TextChangedEvent, value); }

    remove { RemoveHandler(TextChangedEvent, value); }

Now lets go back and modify our OnTextChanged method to raise our TextChanged event.

protected virtual void OnTextChanged(String oldValue, String newValue)

    // fire text changed event

    this.RaiseEvent(new RoutedEventArgs(FilterTextBox.TextChangedEvent, this));

With the base behavior mostly done, we can move on to creating a generic look for our control. Lets add a DockPanel with a Button and a TextBox, the Button docked to the right. Lets also bind the 'Text' property of the TextBox to the 'Text' property of our control. We want the 'UpdateSourceTrigger' to be 'PropertyChanged' so that the 'TextChanged' event we created will be fired every time the user types something into the TextBox. Notice that we don't want the TextBox to have a border because then we'd have two borders.

<ControlTemplate TargetType="{x:Type local:FilterTextBox}">

  <Border

      Background="{TemplateBinding Background}"

      BorderBrush="{TemplateBinding BorderBrush}"

      BorderThickness="{TemplateBinding BorderThickness}"

      CornerRadius="3">

    <DockPanel

      LastChildFill="True"

      Margin="1">

      <Button

        x:Name="PART_ClearFilterButton"

        Content="X"

        Width="20"

        ToolTip="Clear Filter"

        DockPanel.Dock="Right" />

      <TextBox

        x:Name="PART_FilterTextBox"

        Text="{Binding Path=Text,

                      Mode=TwoWay,

                      UpdateSourceTrigger=PropertyChanged,

                      RelativeSource={RelativeSource TemplatedParent}}"

        BorderBrush="{x:Null}"

        BorderThickness="0"

        VerticalAlignment="Center" />

    </DockPanel>

  </Border>

</ControlTemplate>

Take special note of the names of the controls. They both begin with 'PART_'. This is the standard way in WPF to signify controls that need to be replaced if you decide to change the template of the control. If someone templates your control, you need some way to identify that the types used for your parts need to be ones that your control can use. You can do this by using the TemplatePart attribute and giving it the name and type of your control parts.

[TemplatePart(Name = "PART_FilterTextBox", Type = typeof(TextBox))]

[TemplatePart(Name = "PART_ClearFilterButton", Type = typeof(Button))]

public class FilterTextBox : Control

...

We only want the 'Clear Filter' button to be showing when there is text in the TextBox, so lets create a DataTrigger to accomplish that for us.

<ControlTemplate TargetType="{x:Type local:FilterTextBox}">

  <Border>

...

  </Border>

  <ControlTemplate.Triggers>

    <DataTrigger Binding="{Binding Path=Text.Length, ElementName=PART_FilterTextBox}" Value="0">

      <Setter TargetName="PART_ClearFilterButton" Property="Visibility" Value="Collapsed" />

    </DataTrigger>

  </ControlTemplate.Triggers>

</ControlTemplate>

Now we want to be able to handle when a user clicks on the 'Clear Filter' button. You do this by overriding the OnApplyTemplate method. You can get a reference to your controls by calling GetTemplateChild and passing the name of the control. When the user clicks the 'Clear Filter' button we just want to remove any text in the TextBox. We'll use the same strategy to get a reference to the TextBox control.

public override void OnApplyTemplate()

    base.OnApplyTemplate();

    Button clearFilterButton = base.GetTemplateChild("PART_ClearFilterButton") as Button;

    if (clearFilterButton != null)

        clearFilterButton.Click += new RoutedEventHandler(ClearFilterButton_Click);

private void ClearFilterButton_Click(Object sender, RoutedEventArgs e)

    TextBox textBox = base.GetTemplateChild("PART_FilterTextBox") as TextBox;

    if (textBox != null)

        textBox.Text = String.Empty;

In the WPF Application project add a reference to the custom control project.

Now you can create a namespace for the controls project, labeled as controls here, and add your control to the form.

<Window

    x:Class="FilterTextBoxDemo.MainWindow"

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

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

    xmlns:controls="clr-namespace:FilterTextBox;assembly=FilterTextBox"

    Title="FilterTextBox Demo"

    Height="300"

    Width="300">

  <StackPanel>

    <controls:FilterTextBox />

  </StackPanel>

</Window>

And we have a working control!

To make sure that the control still works when templated, lets go ahead and make a simple template for it.

<Window ...>

  <Window.Resources>

    <Style x:Key="LOCAL_MyStyle" TargetType="{x:Type controls:FilterTextBox}">

      <Setter Property="BorderBrush" Value="CornFlowerBlue" />

      <Setter Property="BorderThickness" Value="2" />

      <Setter Property="Template">

        <Setter.Value>

          <ControlTemplate TargetType="{x:Type controls:FilterTextBox}">

            <Border

              Background="{TemplateBinding Background}"

              BorderBrush="{TemplateBinding BorderBrush}"

              BorderThickness="{TemplateBinding BorderThickness}"

              CornerRadius="10">

              <DockPanel

                LastChildFill="True"

                Margin="5">

                <Button

                  x:Name="PART_ClearFilterButton"

                  Content="--"

                  Width="30"

                  ToolTip="Clear Filter"

                  DockPanel.Dock="Left" />

                <TextBox

                  x:Name="PART_FilterTextBox"

                  Text="{Binding Path=Text,

                          Mode=TwoWay,

                          UpdateSourceTrigger=PropertyChanged,

                          RelativeSource={RelativeSource TemplatedParent}}"

                  BorderBrush="{x:Null}"

                  BorderThickness="0"

                  VerticalAlignment="Center" />

              </DockPanel>

            </Border>

            <ControlTemplate.Triggers>

              <DataTrigger Binding="{Binding Path=Text.Length, ElementName=PART_FilterTextBox}" Value="0">

                <Setter TargetName="PART_ClearFilterButton" Property="Visibility" Value="Collapsed" />

              </DataTrigger>

            </ControlTemplate.Triggers>

          </ControlTemplate>

        </Setter.Value>

      </Setter>

    </Style>

  </Window.Resources>

  <StackPanel>

    <controls:FilterTextBox

      BorderBrush="#ACBFE4"

      Margin="10"

      TextChanged="FilterTextBox_TextChanged"/>

    <controls:FilterTextBox

      Style="{StaticResource LOCAL_MyStyle}"

      Margin="10"

      TextChanged="FilterTextBox_TextChanged"/>

  </StackPanel>

</Window>

Hope that helps!

Joe

WPF Interoperability with Windows Forms and Office 2007

Joe — Mon, 03 Sep 2007 22:15:00 GMT

Keith encountered some interesting behavior while trying to build a Custom Task Pane hosting a WPF control in VSTO to use in Excel. (See my post on "Using WPF With VSTO & Office 2007").

"I click the search textbox and it appears to have focus... but, when I start typing, text goes into the active cell and not the textbox..."

Throwing together a simple control I experienced the same behavior:

Notice that the second TextBox contains the cursor, however the Task Pane "Test Addin" is not highlighted as if it's currently activated, which looks like this:

So what's going on here? Essentially it appears that the ElementHost is never getting a notification from the WPF message loop that a child control has taken input focus. Excel is also "greedy" on handling keyboard input if a Task Pane or other control does not have input focus. Reading this "Windows Forms and WPF Interoperability Input Architecture" MSDN article, it states:

In Windows Forms, keyboard messages are routed to the window handle of the control that has focus. In the ElementHost control, these messages are routed to the hosted element. To accomplish this, the ElementHost control provides an HwndSource instance. If the ElementHost control has focus, the HwndSource instance routes most keyboard input so that it can be processed by the WPF InputManager class.

So lets give the ElementHost focus! Using the new Routed Event architecture we can have our ElementHost be notified anytime any WPF element that inherits from UIElement has been clicked. I chose to use a Tunneling strategy to handle the MouseDown event. The third argument "true" of the AddHandler method says that we want to be notified of ALL MouseDown events, even if another control handles the event and prevents it from continuing on. You can read about Routed Events (Tunneling & Bubbling) in Adam Nathan's WPF Unleashed book, chapter 3. (Freely available to download from Time Sneath's blog.)

using Forms = System.Windows.Forms;
 
private ElementHost m_ElementHost;
private CustomTaskPane m_Pane;
private Forms.UserControl m_UserControl;
 
private void ThisAddIn_Startup(Object sender, System.EventArgs e)
{
    m_ElementHost = new ElementHost();
    m_ElementHost.Child = new UserControl2();
    m_ElementHost.Child.AddHandler(
        UIElement.PreviewMouseDownEvent,
        new RoutedEventHandler(PreviewMouseDown_Event),
        true
    );
    m_ElementHost.Dock = Forms.DockStyle.Fill;
    m_UserControl = new Forms.UserControl();
    m_UserControl.Controls.Add(m_ElementHost);
    m_Pane = this.CustomTaskPanes.Add(m_UserControl, "Test Addin");
    m_Pane.Visible = true;
}
 
private void PreviewMouseDown_Event(Object sender, RoutedEventArgs e)
{
    m_ElementHost.Focus();
}

Figure 3.9 (taken from Adam's book) shows the element hierarchy.

Using this same strategy you could handle only giving the ElementHost, and therefore the Task Pane, focus when say just a TextBox is clicked or got focus, or a Button clicked or got focus. However I thought using UIElement was a bit more succinct. Hope that helps!

Screencast: Building Interoperable Services using WSIT and WCF 3.0

Joe — Mon, 27 Aug 2007 14:46:27 GMT

In this screencast I demonstrate how to build a secure, interoperable service using WSIT (Web Services Interoperability Technologies) and WCF 3.0 (Windows Communication Foundation). This screencast uses certificates to secure a business to business scenario. Click the image below to watch the screencast online. You can double-click the player for full-screen mode. The player is using Silverlight 1.0.

Download directly: http://xamlcoder.com/demos/net30/wsitcertificates/screencast.wmv

This is the first screencast I've done, so let me know what you think. If you'd like to see screencasts on other topics (relating to .NET 3.0 technologies) post your ideas!

Demos Download: http://xamlcoder.com/joe/downloads/WSITDemos.zip

Links:

NetBeans IDE: http://netbeans.org

WSIT Dev Site: https://wsit.dev.java.net/

Glassfish Dev Site: https://glassfish.dev.java.net/downloads/v2-b50g.html

Java One Lab: Make Java and .NET 3.0 interoperability work with WSIT

Ant Script for Certificates: CopyV3 script

.NET 3.0 Visual Studio Extensions: http://www.microsoft.com/downloads/details.aspx?familyid=f54f5537-cc86-4bf5-ae44-f5a1e805680d&displaylang=en

This screencast was recorded using the free desktop recording software, CamStudio, and encoded using Microsoft Expression Media Encoder.

P.S. I know I refer to WSIT as "Web Services Interoperability Toolkit" instead of "Technologies" - sorry!