Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select object in ListView using Selected DataTemplate

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!

like image 788
user13657 Avatar asked Jan 14 '14 10:01

user13657


1 Answers

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!

like image 189
BenjaminPaul Avatar answered Oct 09 '22 07:10

BenjaminPaul