Silverlight / WPF Custom Control Template Help

Question

Hello. I'm hoping to create a control that I call an "AutoCompleteListBox". If you've ever used hotmail to send an e-mail the way the to: address line works is what I wish to create. You have what looks like an input box and as you type you get a dropdown of matching objects. Once you select an object (contact) it is added into the input box as a rectangular object. Multiple objects can be added this way and the input box acts like a wrap panel. You can delete objects by backspacing them or clicking the x button on each.

My approach was to begin by subclassing ItemsControl. I've started to write its control template which is basically a wrap panel that I want to show the bound items + a text box. I don't know how to get both the bound items and the textbox to be in the same wrap panel. Here's what I have:

<Style TargetType="ctrl:AutoCompleteListBox">
    <Setter Property="Width" Value="200"/>
    <Setter Property="Height" Value="100"/>
    <Setter Property="Background" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ctrl:AutoCompleteListBox">
                <ScrollViewer x:Name="RootScrollViewer" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Padding="0" Background="{TemplateBinding Background}">
                    <toolkit:WrapPanel IsItemsHost="True">
                        <!--Items Bound To ItemSource Go Here-->
                        <TextBox x:Name="txtInput"/>
                    </toolkit:WrapPanel>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>        
</Style>

I don't know how to express what I want. I know you can use an "ItemsPresenter" in the control template which does show the bound items but then how can I add my textbox into the same panel as the bound items?

I'd greatly appreciate any help. Is this the right way to even go about it? Thanks very much.

Answer 1

Subclassing the items control is a good start, but I think the controltemplate should be setup a bit different. The Silverlight toolkit contains an excellent autocomplete box that you can use for this exact purpose. Combine this with a separate items control and you should have something that can be styled to look exactly like the live mail "To" field.

<ControlTemplate>
  <toolkit:WrapPanel>
    <ItemsControl ItemsSource="{TemplateBinding Items}">
      <ItemsControl.ItemsPanel>
        <StackPanel Orientation="Horizontal"/>
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
        <!-- Add data template for the previously added items here -->
      </ItemsControl.ItemTemplate>
    </ItemsControl>
    <toolkit:AutoCompleteBox ItemsSource="{TemplateBinding AutoCompleteItems}" />
  </toolkit:WrapPanel>
</ControlTemplate>