locked
winjs lisitview background color

    Question

  • I want to change my background color of WinJS.UI.ListView in normal state. I used the following css code but it does not work. It is taking the default background color from "//Microsoft.WinJS.2.0/css/ui-dark.css". Am I using the right CSS selector?

     #mylistview .win-container:not(.footprint):not(.hover)
    {
         background-color: red;

    }

    I got the code from http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx

    I am able to change the background color when I move the mouse on top of the list view but not in normal state when don't move on top of it.

    Any help will be appreciated

    Monday, September 15, 2014 2:26 AM

Answers

  • Hi Andrew,

    Which background you would like to set?

    If you want to set the win-container background, you could do with your dataTemplate by setting the background color as red:

            <div id="regularListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                <div class="regularListIconTextItem" style="background-color:red">
                    <img src="#" class="regularListIconTextItem-Image" data-win-bind="src: picture" />
                    <div class="regularListIconTextItem-Detail">
                        <h4 data-win-bind="innerText: title"></h4>
                        <h6 data-win-bind="innerText: text"></h6>
                    </div>
                </div>
            </div>
    
            <div id="listView" 
                class="win-selectionstylefilled"
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{ 
                    itemDataSource: myData.dataSource, 
                    itemTemplate: regularListIconTextTemplate, 
                    selectionMode: 'none', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none', 
                    layout: { type: WinJS.UI.GridLayout } 
                }"
            ></div>

    If you want to set the whole listview background, you could re-write css for win-itemsblock.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, September 15, 2014 6:29 AM
    Moderator
  • Hi Andrew,

    I cannot successfully setting background color for .win-container in CSS neither, only hover display the correct color, but per documentation: Styling items and groups suggested, you can style the color in template.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, September 17, 2014 10:02 AM
    Moderator

All replies

  • Hi Andrew,

    Which background you would like to set?

    If you want to set the win-container background, you could do with your dataTemplate by setting the background color as red:

            <div id="regularListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                <div class="regularListIconTextItem" style="background-color:red">
                    <img src="#" class="regularListIconTextItem-Image" data-win-bind="src: picture" />
                    <div class="regularListIconTextItem-Detail">
                        <h4 data-win-bind="innerText: title"></h4>
                        <h6 data-win-bind="innerText: text"></h6>
                    </div>
                </div>
            </div>
    
            <div id="listView" 
                class="win-selectionstylefilled"
                data-win-control="WinJS.UI.ListView" 
                data-win-options="{ 
                    itemDataSource: myData.dataSource, 
                    itemTemplate: regularListIconTextTemplate, 
                    selectionMode: 'none', 
                    tapBehavior: 'none', 
                    swipeBehavior: 'none', 
                    layout: { type: WinJS.UI.GridLayout } 
                }"
            ></div>

    If you want to set the whole listview background, you could re-write css for win-itemsblock.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, September 15, 2014 6:29 AM
    Moderator
  • Hi James,

    Thanks for your reply. I am using template function. If change the background color in the template function the background color in the selected state and hover state does not change. Is it not possible do to it using only .win-container in CSS?

    Wednesday, September 17, 2014 7:08 AM
  • Hi Andrew,

    I cannot successfully setting background color for .win-container in CSS neither, only hover display the correct color, but per documentation: Styling items and groups suggested, you can style the color in template.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Wednesday, September 17, 2014 10:02 AM
    Moderator