locked
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?

    Tuesday, November 27, 2012 8:35 AM

Answers

  • 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 msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Thursday, November 29, 2012 5:50 AM
    Thursday, November 29, 2012 2:51 AM

All replies

  • 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 msdnmg@microsoft.com
    Microsoft One Code Framework

    Wednesday, November 28, 2012 2:27 AM
  • 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?
    Wednesday, November 28, 2012 10:54 AM
  • 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 msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Thursday, November 29, 2012 5:50 AM
    Thursday, November 29, 2012 2:51 AM
  • 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?

    Thursday, November 29, 2012 4:49 AM
  • 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!

    Thursday, November 29, 2012 5:18 AM
  • 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?
    Tuesday, December 04, 2012 11:06 AM
  • 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.

    Wednesday, December 05, 2012 2:16 AM