Question

我有以下模板deisgned来显示listview。但默认情况下，列表中的项目会指定黑色的背景颜色。我无法覆盖他们的BG颜色属性。我有使用C＃进行原生WP开发的经验。但是在HTML 5和WinJS中我无法弄清楚设计的一半。

HTML代码：

<div id="pivotScenario3" data-win-control="WinJS.UI.Pivot" data-win-options="{ selectedIndex: 4 }">

            <div id="listViewMenu" class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'SPORTS' }">
                <div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: All.dataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: menuItemTemplate, selectionMode: 'none' }"></div>
            </div>

模板代码：

<div id="menuItemTemplate" data-win-control="WinJS.Binding.Template">
            <div class="menuItem">
                <table>
                    <tr>
                        <td>
                            <img data-win-bind="src: logo" alt="Databound image" class="logo" />
                        </td>

                        <td>
                            <div class="selectionmodeHitTarget win-interactive"></div>
                            <div class="sportNameRoot">
                                <h2 class="sportName" data-win-bind="innerHTML: sportName"></h2>
                            </div>
                        </td>
                    </tr>
                </table>

            </div>
        </div>

CSS：

.menuItem {
display: -ms-grid;
-ms-grid-columns: 20px 1fr 60px;
-ms-grid-rows: auto auto auto;
background-color: transparent;}

.menuItem .selectionmodeHitTarget {
    /* So it is stacked on top of other grid elements */
    position: relative;
    z-index: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    width: 16px; /* reserve 4px gap between highlight and item edge */
    height: 100%;
    transition: background-color 250ms ease-out 250ms, visibility 0ms linear 500ms, transform cubic-bezier(0.17,0.79,0.215,1.0025) 250ms;
}

    .menuItem .selectionmodeHitTarget:active {
        transition: background-color ease-out 100ms; /* fade in fast */
        background-color: Highlight;
    }

    .menuItem .selectionmodeHitTarget:after {

        margin: 0 16px;
        width: 16px;
        height: 100%;
        content: '';
    }

.win-selectionmode .menuItem .selectionmodeHitTarget {
transform: translateX(-41px); /* delayed by transition */
visibility: hidden;}

.win-selectionmode .win-item {
overflow: visible;}

CSS for pivot n listview

.listviewpivotitem.win-pivot-item .win-pivot-item-content {
/* Stretch across the whole width of the screen so the whole thing is pannable.*/
padding: 0;
margin: 0;
width: 100%;}

.win-listview {
height: 100%;}

#pivotScenario3 .win-listview .win-container {
margin: 0;
padding: 5px 0 0 0;
background-color: transparent;}

#pivotScenario3 .win-listview.win-rtl .win-item {
margin: 0 0 0 20px;}

#pivotScenario3{
color:white;}

我的需求是，我想将任何所需的颜色设置为listview项目的背景颜色。

我知道这需要很多代码，但我的问题太复杂了。自一周以来没有找到解决方案。这是我的最后一招。

感谢所有帮助，建议和解答！

Answer 1

使用样式属性绑定颜色代码喜欢： <div data-win-bind="style.background:Color"></div> 它会给你预期的结果。所有最好的.. !!

覆盖HTML-Windows Phone 8.1中的列表视图项目背景

1 个答案: