Changing ListView Selection Pattern in WinJS

Question

I would like to change the default selection template in ListView items. By default, a gray border of 3 pixels wide is used for the currently selected item (s):

I found in ui.js that internally the _selectionTemplate property is set by default:

var selectionBorder = createNodeWithClass(WinJS.UI._selectionBorderContainerClass); selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderTopClass)); selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderRightClass)); selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderBottomClass)); selectionBorder.appendChild(createNodeWithClass(WinJS.UI._selectionBorderClass + " " + WinJS.UI._selectionBorderLeftClass)); this._selectionTemplate = []; this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionBackgroundClass)); this._selectionTemplate.push(selectionBorder); this._selectionTemplate.push(createNodeWithClass(WinJS.UI._selectionCheckmarkBackgroundClass)); var checkmark = createNodeWithClass(WinJS.UI._selectionCheckmarkClass); checkmark.innerText = WinJS.UI._SELECTION_CHECKMARK; this._selectionTemplate.push(checkmark); 

However, since _selectionTemplate is intended to be closed, it seems to contradict the design of the ListView to change the _selectionTemplate property. Is there a better way to get around this default selection pattern?

Answer 1

Override the CSS class used by the default template. For example, this will change the border to red:

 .win-listview .win-container:hover{ outline: rgba(255, 0, 0, 0.3) solid 3px; }