wpf autocompletebox binding

Question

I've created some UserControls which are wrapping some standard controls, for example: a textbox/combobox + Image + textblock. I'm trying to do the same thing with AutoCompleteBox and have failed so far... The list of items is shown fine, I can select na item, but that doesn't trigger a change to the SelectedItem. I'm using almost the same code for combobox so not sure what's wrong...

Anyway I've played around with ValueMemberPath / ValueMemberBinding on the AutoCompleteBox but not sure if that's the way to go.

The UserControl xaml:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Margin="0,0,2,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Source="{Binding ElementName=ACProperty, Path=ImageSource}" VerticalAlignment="Center"
                   MaxHeight="30" MaxWidth="30" Margin="1" Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality"/>

            <TextBlock Text="{Binding ElementName=ACProperty, Path=Label}" VerticalAlignment="Center"
                       HorizontalAlignment="Left" Grid.Column="1" Margin="1" TextWrapping="Wrap" Width="100" />
        </Grid>

        <toolkitInput:AutoCompleteBox FilterMode="ContainsOrdinal" IsTextCompletionEnabled="True"
                                      ItemsSource="{Binding ElementName=ACProperty, Path=ItemsSource}" 
                                      SelectedItem="{Binding ElementName=ACProperty, Path=SelectedItem}"
                                      MinimumPrefixLength="2"
                                      MinimumPopulateDelay="300"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Stretch" Grid.Column="1" Margin="1,1,2,1" />

    </Grid>

The code behind:

public static DependencyProperty LabelProperty = DependencyProperty.Register(
        "Label", typeof(string), typeof(AutoCompleteProperty));

    public static readonly DependencyProperty ItemsSourceProperty =
       DependencyProperty.Register("ItemsSource", typeof(object), typeof(AutoCompleteProperty));

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(AutoCompleteProperty),
        new FrameworkPropertyMetadata() { BindsTwoWayByDefault = true });

    public static DependencyProperty ImageSourceProperty = DependencyProperty.Register(
        "ImageSource", typeof(string), typeof(AutoCompleteProperty));

    public object ItemsSource
    {
        get
        {
            return (object)GetValue(ItemsSourceProperty);
        }
        set
        {
            SetValue(ItemsSourceProperty, value);
        }
    }

    public object SelectedItem
    {
        get
        {
            return (object)GetValue(SelectedItemProperty);
        }
        set
        {
            SetValue(SelectedItemProperty, value);
        }
    }


    public string Label
    {
        get
        {
            return (string)GetValue(LabelProperty);
        }
        set
        {
            SetValue(LabelProperty, value);
        }

    }

    public string ImageSource
    {
        get
        {
            return (string)GetValue(ImageSourceProperty);
        }
        set
        {
            SetValue(ImageSourceProperty, value);
        }

    }

And in a UserControl/Window where I would like to use it:

<cont:AutoCompleteProperty Label="Product Category"
                            ItemsSource="{Binding Path=ProductCategories}"
                            SelectedItem="{Binding Path=ProductCategory}"
                            ImageSource="..."/>

Answer 1

I have updated binding in the following code....

<UserControl x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Height="350" Width="525"
             xmlns:toolkitInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
             x:Name="root"
             >
    <Grid>![enter image description here][1]
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Margin="0,0,2,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Image Source="{Binding ImageSource,ElementName=root}" VerticalAlignment="Center" MaxWidth="100" Margin="1" Grid.Column="0" RenderOptions.BitmapScalingMode="HighQuality"/>

            <TextBlock Text="{Binding Label,ElementName=root}" DataContext="{Binding RelativeSource={RelativeSource Self}}" VerticalAlignment="Center"
                       HorizontalAlignment="Left" Grid.Column="1" Margin="1" TextWrapping="Wrap" Width="100" />
        </Grid>

        <toolkitInput:AutoCompleteBox FilterMode="ContainsOrdinal" IsTextCompletionEnabled="True"
                                      ItemsSource="{Binding ItemsSource,ElementName=root}"
                                      SelectedItem="{Binding SelectedItem,ElementName=root}"
                                      MinimumPrefixLength="2"
                                      MinimumPopulateDelay="300"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Stretch" Grid.Column="1" Margin="1,1,2,1" />

    </Grid>

</UserControl>

Here is a image of the window using the above code