CODEWITHSUNDEEP
c#.netwpflistview
kmarks2
kmarks2

Reputation: 4875

Modifying a ListView's row behavior when rows are selected

I have a basic ListView, whose XAML can be found below. Basically, after I populate things to it, I'd like to be able to remove them, hence the "X" button:

<ListView Name="selectedPeople" ItemsSource="{Binding Path=map, RelativeSource={RelativeSource AncestorType=Window},
                Mode=OneWay}" Width="480" Height="200" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,225,10,0"
                SelectionChanged="selectedPeople_SelectionChanged">
         <ListView.View>
            <GridView AllowsColumnReorder="True" ColumnHeaderToolTip="Broadcast call targets">
               <GridViewColumn DisplayMemberBinding="{Binding Path=Key}"   Header="ID"      Width="120" />
               <GridViewColumn DisplayMemberBinding="{Binding Path=Value}" Header="Description" Width="320" />
               <GridViewColumn Header="" Width="30">
                  <GridViewColumn.CellTemplate>
                     <DataTemplate>
                        <Button Content=" X " Visibility="Hidden" />
                     </DataTemplate>
                  </GridViewColumn.CellTemplate>
               </GridViewColumn>
            </GridView>            
         </ListView.View>      
      </ListView>

I've left the X button invisible by default because the desired behavior is for it to only appear for rows when they are selected. How can this be done, that is changing visibility of the button on selected change? Also, once clicked, how can I relate which row/item the button was associated with?

Upvotes: 2

Views: 662

Answers (3)

&#237;gor
&#237;gor

Reputation: 1164

Try this:

    <ListView Name="selectedPeople" ItemsSource="{Binding Path=map, RelativeSource={RelativeSource AncestorType=Window},
                    Mode=OneWay}" Width="480" Height="200" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,225,10,0"
                   >
 <ListView.Resources>
                <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
            </ListView.Resources>
             <ListView.View>
                <GridView AllowsColumnReorder="True" ColumnHeaderToolTip="Broadcast call targets">
                   <GridViewColumn DisplayMemberBinding="{Binding Path=Key}"   Header="ID"      Width="120" />
                   <GridViewColumn DisplayMemberBinding="{Binding Path=Value}" Header="Description" Width="320" />
                   <GridViewColumn Header="" Width="30">
                      <GridViewColumn.CellTemplate>
                         <DataTemplate>
                            <Button Content="X" 
                                        Visibility="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}, Converter={StaticResource BooleanToVisibilityConverter1}}"
                                        Command="{Binding DeleteCommand}"
                                        CommandParameter="{Binding}"
                                        />
                         </DataTemplate>
                      </GridViewColumn.CellTemplate>
                   </GridViewColumn>
                </GridView>            
             </ListView.View>      
          </ListView>

And not forget create Create Deletecommand

Upvotes: 1

JSJ
JSJ

Reputation: 5691

you can change the button column template as like below with its IsEnabled Property. 

<GridViewColumn Width="30" Header="">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content=" X " IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}, Path=IsSelected}" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

or you can use the converter or trigger for visiblity.

 <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter1" />
    </Window.Resources>
  <GridViewColumn Width="30" Header="">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel>

                                    <Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}, Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverter1}}" />
                                </StackPanel>

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

Upvotes: 3

syned
syned

Reputation: 2321

  1. Bind button to item.IsSelected

    <Button Content=" X " Visibility="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}} Converter={StaticResource yourConverter}}" Command="{Binding DeleteCommand}"/>

  2. Write converter from bool to Visibility (IValueConverter)

    [ValueConversion(typeof(bool), typeof(Visibility))]
public class BoolToVisibilityConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    var boolValue = (bool) value;
    return boolValue ? Visibility.Visible : Visibility.Collapsed;
  }

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

  3. Create DeleteCommand (by implementing ICommand interface) in your ViewModel binded to item in ListView and bind button to it

    public class ItemViewModel {
  ICommand DeleteCommand {get;set;}
}

Upvotes: 3

Related Questions