在WinJS中更改ListView选择模板

Question

我想更改ListView项目上的默认选择模板.默认情况下,3像素宽的灰色边框应用于当前选定的项目:

我在ui.js中找到的是_selectionTemplate属性在内部设置为默认边框:

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);

但是,由于_selectionTemplate是私有的,因此似乎违反了ListView设计来修改_selectionTemplate属性本身.是否有更好的解决方法来修改此默认选择模板？

Answer 1

覆盖默认模板使用的CSS类.例如,这会将边框更改为红色:

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