What am I doing wrong with my ItemsControl & databinding?

Question

I'm reworking my simple hex editor to practice using what I've recently learned about data binding in WPF. I'm not sure what I'm doing wrong here.

As I understand it, for each byte in the collection "backend" (inherits from ObservableCollection), my ItemsControl should apply the DataTemplate under resources. This template is just a textbox with a binding to a value converter. So I'm expecting to see a row of textboxes, each containing a string representation of one byte. When I use this XAML, all I get is a single line of uneditable text, which as far as I can tell doesn't use a textbox. What am I doing wrong?

I've pasted my XAML in below, with the irrelevant parts (Menu declaration, schema, etc) removed.

<Window ...>
        <Window.Resources>
            <local:Backend x:Key="backend" />
            <local:ByteConverter x:Key="byteConverter" />
            <DataTemplate DataType="byte">
                <TextBox Text="{Binding Converter={StaticResource byteConverter}}" />                    
            </DataTemplate>
        </Window.Resources>
        <StackPanel>
            <ItemsControl ItemsSource="{Binding Source={StaticResource backend}}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </StackPanel>
    </Window>

Robert Rossney Robert Rossney · Accepted Answer · 2010-06-01T19:40:20

You want to bypass the default value converter for type names when you're using types outside the default namespace. And you also want to use the type name that's returned by GetType(), not the type name that the C# compiler uses.

First, make sure you've declared a namespace prefix that references the System namespace, e.g.:

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

And in your DataTemplate, reference the type using the Type markup extension:

DataType="{x:Type sys:Byte}"

Edit

Here's a minimal working example:

<Window x:Class="ByteTemplateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:ByteTemplateDemo="clr-namespace:ByteTemplateDemo" Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <DockPanel.Resources>
            <ByteTemplateDemo:ByteConverter x:Key="ByteConverter"/>
            <DataTemplate DataType="{x:Type sys:Byte}">
                <TextBox Foreground="Red" Text="{Binding Path=., Converter={StaticResource ByteConverter}}"/>
            </DataTemplate>
        </DockPanel.Resources>
        <ItemsControl x:Name="Items" ItemsSource="{Binding}"/>
    </DockPanel>
</Window>

The value converter:

public class ByteConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Byte b = (Byte)value;
        return "b" + b.ToString();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string strValue = value as string;
        Byte result;
        if (Byte.TryParse(strValue, out result))
        {
            return result;
        }
        return DependencyProperty.UnsetValue;
    }
}

And in the code-behind:

public MainWindow()
{
    InitializeComponent();
    ObservableCollection<byte> bytes = new ObservableCollection<byte>();
    bytes.Add(11);
    bytes.Add(12);
    bytes.Add(13);
    bytes.Add(14);
    Items.DataContext = bytes;
}

This demonstrates that the template and the value converter are both being employed (since you'll see text boxes with red values that begin with "b" on the screen).

Note that two-way binding can't work in this particular scenario, as two-way binding requires a property name. In order to do two-way binding, you'll need to create a class that exposes a named property of type Byte and bind to an observable collection of those objects.

What am I doing wrong with my ItemsControl & databinding?

1 Answers