locked
Template of selected item

    Question

  • I want to set a border color around selected item in a GridView. How can I achieve this? What should I change? 

    Thanks a lot for your help!

    Greetings

    Thursday, April 25, 2013 3:16 PM

Answers

  • Refer to Styling the ListView and its items, specifically in the section entitled "Styling selected items" near the end. The border is specifically identified with the win-selectionborder class, which you can override in your own CSS however you like. That said, the specific rule to override is a little trickier (and not well documented). The best way to find this sort of thing is to search for the style class in Blend's Style Rules pane, then you can grab the selector that's being applied to override it in your own CSS.

    So the rule for the border looks like this:

    .win-listview::not(.win-selectionstylefilled) .win-selected.win-container .win-selectionborder {
       border-color: rgb(128, 0, 0);   
    }

    You can try this with scenario 4 of the HTML ListView Essentials sample, adding this style rule in a <style> block at the top of scenario4.html and removing the class="win-selectionstylefilled" attribute from the ListView on that page. To do a complete job you'll also need to style the :hover for this along with normal and hover styles for the win-selectioncheckmarkbackground class. That would make the styles as follows:

    .win-listview:not(.win-selectionstylefilled) .win-selected.win-container .win-selectionborder {
        border-color: rgb(128, 0, 0);   
    }
    
    .win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder {
        border-color: rgb(255, 0, 0);
    }
    
    .win-listview:not(.win-selectionstylefilled) .win-selectioncheckmarkbackground {
        border-top-color: rgb(128, 0, 0);   
    	border-right-color: rgb(128, 0, 0);   
    }
    
    .win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectioncheckmarkbackground {
        border-top-color: rgb(255, 0, 0);   
    	border-right-color: rgb(255, 0, 0);   
    }

    That results in item selection that looks like the following (hover and not-hover):


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press



    Thursday, April 25, 2013 4:51 PM