设计类似于Hotmail风格的“自定义”编辑控件“收件人”框

我正在设计一个自定义控件，用于模拟Hotmail风格的“To”文本框，它允许用户输入以分号分隔的字符串。该控件的行为就像一个文本框，在每次按下或输入分号时都会创建一个包含输入的文本的文本框（一个文本块），该文本可以单独处理。设计类似于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的数据。控件的外观必须像文本框一样给出。现在，我已将列表视图项绑定到xml文档的xml节点，以显示文本框，我在文档中添加了一个空的xmlnode，并更改了coressponding listviewitem的控件模板，以使其显示为文本框。在按压在文本框中一个新的XML节点被附加到在倒数第二个位置含有的innerText设置到文本框的文本基础XML输入（最后现在的位置是虚节点）

用于文本框模板是：

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

但在底层源xml中添加一个空虚拟xmlnode的想法，以便我可以模拟列表视图的编辑似乎hacky。有没有更干净的方式来做到这一点。

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

来源

2012-04-01 Jasmeet Singh

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

来源

2012-07-12 12:00:32

设计类似于Hotmail风格的“自定义”编辑控件“收件人”框

回答

相关问题