在 WinJS 中更改 ListView 选择模板答案

【问题标题】：Changing ListView Selection Template in WinJS在 WinJS 中更改 ListView 选择模板
【发布时间】：2012-08-25 02:39:14
【问题描述】：

我想更改 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 是私有的，因此修改 _selectionTemplate 属性本身似乎违背了 ListView 的设计。修改此默认选择模板是否有更好的解决方法？

【问题讨论】：

它是它添加的 CSS 类，您需要覆盖它；然后你可以添加你自己的 CSS 类来设置你想要设置的宽度。

标签： listview selection winjs

【解决方案1】：

覆盖默认模板使用的 CSS 类。例如，这会将边框更改为红色：

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

【讨论】：