Справка по шаблону пользовательского элемента управления Silverlight / WPF

Question

Я надеюсь создать элемент управления, который я называю "AutoCompleteListBox". Если вы когда-либо использовали hotmail для отправки электронной почты, то я хочу создать строку адреса to:. У вас есть то, что выглядит как поле ввода, и при вводе вы получаете выпадающий список соответствующих объектов. После выбора объекта (контакта) он добавляется в поле ввода в виде прямоугольного объекта. Таким образом можно добавить несколько объектов, и поле ввода действует как панель переноса. Вы можете удалять объекты, возвращая их назад или нажимая кнопку x на каждом.

Мой подход состоял в том, чтобы начать с создания подкласса ItemsControl. Я начал писать его шаблон управления, который в основном представляет собой панель переноса, в которой я хочу показать связанные элементы + текстовое поле. Я не знаю, как поместить связанные элементы и текстовое поле в одну и ту же панель переноса. Вот что у меня есть:

<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>

Я не знаю, как выразить то, что я хочу. Я знаю, что вы можете использовать "ItemsPresenter" в шаблоне элемента управления, который показывает связанные элементы, но тогда как я могу добавить свое текстовое поле в ту же панель, что и связанные элементы?

Я был бы очень признателен за любую помощь. Это правильный способ даже пойти на это? Спасибо большое.

Answer 1

Подклассы элементов управления - хорошее начало, но я думаю, что шаблон управления должен быть немного другим. Набор инструментов Silverlight содержит отличную коробку автозаполнения, которую вы можете использовать именно для этой цели. Объедините это с отдельным элементом управления элементами, и у вас должно получиться что-то, что можно будет стилизовать так, чтобы оно выглядело точно так же, как поле "Кому" для живой почты.

<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>