自定義模板組合框與特殊的非模板項目

Question

我有一個RadTreeView，在每個項目中都有一個RadCombobox與一些元素。現在我需要在每個組合框中添加一些「特殊」項目。用戶可以點擊該選項可將組合框中添加新的元素：

我當前的代碼：

<DataTemplate x:Key="Monitor"> 
     <Grid Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="16" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <Image Grid.Column="0" Height="16" Width="16" Source="icons\monitor.png" /> 
      <TextBlock Text="{Binding Name}" Margin="5 0 0 0" Grid.Column="1" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Center"/> 

      <!-- PROBLEM IS HERE --> 
      <telerik:RadComboBox Name="RadComboSchedule" 
       Grid.Column="2" 
       Margin="10 0 0 0" 
       Width="155" 
       ItemsSource="{Binding Source={StaticResource DataSource}, Path=ScheduleDataSource}" 
       ItemTemplate="{StaticResource ComboBoxTemplate}" 
      > 

      </telerik:RadComboBox> 
      <Button Name="BtnRemoveMonitor" Grid.Column="3" Style="{StaticResource ButtonListBoxItemStyle}" Template="{StaticResource RemoveButtonTemplate}" /> 
     </Grid> 
    </DataTemplate> 


<HierarchicalDataTemplate x:Key="Group" 
      ItemTemplate="{StaticResource Monitor}" 
      ItemsSource="{Binding Monitors}"> 
       <TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
</HierarchicalDataTemplate> 


<telerik:RadTreeView 
    Name="RadTreeViewGroups" 
    Height="auto" 
    Width="auto" 
    ItemsSource="{Binding Source={StaticResource DataSource}, Path=GroupsDataSource}" 
    ItemTemplate="{StaticResource Group}" 
    > 
</telerik:RadTreeView> 

所以，我都喜歡在沒有元素的屏幕截圖「添加新項」。 任何想法？

PS使用標準的WPF Combobox和TreeView控件不是問題。

Answer 1

您可以在名稱爲「ADD NEW ITEM」的ComboBox的DataSource中創建一個新項目，並在用戶選擇該項目時進行處理。

private void SelectItem(object sender, SelectionChangedEventArgs e) 
{ 
    if (e.AddedItems[0].ToString() == "new") 
    { 
     string newItem = "completely new item"; 
     dataSource.Add(newItem); 
     ((ComboBox)sender).SelectedItem = newItem; 
    } 
} 

在這個問題上，你可以看到一個更好的例子，每一項都是一個類的實例，所以它更容易處理「添加項目」的請求：
Databound WPF ComboBox with 'New...' item

---

編輯（關於'添加項目'按鈕模板）：
基於上面的示例

有了這個類

public class DisplayClass 
{ 
    public string Name { get; set; } 
    public bool IsDummy { get; set; } 
} 

您綁定ComboBox.ItemsSource到ObservableCollection像這樣的：

public ObservableCollection<DisplayClass> DataSource { get; set; } 

添加一個 「虛擬」 的項目，以收集

DataSource.Add(new DisplayClass { Name = "ADD ITEM", IsDummy = true }); 

然後你處理用類似這樣的項目選擇：

private void SelectItem(object sender, SelectionChangedEventArgs e) 
{ 
    var comboBox = (ComboBox)sender; 
    var selectedItem = comboBox.SelectedItem as DisplayClass; 

    if (selectedItem != null && selectedItem.IsDummy) 
    { 
     //Creating the new item 
     var newItem = new DisplayClass { Name = comboBox.Items.Count.ToString(), IsDummy = false }; 
     //Adding to the datasource 
     DataSource.Add(newItem); 

     //Removing and adding the dummy item from the collection, thus it is always the last on the 'list' 
     DataSource.Remove(selectedItem); 
     DataSource.Add(selectedItem); 

     //Select the new item 
     comboBox.SelectedItem = newItem; 
    } 
} 

要正確顯示的內容，您需要更改ComboBox.ItemTemplate，使圖像不可見時該項目是虛擬

<ComboBox ItemsSource="{Binding DataSource}" SelectionChanged="SelectItem"> 
    <ComboBox.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Orientation="Horizontal"> 
       <TextBlock Text="{Binding Name}" Width="180" /> 
       <Image HorizontalAlignment="Right" Source="..." MouseLeftButtonUp="DeleteItem"> 
        <Image.Style> 
         <Style TargetType="Image"> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding IsDummy}" Value="True"> 
            <Setter Property="Visibility" Value="Hidden" /> 
           </DataTrigger> 
          </Style.Triggers> 
         </Style> 
        </Image.Style> 
       </Image> 
      </StackPanel> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox>