How to Get the Index of ListView Row on Button Click

Question

I am making a wpf Application and encountered a Problem. I have used a listview and added a Button in it via Xaml.

 <ListView x:Name="list_View" Grid.Column="2" Margin="0,0,0,53" Grid.Row="1" MouseDoubleClick="list_View_MouseDoubleClick" ItemContainerStyle="{DynamicResource alternatingListViewItemStyle}" AlternationCount="2">
        <ListView.Style>
            <Style TargetType="{x:Type ListView}">
                <Setter Property="BorderBrush" Value="Blue"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </ListView.Style>
        <ListView.Resources>
            <Style x:Key="alternatingListViewItemStyle" TargetType="{x:Type ListViewItem}">
                <!-- setting row height here -->
                <Setter Property="Height" Value="30" />
                <Setter Property="BorderBrush" Value="Blue"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Background" Value="#E7F8FE"/>

            </Style>

        </ListView.Resources>

        <ListView.View>

            <GridView>
                <GridViewColumn Header="Product Name"  Width="100"  DisplayMemberBinding="{Binding Product_Name}"/>
                <GridViewColumn Header="Unit Price" Width="70" DisplayMemberBinding="{Binding Unit_Price}"/>
                <GridViewColumn Header="Quantity" Width="50" DisplayMemberBinding="{Binding Quantity}"/>
                <GridViewColumn Header="Total"  Width="60" DisplayMemberBinding="{Binding Total}"  />
                <GridViewColumn Header="Delete"  Width="60">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="X" Width="30" Click="Delete_Item_In_Cart_Click" Name="btn_Delete_Item_In_Cart">

                            </Button>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

            </GridView>
        </ListView.View>
    </ListView>

The Lisview I got looks like this:

I want to get the index of Listview Row on Button Click. The code behind button click is:

    private void Delete_Item_In_Cart_Click(object sender, RoutedEventArgs e)
    {
        try
        {
            int index2 = list_View.SelectedIndex;
            MessageBox.Show(index2.ToString());

        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }  

    }

**Issue: **When I click on Button in any row of listview It always gives me the same index, What I got as Output is:

Thanks in Advance

In MVVM you should use `RowStyle` and `bind` the selected item instead of getting from events/codebehind. — Lei Yang, Nov 25 '16 at 02:40
Do you get total count when you try list_View.SelectedItems.Count ? — Junior John, Nov 25 '16 at 03:24
Can You please give some Idea of how to do that with MVVM @LeiYang — Muhammad Abbas, Nov 25 '16 at 06:53
Can you try [this](http://stackoverflow.com/questions/3913580/get-selected-row-item-in-datagrid-wpf) — Lei Yang, Nov 25 '16 at 07:05
Sorry @LeiYang That Page also contains methods to get the selected index and not how to select the row. — Muhammad Abbas, Nov 25 '16 at 07:33
@LeiYang Can You Please give me idea of How to use binding. I would be very grateful if you give me a proper solution — Muhammad Abbas, Nov 25 '16 at 10:21

RK_Aus · Answer 1 · 2016-11-29T01:15:37.120

Your current program is returning the index of selected row. On button click, the row will not get selected. To get the desired result select the row on button click.

Here is code for selecting the row on button click.

Code behind:

private void DeleteListItem(object sender, RoutedEventArgs e)
{
  var curItem = ((ListBoxItem)listView.ContainerFromElement((Button)sender));
  listView.SelectedItem = (ListBoxItem)curItem;
  MessageBox.Show($"Selected index = {listView.SelectedIndex}");

  // Add code for delete item here
}

XAML - List view sample code:

<ListView x:Name="listView" HorizontalAlignment="Left" Height="301" Margin="10,10,0,0" VerticalAlignment="Top" Width="400">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID"  Width="100" DisplayMemberBinding="{Binding ID}"/>
            <GridViewColumn Header="Name"  Width="190" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="Delete"  Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Button Content="X" Width="30" Click="DeleteListItem"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
    <ListViewItem>
        <local:User ID="1" Name="John" />
    </ListViewItem>
    <ListViewItem>
        <local:User ID="2" Name="Michael" />
    </ListViewItem>
    <ListViewItem>
        <local:User ID="3" Name="Smith" />
    </ListViewItem>
    <ListViewItem>
        <local:User ID="4" Name="Mary" />
    </ListViewItem>
</ListView>

But how to select the row on button click is the main issue. Can you please tell how to do that? — Muhammad Abbas, Nov 25 '16 at 06:48
Congrats, you have already found the answer. I have added an alternate solution to my answer. — RK_Aus, Nov 29 '16 at 01:16

score 2 · Accepted Answer · answered Nov 25 '16 at 18:43

Finally I got my issue resolved. Here is the Solution and Process I followed.

1: First of All I added these lines to my existing Xaml in <ListView.Resourses/>

          <Style TargetType="ListViewItem">
                <Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="IsSelected" Value="True"/>

                    </Trigger>
                </Style.Triggers>
                <EventSetter Event="PreviewGotKeyboardFocus" Handler="SelectCurrentItem"/>
            </Style>

2: And For the C# Code, I added the SelectCurrentItem Handler Mentioned above in Xaml.

Here is the Code for the Event Handler that did the actual task for me.

    private void SelectCurrentItem(object sender, KeyboardFocusChangedEventArgs e)
    {                                                                            
        //By this Code I got my `ListView` row Selected.
        ListViewItem item = (ListViewItem)sender;
        item.IsSelected = true;

    }

3: Now to get the Index of the selected ListView Row was Pretty much easy and simple for me. And the Old Code behind the Button Click worked Perfectly for me.

So Finally Here I am Giving All the Code that is fully tested and error free.

1: Xaml: This is the code for ListView

 <ListView x:Name="list_View" Grid.Column="2" Grid.Row="1" Margin="0,0,0,103">

        <ListView.Style>
            <Style TargetType="{x:Type ListView}">

                <Setter Property="BorderBrush" Value="Blue"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </ListView.Style>
        <ListView.Resources>
            <Style TargetType="ListViewItem">
                <Style.Triggers>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="IsSelected" Value="True"/>

                    </Trigger>
                </Style.Triggers>
                <EventSetter Event="PreviewGotKeyboardFocus" Handler="SelectCurrentItem"/>
                <Setter Property="Height" Value="30" />
                <Setter Property="BorderBrush" Value="Blue"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Background" Value="#E7F8FE"/>
            </Style>

        </ListView.Resources>

        <ListView.View>

            <GridView>
                <GridViewColumn Header="Product Name"  Width="120"  DisplayMemberBinding="{Binding Product_Name}"/>
                <GridViewColumn Header="Unit Price" Width="70" DisplayMemberBinding="{Binding Unit_Price}"/>
                <GridViewColumn Header="Quantity" Width="50" DisplayMemberBinding="{Binding Quantity}"/>
                <GridViewColumn Header="Total"  Width="60" DisplayMemberBinding="{Binding Total}"  />
                <GridViewColumn Header="Delete"  Width="80">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="X" Width="60" Click="Delete_Item_In_Cart_Click" Name="btn_Delete_Item_In_Cart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                            </Button>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

            </GridView>
        </ListView.View>

    </ListView>

2: C# Code:

    private void SelectCurrentItem(object sender, KeyboardFocusChangedEventArgs e)
    {
        ListViewItem item = (ListViewItem)sender;
        item.IsSelected = true;

    }

private void Delete_Item_In_Cart_Click(object sender, RoutedEventArgs e)
{
    try
    {   
        int index =0;
        index = list_View.SelectedIndex;
        MessageBox.Show(index.ToString());

    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);
    }  

}

How to Get the Index of ListView Row on Button Click

2 Answers2