wpf - 具有特殊非模板项的自定义模板组合框

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

您可以在其中创建一个DataSource名为ComboBox“ADD NEW ITEM”的新项目，并在用户选择它时进行处理。

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>