How to change the color of selected item in the listview and reset the original color if other item is selected from the same listview. RRS feed

  • Question

  • Hi everyone,

    I m using two listview, one to show all the restaurants in particular area and other to show Menu of the restaurant respectively.

    If i select one  restaurant then background color should change to blue, and all other other restaurant bcolor is red. If any other restaurant is selected then this bcolor should change to blue n all other should change to red.

    <div id="Cuisine_category" data-win-control="WinJS.Binding.Template"> <div id="Category_data" > <h3 data-win-bind="innerText: Name" ></h3> </div> </div>

    <div id="basicListView_MenuList" data-win-control="WinJS.UI.ListView" > </div>

    I m using this code to display restaurant name.

    How to set and reset bgcolor programmatically.



    Shilpa Monocept Windows store apps

    Monday, February 25, 2013 11:00 AM

All replies

  • Hi Shilpa_A_S,

    Before you going the programmtic approach, I suggest you take a look at the styling options available for customizing windows store ListView control (and its items). We can use style to control most of the common appearnce behaviors:

    #Styling the ListView and its items (Windows Store apps using JavaScript and HTML) (Windows)

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by WinNRock Tuesday, February 26, 2013 9:58 AM
    • Unmarked as answer by WinNRock Tuesday, February 26, 2013 9:58 AM
    Tuesday, February 26, 2013 3:48 AM
  • Hi Steven Cheng,

    Thanks for ur suggestion.

    I tried this one

    #Category_data.win-selectionbackground { background-color: #BE1C29 !important; }

    to change bgcolor when the item is selected but its not working. What might be the problem.

    Shilpa Monocept Windows store apps

    Tuesday, February 26, 2013 10:02 AM
  • Hello, that CSS selector isn't working because the win-selectionbackground class is not being applied to the Category_data element in your template. To use win-selectionbackground you can use a selector like "#Cuisine_category .win-selectionbackground" to target the selected item in your listview.

    However, since you want your listview items to have a default background color of blue, and then red when they're selected, I would try something like the following two rules using the class win-selected to target the selected item. (I would also suggest changing your template to use a class for 'Category_data' instead of an id since there will be multiple instances of that element).


    <div id="Cuisine_category" data-win-control="WinJS.Binding.Template">
        <div class="Category_data"  > 
            <h3 data-win-bind="innerText: Name" ></h3>            
    #basicListView_MenuList .Category_data {
        background-color: #1C33BE;
    #basicListView_MenuList .win-selected .Category_data {
        background-color: #BE1C29;

    Thank you,


    Friday, March 1, 2013 3:36 PM