1

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.

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.