設計類似於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風格的「自定義」編輯控件「收件人」框

回答

相關問題