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

Question

I have dynamic listbox bound with observable collection and contains textbox to display list property. I want "add new label" as a last item of listbox and click on label turns into textbox which is bound with listbox data template. So visual structure is like this:

Scenario 1: When No item in listbox:

ListBox:

1. Add new Item

Scenario 2: When 3 items in listbox:

ListBox:

1. Item1
2. Item2
3. Item3
4. Add new Item

When user click on add new item, that label should be replaced by textbox and user can add new item in it. And "Add New Item" label moved down one step.

Anyone knows how can I do that in WPF?

My code:

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

Answer 1

To have a "Static" property in your ListView you need:

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

in your ListView you assign ItemsSource like so:

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

I can't remember if you need to wrap the button in ListViewItem or not.

Please bare in mind that you will need temporary field on your VM to bind it to the DataTemplate.
You will also need ICommand on your VM this way you can add new Item to your collection when you handle your command.
NOTE:
This is from my head I don't guarantee that this will work but it should give you an idea of how to tackle the problem.
EDIT
Instead of the Source use Collection in the CollectionContainer .