设计一个类似于hotmail风格的“收件人”框的自定义编辑控件答案

【问题标题】：Designing a custom edit control similar to hotmail style "To" box设计一个类似于hotmail风格的“收件人”框的自定义编辑控件
【发布时间】：2012-07-12 20:00:32
【问题描述】：

我正在设计一个自定义控件，用于在我的应用程序中模拟 hotmail 样式的“收件人”文本框，让用户输入分号分隔的字符串。该控件的行为类似于文本框，在每次按下或输入分号时都会创建一个框（一个文本块实际上），其中包含可以单独操作的输入文本。

控件是通过一个列表视图实现的，它的 ItemPresenter 设置为 WrapPanel

XAML 如下所示：

<ListView x:Name="col" ItemContainerStyle="{StaticResource ContainerStyle}">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <local:MyWrapPanel Orientation="Horizontal" MinWidth="400"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>

<Style TargetType="{x:Type ListViewItem}" x:Key="ContainerStyle">
            <Setter Property="ContentTemplate" Value="{StaticResource BoxView}" />
<Style.Triggers>
 <Trigger Property="Tag" Value="Edit">
      <Setter Property="ContentTemplate" Value="{StaticResource BoxViewEdit}" />
 </Trigger>
</Style.Triggers>
</Style>

listviewitems（框）的控件模板如下所示：

      <DataTemplate x:Key="BoxView">
       <Border BorderThickness="1" BorderBrush="Brown" Background="Beige" Margin="1,1,1,0" CornerRadius="6" >
            <StackPanel Orientation="Horizontal">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock  Grid.Column="0" Grid.Row="0" Margin="5,5,5,0" Height="20" Text="{Binding XPath=''}"/>
                    <DockPanel  Grid.Column="1" Grid.Row="0">
                        <Image Source="edit8.png" MouseLeftButtonUp="edit_MouseLeftButtonUp" ToolTip="Edit" Margin=" 10,0,0,0"></Image>
                        <Image Source="cancel8.png" MouseLeftButtonUp ="cancel_MouseLeftButtonUp" ToolTip="Remove" Margin=" 5,0,5,0"></Image>
                    </DockPanel>
                </Grid>
            </StackPanel>
        </Border>
    </DataTemplate>

实际上，listview 是绑定到一组具有共同父节点的 xmlnodes 的数据。必须赋予控件的外观，使其看起来像一个文本框。现在，我将 listview 项绑定到 xml 文档的 xml 节点，为了显示文本框，我在文档中添加了一个空的 xmlnode，并更改了对应的 listviewitem 的控制模板，使其显示为文本框。在文本框中按回车键后，一个新的 xml 节点将附加到底层 xml 的倒数第二个位置，其中包含设置为文本框文本的内部文本（最后一个位置是虚拟节点）

用于文本框的模板是：

<DataTemplate x:Key="BoxViewEdit">
  <TextBox  Margin="0,5,5,0" Background="White" MaxWidth="400" BorderThickness="1" Text="{Binding XPath=''}"/>
</DataTemplate>

但是在底层源 xml 中添加一个空的虚拟 xmlnode 以便我可以模拟列表视图的编辑的想法似乎很老套。有没有更清洁的方法。

我想要的是用 wrappanel 的内容无缝地包装如图所示的文本框，而不通过创建一个虚拟 xmlnode 将其添加到 wrappanel 本身。

【问题讨论】：

标签： wpf wpf-controls

【解决方案1】：

我遇到了同样的问题并找到了一些解决方案；您可以查看回复和 cmets here。

【讨论】：