Answered by:
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 FrameworkWednesday, 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 4, 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 5, 2012 2:16 AM