Select object in ListView using Selected DataTemplate

Question

I'm using DataTemplate for SelectedItem on ListView as :

<ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
<WrapPanel (...) BackGround="Silver">

</WrapPanel>
(...)
<Style TargetType="ListViewItem">
       <Style.Triggers>
             <MultiTrigger>
                   <MultiTrigger.Conditions>
                       <Condition Property="IsSelected" Value="true" />
                       <Condition Property="Selector.IsSelectionActive" Value="true" />
                   </MultiTrigger.Conditions>
                   <Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
             </MultiTrigger>
       </Style.Triggers>
</Style>
</ControlTemplate>

Also, ItemsSource is binded to IObservableCollection. But I'm having some problems with selecting item in myListView. What I want to reach is that, Default item template have white background. Selected background is Silver. When I click on item, background changes. But when I'm doing it from code, listview have selected item (checked that, selected index = 0, selectetitem != null), but item get style from non-selected item. So basically I'd like to select item with selectedTemplate. I've tried myListView.SelectedIndex, myLisview.SelectedItem, but doesn't really work.. Any ideas?

Thanks!

Answer 1

If I understand you correctly you have it working so that when you select the item in the list the selected template silver background is shown however when you set the selected item using code it does not?

I have created a simple example that works and the change that I had to make was to set the binding of selecteditem property on the listview to be two way..

<ListView SelectedItem="{Binding MySelectedItem, Mode=TwoWay}">

My example uses Caliburn Micro however this is not important.

Heres my example code that demonstrates it working...

View Model:

public class ShellViewModel : Screen, IShell
{
    private ObservableCollection<Person> people = new ObservableCollection<Person>();

    public ObservableCollection<Person> People
    {
        get
        {
            return this.people;
        }

        set
        {
            this.people = value;
            this.NotifyOfPropertyChange(() => this.People);
        }
    }

    private Person selectedPerson;

    public Person SelectedPerson
    {
        get
        {
            return this.selectedPerson;
        }

        set
        {
            this.selectedPerson = value;
            this.NotifyOfPropertyChange(() => this.SelectedPerson);
        }
    }

    public ShellViewModel()
    {
        var russell = new Person { Name = "Russell" };
        this.People.Add(new Person { Name = "Benjamin" });
        this.People.Add(new Person { Name = "Steve" });
        this.People.Add(russell);
        this.SelectedPerson = russell;
    }

View:

<Window x:Class="WpfApplication5.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Window.Resources>

    <Style x:Key="TextStyle" TargetType="{x:Type TextBlock}">
        <Style.Triggers>
            <DataTrigger
                    Binding="{Binding
                        RelativeSource={RelativeSource
                            Mode=FindAncestor,
                            AncestorType={x:Type ListBoxItem}},
                            Path=IsSelected}"
                    Value="True">
                <Setter Property="Background" Value="Red"></Setter>
                </DataTrigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="MyItemTemplate">
        <TextBlock Text="{Binding Name}" Style="{StaticResource TextStyle}"></TextBlock>
    </DataTemplate>
</Window.Resources>

<Grid Background="White">
    <ListView ItemsSource="{Binding People}" x:Name="People" ItemTemplate="{StaticResource MyItemTemplate}" SelectedItem="{Binding SelectedPerson, Mode=TwoWay}">
    </ListView>
</Grid>

Changing the SelectedPerson property on the view model also displays in the view.

Hope this helps!

Answer 2

have you tried setting this in your style?

<Style>
   <Setter Property="OverridesDefaultStyle" Value="true"/>
</Style

and then set the template without triggers so full code is like this

<Style TargetType="{x:Type listViewItem}">
 <Setter Property="OverridesDefaultStyle" Value="True"/>
 <Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
</Style>

reason why I included this style is because if you use it inside your ControlTemplate and change the Target Type to {x:Type ListViewItem} rather than targetType="ListViewItem" it will automatically assign this style to the regarded control. maybe because my answer is incomplete people are down voting my answer I don't even have dignity to explain, oh well : here is extended answer: in addition to the code above you should add property IsSelected in your Person class which should implement INotifyPropertyChanged and in your xaml: ">

now in your view model you should have something like this in the constructor

//lsvProducts is our ListView
view = (CollectionView) CollectionViewSource.GetDefaultView(lsvPeople.ItemsSource);
//in the creation parameter you should put field that you want to group by :-)
PropertyGroupDescription grouping = new PropertyGroupDescription("<FieldToGroupBy>");
view.GroupDescriptions.Add(grouping);

going back to xaml

<Style x:Key="GroupedView" TargetType="{x:Type GroupItem}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=chbx, Path=IsChecked}" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Expander IsExpanded="False">
                                <Expander.Header>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="22" VerticalAlignment="Bottom" />
                                        <TextBlock Text="{Binding ItemCount}" FontSize="16" Foreground="DimGray" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
                                        <TextBlock Text=" item(s)" FontSize="16" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
                                    </StackPanel>
                                </Expander.Header>
                                <ItemsPresenter />
                            </Expander>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </DataTrigger>

and

<!--This goes in the same style as the prevoius sample code -->
    <DataTrigger Binding="{Binding ElementName=chbx, Path=IsChecked}" Value="False">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <StackPanel>
                                    <ItemsPresenter />
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>

NOTE When Binding to an element you could define one in VM saying bool IsGrouping and bind it to that. Good Luck :-)