How to use the win-selectionborder or the win-selectioncheckmark to set the selected item in listview?

Question

How to use the win-selectionborder or the win-selectioncheckmark to set the selected item in listview?

for example,my listview is :

<divid="listView"

class="win-selectionstylefilled"

               

data-win-control="WinJS.UI.ListView"

               

data-win-options="{ 

                    itemTemplate: select('#ListTemplate'),

                    itemDataSource: Data.List.dataSource,

                    selectionMode: 'multi',

                    tapBehavior: 'invoke',

                    swipeBehavior: 'select',

                    layout: { type: 'WinJS.UI.GridLayout', maxRows: 1 }

                }"></

div>

how to set it?

Answer 1

Hi,

You could do that as follow:

    <style type="text/css">
        .win-selectioncheckmark {
            color: red;
        }
    </style>

#WinJS.UI.ListView object

http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail]
Microsoft One Code Framework

Answer 2

I have change the checkmark(the system default)'s color, but how can I  shield it(the system default) and turn it my custom icon?And  there is another question,that is how to set the border of the selected item?

Answer 3

Hi,

:not(.win-selectionstylefilled).win-listview .win-selected.win-container .win-selectionborder {
   border-bottom-color: rgb(70, 23, 180);
   border-left-color: rgb(70, 23, 180);
   border-right-color: rgb(70, 23, 180);
   border-top-color: rgb(70, 23, 180);
}

You could change the border color as that. More details, you could debug with vs.

#Quickstart: Debugging apps (JavaScript)

http://msdn.microsoft.com/en-us/library/windows/apps/hh441474.aspx

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail]
Microsoft One Code Framework

Answer 4

Thanks, I could change the border's color by debugging apps(in the DOM Explorer),but When I write it to my css,

it didn't work.And I use your ":not(.win-selectionstylefilled).win-listview .win-selected.win-container .win-selectionborder {}",

it did't work too,before the  ":not..."has anything else?

Answer 5

Oh ,I have solve it ,it is

.win-listview.win-selectionstylefilled

.win-container.win-selected.win-selectionborder{

border-bottom-color:lightblue;

    

border-left-color: lightblue;

  

border-right-color: lightblue;

  

border-top-color: lightblue;

},Thanks!

Answer 6

I have another question : I have change the checkmark(the system default)'s color, but how can I  shield it(the system default) and turn it my custom icon? And can I set  a image icon at the left-bottom of the item in the listview?

Answer 7

Hi,

Please create another thread to describe this issue.

Thank you.

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.