Пользовательский шаблон со списком со специальным элементом без шаблона

У меня есть 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.


person Jean DuPont    schedule 17.01.2013    source источник


Ответы (1)


Вы можете создать новый элемент в DataSource из ComboBox с именем «ДОБАВИТЬ НОВЫЙ ПУНКТ» и обрабатывать его, когда пользователь выбирает его.

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;
    }
}

В этом вопросе вы можете увидеть лучший пример того, что каждый элемент является экземпляром класса, поэтому проще обрабатывать запрос «добавить элемент»:
Комбобокс WPF с привязкой к данным с элементом "Новый..."


Изменить (о шаблоне кнопки "Добавить элемент"):
На основе приведенного выше примера

Наличие этого класса

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>
person Wiley Marques    schedule 17.01.2013