如何在动态列表框中实现“添加新项目”文本并更改其在添加项目上的位置？答案

【问题标题】：How can I implement "add new item" text in dynamic listbox and change its position on item added?如何在动态列表框中实现“添加新项目”文本并更改其在添加项目上的位置？
【发布时间】：2014-06-10 19:12:02
【问题描述】：

我有与可观察集合绑定的动态列表框，并包含用于显示列表属性的文本框。我想“添加新标签”作为列表框的最后一项，然后单击标签变成与列表框数据模板绑定的文本框。所以视觉结构是这样的：

场景 1：当列表框中没有项目时：

列表框：

添加新项目

场景 2：当列表框中有 3 个项目时：

列表框：

项目1
项目2
项目3
添加新项目

当用户点击添加新项目时，该标签应替换为文本框，用户可以在其中添加新项目。并且“添加新项目”标签下移了一级。

有谁知道我如何在 WPF 中做到这一点？

我的代码：

 <ListBox Name="ListUrls"   ItemsSource="{Binding . ,Source=ListSourceCollection,BindsDirectlyToSource=True, UpdateSourceTrigger=PropertyChanged}"
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30"/>
                    </Grid.ColumnDefinitions>
                    <RadioButton>
                        <WrapPanel>
                        <TextBox Name="TextBoxList" Text="{Binding Path=urlString, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" Focusable="{Binding IsEditing}" FocusableChanged="TextBoxList_FocusableChanged" Background="Transparent" Margin="0" BorderThickness="0" Width="150" Foreground="Gray" MouseEnter="TextBoxList_MouseEnter" MouseLeave="TextBoxList_MouseLeave">                
                        </TextBox>
                        </WrapPanel>
                    </RadioButton>

                    <ToggleButton Name="EditButton" Content="Edit" Grid.Column="1" Click="Button_Click" IsChecked="{Binding IsEditing}" HorizontalAlignment="Right" Margin="0">
                        <ToggleButton.Style>
                            <Style TargetType="ToggleButton">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsEditing}" Value="False"></Condition>
                                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Path=IsSelected}" Value="True"></Condition>
                                        </MultiDataTrigger.Conditions>

                                        <MultiDataTrigger.Setters>
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </MultiDataTrigger.Setters>
                                    </MultiDataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ToggleButton.Style>
                    </ToggleButton>


                    <Button Content="Delete" Grid.Column="2" Click="Button_Click_1" HorizontalAlignment="Right" Margin="0">
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding="{Binding IsEditing}" Value="False"></Condition>
                                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1}, Path=IsSelected}" Value="True"></Condition>
                                        </MultiDataTrigger.Conditions>
                                        <MultiDataTrigger.Setters>
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </MultiDataTrigger.Setters>
                                    </MultiDataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>

                </Grid>
            </DataTemplate>

        </ListBox.ItemTemplate>

    </ListBox>

【问题讨论】：

-1。请包含您已经尝试过的相关代码。
@HighCore 我添加了代码。我猜切换按钮和按钮的代码在这里无关紧要......问题只关注绑定到属性的文本框。
我建议在您的项目源中使用CompositeCollection 以及定义的DataTemplate，它代表Add new item。要处理添加新项目，您可以通过 VM 完成，然后在 CommandParameter 中传递数据。最后，只需调用您的 ObservableCollection Add() 方法就可以了。如果您需要更多信息，请告诉我们 HTH。
@XAMlMAX 如果您可以在某处有类似的代码示例，或者您可以提供实现此的基本想法，那将非常有帮助。

标签： c# wpf xaml dynamic listbox

【解决方案1】：

要在您的ListView 中拥有“静态”属性，您需要：

<CollectionViewSource Source="{Binding ObservableCollection}" x:Key="requiredList"/>

在您的ListView 中，您分配ItemsSource，如下所示：

<ListView.ItemsSource>
<CompositeCollection>
    <CollectionContainer Collection="{Binding Source={StaticResource requiredPeople}}"/>
</CompositeCollection>
</ListView.ItemsSource>
<Button Content="Add new Item" Command="..." ComandParameter="..."/>

我不记得是否需要将按钮包装在 ListViewItem 中。

请记住，您需要 VM 上的临时字段才能将其绑定到 DataTemplate。
您还需要 ICommand 在您的 VM 上，这样您可以在处理命令时将新项目添加到您的收藏中。
注意：
这是我的想法在CollectionContainer 中使用Collection 而不是Source。

【讨论】：