Question

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

控件是通过listview实现的，其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是绑定到一组具有共同父级的xmlnode的数据。必须给出控件的外观和感觉，使其看起来像文本框。现在，我将listview项绑定到xml文档的xml节点，以显示文本框我在文档中添加了一个空的xmlnode，并更改了coressponding listviewitem的控件模板，使其显示为文本框。在文本框中按Enter键时，新的xml节点将被附加到底层xml的第二个位置，其中包含设置为文本框文本的innertext（最后一个位置是虚拟节点）

用于文本框的模板是：

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

但是在底层源xml中添加一个空的虚拟xmlnode以便我可以模拟listview的编辑的想法似乎很容易。有没有更清洁的方法来做到这一点。

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

Answer 1

我有同样的问题并找到了一些解决方案;您可以查看回复和评论here。

设计类似于hotmail样式“To”框的自定义编辑控件

1 个答案: