user1884032
user1884032

Reputation: 347

set background for selected item in listview

I have a listview which display the row through a datatemplate. When I select an item, I add the selected item to an observable collection and also set the value of "CarIsSelected" to true so I know which is selected. I'm having trouble on how I set the background color for the items I've selected that are added to the observablecollection? I hope this makes sense. Below is my code that I have so far. To give another example, if I select "item1", I add "item1" to the collection and highlight the row for "item1". I then select "item2", add "item2" to the collection and also highlight the row for "item2". Therefore "item1" and "item2" should be highlighted.

xaml:

<ListView Name="lstExistingProblemList" HorizontalAlignment="Left" VerticalAlignment="Bottom" 
          ItemsSource="{Binding Path=ListOfCars}" SelectedItem="{Binding SelectedCar}" 
          SelectionMode="Single" Width="391" Grid.ColumnSpan="2"> 

    <ListView.ItemTemplate>
        <DataTemplate>
            <Label Width="391" Margin="0,0,5,0" HorizontalAlignment="Left">
                <Label.Content>
                    <TextBlock>
                        <TextBlock.Text>
                            <MultiBinding StringFormat="{}{0}-{1}">
                                <Binding Path="Make" />
                                <Binding Path="Model" />
                             </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </Label.Content>
            </Label>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ViewModel:

ObservableCollection<CarsInfo> selectedCarsLists = new ObservableCollection<CarsInfo>();
List<CarsInfo> listOfCars = new List<CarsInfo>();
CarsInfo selectedCar;

public List<CarsInfo> ListOfCars
{
    get
    {       
        listOfCars = DataSource.GetCarInfo();
        return listOfCars;
    }
}

public ObservableCollection<CarsInfo> SelectedCarsLists
{
    get
    {
        return selectedCarsLists;
    }
}

public CarsInfo SelectedCar
{
    get
    {
        return selectedCar;
    }
    set
    {
        if (selectedCar != value)
        {
            selectedCar = value;
            selectedCar.CarIsSelected = true;
            selectedCarsLists.Add(selectedCar);
        }
    }
}

class:

public int Year { get; set; }
public string Description { get; set; }
public string Make { get; set; } 
public string Model { get; set; }
public bool CarIsSelected { get; set; }

Upvotes: 0

Views: 2516

Answers (1)

sa_ddam213
sa_ddam213

Reputation: 43636

You can setup a DataTrigger to the CarIsSelected property, but you will have to implement INotifyPropertyChanged in your CarsInfo class for the UI to reflect the changes.

xaml:

    <ListView.ItemTemplate>
        <DataTemplate>
            <Label x:Name="label" Width="391" Margin="0,0,5,0" HorizontalAlignment="Left">
                <Label.Content>
                    <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0}-{1}">
                            <Binding Path="Make" />
                            <Binding Path="Model" />
                         </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </Label.Content>
            </Label>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding CarIsSelected }" Value="True" >
                    <Setter TargetName="label" Property="Background" Value="Red" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

code

public  class CarsInfo : INotifyPropertyChanged
{
    public int Year { get; set; }
    public string Description { get; set; }
    public string Make { get; set; }
    public string Model { get; set; }

    private bool _carIsSelected;
    public bool CarIsSelected 
    {
        get { return _carIsSelected; }
        set { _carIsSelected = value; NotifyPropertyChanged("CarIsSelected"); } 
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string property)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
    }
}

Result: enter image description here

Upvotes: 1

Related Questions