Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

How to: Zebra Striping ListViews in Windows 8 Apps (HTML/JS)

Karissa Wingate

The following CSS should be applicable to HTML/JS apps, you may need to make changes to make it work properly if you’re not using a page control based navigation system. This “table” is not really a table, but a bunch of dynamically generated data under a static header. The images below are the basic way I want it to look. Below that is the CSS I used to make it work, along with notes for why I did things the way I did.


/* Shrinks all the containers so you can see the borders and checkmarks properly*/
.fragment .resultslist .win-surface .win-container
{
width: 99% !important;
}

/*Does all of the odd rows in the list view*/
.fragment .resultslist .win-container:nth-of-type(odd)
{
background-color: #cdd6dc;
}
/*When the items are selectable, there is a div inserted momentarily on click that flips the previously odd rows to even (because it is adding another .win-container, shifting all of the numbers so that 2n+1 no longer targets the same items it was). The next 2 rules override that so that the user doesn't see a flash of incorrect background-color other than on the pressed item.*/
.fragment .resultslist .win-pressed~.win-container:nth-of-type(even)
{
background-color: #cdd6dc;
}

 

.fragment .resultslist .win-pressed~.win-container:nth-of-type(odd)
{
background-color: transparent;
}
/*sets the striped rows to have the same hover color as the non striped rows. */
.fragment .resultslist .win-container:hover:nth-of-type(odd)
{
background-color: rgba(0, 0, 0, 0.3);
}
/*Sets the background-color of the item on click and finger press*/
.fragment .resultslist .win-container:hover:active, .fragment .resultslist .win-container:active
{
background-color: #686f73;
}
/*sets the color of the selected item's background*/
.fragment .win-selectionstylefilled.win-listview .win-selected .win-selectionbackground
{
background-color: #778690;
}
/*sets the background-color of the selected item's background when hovered*/
.fragment .win-selectionstylefilled.win-listview .win-selected:hover .win-selectionbackground
{
background-color: #686f73;
}
/*Sets the border colors for the selected item - default is determined by windows color scheme*/
.win-selectionstylefilled.win-listview .win-selected.win-container .win-selectionborder
{
border-color: #686f73;

}
/*sets the background color of the little check mark*/
.win-selectionstylefilled.win-listview .win-selectioncheckmarkbackground
{
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: #686f73;
border-top-color: #686f73;
}
/*sets the color on hover of the selected item's borders*/
.win-selectionstylefilled.win-listview .win-selected.win-container:hover .win-selectionborder
{
border-color: #778690;

 

}
/*sets the background color of the little check mark during hover*/
.win-selectionstylefilled.win-listview .win-selected.win-container:hover .win-selectioncheckmarkbackground
{
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: #778690;
border-top-color: #778690;
}
/*Gets rid of the border/outline and default item background color. Seems to needs to come after the other rules, otherwise they don't work. Will update when I figure out why. */
.win-listview :not(.win-footprint).win-container
{
background-color: transparent;
outline-width: 0;
}

Happy Windows 8ing!

Related Articles

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>