Silverlight / WPF自定义控件模板帮助

时间:2009-12-04 04:01:23

标签: wpf-controls silverlightcontrols

我希望创建一个我称之为“AutoCompleteListBox”的控件。如果您曾经使用过hotmail发送电子邮件,那么to:address line的工作方式就是我想创建的。你有一个看起来像输入框的东西,当你输入时,你得到一个匹配对象的下拉列表。选择对象(联系人)后,它将作为矩形对象添加到输入框中。可以通过这种方式添加多个对象,输入框就像一个包裹面板。您可以通过退回对象或单击每个对象来删除对象。

我的方法是从子类化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”来显示绑定的项目但是如何将我的文本框添加到与绑定项目相同的面板中?

我非常感谢任何帮助。这是否是正确的方式呢?非常感谢。

1 个答案:

答案 0 :(得分:0)

对items控件进行子类化是一个好的开始,但我认为controltemplate应该设置有点不同。 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>