wpf listview button to add a row between the lines

Question

Hey stackoverflow communite

My problem is that I got a listview with different bindings (see pic 1 and XAML) and when somebody clicks on the “+” button a row should be inserted above this clicked line with blank or in this case with 00 00 00 00 information(see pic 2).

Picture One

Picture Two

XAML:

    <ListView Margin="49,61,0,0" HorizontalAlignment="Left" MaxWidth="600" VerticalAlignment="Top" Name="lvDataBinding" Height="227" Width="402" >

        <ListView.ItemTemplate>
            <DataTemplate>
                <WrapPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding fieldblock_0}" Background="{Binding background_fieldblock_0}"  />
                    <TextBlock Text=" ][ " />
                    <TextBlock Text="{Binding fieldblock_1}" Background="{Binding background_fieldblock_1}"  />
                    <TextBlock Text=" ][ " />
                    <TextBlock Text="{Binding fieldblock_2}" Background="{Binding background_fieldblock_2}"  />
                    <TextBlock Text=" ][ " />
                    <TextBlock Text="{Binding fieldblock_3}" Background="{Binding background_fieldblock_3}" />
                    <TextBlock Text=" ][ " />
                    <TextBlock Text="{Binding fieldblock_4}" Background="{Binding background_fieldblock_4}" />
                    <TextBlock Text=" ]" />

                    <Button Click = "addrowbutton" Tag="{Binding}" Height="18" >+  </Button>
                </WrapPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    </Grid>

MainWindow.xaml.cs:

  public MainWindow()
    {
        InitializeComponent();
        List<mainpart_compare> items5 = new List<mainpart_compare>();
        for (int i = 0; i < 5; i++)
        {
            items5.Add(new mainpart_compare()
                      {
                          fieldblock_0 = "00 06 ",
                          fieldblock_1 = "00 06 ",
                          fieldblock_2 = "00 06 ",
                          fieldblock_3 = "00 06 ",
                          fieldblock_4 = "00 06 ",
                          background_fieldblock_0 = "white",
                          background_fieldblock_1 = "white",
                          background_fieldblock_2 = "white",
                          background_fieldblock_3 = "white",
                          background_fieldblock_4 = "white",
                      });

        }
        lvDataBinding.ItemsSource = items5;
    }

    public class mainpart_compare
    {

        // Goto Field information
        public string fieldblock_0 { get; set; }
        public string fieldblock_1 { get; set; }
        public string fieldblock_2 { get; set; }
        public string fieldblock_3 { get; set; }
        public string fieldblock_4 { get; set; }
        public string background_fieldblock_0 { get; set; }
        public string background_fieldblock_1 { get; set; }
        public string background_fieldblock_2 { get; set; }
        public string background_fieldblock_3 { get; set; }
        public string background_fieldblock_4 { get; set; }
    }

    private void addrowbutton(object sender, RoutedEventArgs e)
    {
        // here is the part where i dont know what to do.

    }

Answer 1

Thx for the answer. I want to modify the code a bit, but somehow it doesn't even show me anything and instead, it shows the error:

BindingExpression path error: 'Lista' property not found on 'object' ''MainWindow' (Name='')'. BindingExpression:Path=Lista; DataItem='MainWindow' (Name='');

  <ListView ItemsSource="{Binding lista}" AlternationCount="{Binding Lista.Count}" Name="TestVIew">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="40" Text="{Binding (ItemsControl.AlternationIndex),RelativeSource={RelativeSource AncestorType=ListViewItem}}"/>
                    <TextBlock Width="40" Text="{Binding Text_nr1}"Background="{Binding Text_nr1_background}"/>
                    <TextBlock Width="40" Text="{Binding Text_nr2}" Background="{Binding Text_nr1_background}"/>

                    <Button Width="40" Content="+" Command="{Binding RelativeSource={RelativeSource AncestorType=ListView}, Path=DataContext.Cmd}"
                        CommandParameter="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ListViewItem}}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Now I want to change the background of 2 different TextBlocks (Background="{Binding Text_nr1_background}").

    public ObservableCollection<Lista> lista;
    private RelayCommand cmd;
    public RelayCommand Cmd
    {
        get { return cmd ?? (cmd = new RelayCommand(new Action<object>(AddRow))); }
    }
    public MainWindow()
    {
        lista = new ObservableCollection<Lista>() { new Lista() { Text_nr1 = "test", Text_nr1_background="green", Text_nr2_background="red",Text_nr2 = "test2" } };
        InitializeComponent();
        this.DataContext = this;
    }

    void AddRow(object obj)
    {
        int numer;
        Int32.TryParse(obj.ToString(), out numer);
        lista.Insert(numer, new Lista() { Text_nr1 = "test", Text_nr1_background = "green", Text_nr2_background = "red", Text_nr2 = "test2" });
    }

Lista class:

public class Lista
{
    public string Text_nr1 { get; set; }
    public string Text_nr1_background { get; set; }
    public string Text_nr2 { get; set; }
    public string Text_nr2_background { get; set; }  
}

Answer 2

My idead is to determine number of row you press and then insert in this place into your List. Your items5 is my List, although I create it as ObservaebleCollection in order to any change be reflected.

 <ListView ItemsSource="{Binding Lista}" AlternationCount="{Binding Lista.Count}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Width="40" Text="{Binding (ItemsControl.AlternationIndex),RelativeSource={RelativeSource AncestorType=ListViewItem}}"/>
                    <TextBlock Width="40" Text="{Binding }"/>
                    <Button Width="40" Content="+" Command="{Binding RelativeSource={RelativeSource AncestorType=ListView}, Path=DataContext.Cmd}"
                            CommandParameter="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource AncestorType=ListViewItem}}"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    public ObservableCollection<int> Lista { get; set; }
    private RelayCommand cmd;
    public RelayCommand Cmd
    {
        get { return cmd ?? (cmd = new RelayCommand(new Action<object>(AddRow))); }
    }
    public MainWindow()
    {
        Lista = new ObservableCollection<int>() { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
        InitializeComponent();
        this.DataContext = this;
    }

    void AddRow(object obj)
    {
        int numer;
        Int32.TryParse(obj.ToString(), out numer);
        Lista.Insert(numer, 55);           
    }

I kept inserting 55 to see changes. Normal output :

First column is row number, second is value in List. You will have your [00...] instead. When I click last row I will have added 55 since

Lista.Insert(numer, 55);