locked
How to add two pictures to the items in grid list view

    Question

  • Dear all,
     
    With VS2013, we could create a simple store C++ app project (saying grid app(xaml)). Is it possible to achieve the following things:
     
    1. make the background as a gray or other colors;
    2. make the foreground color of the font as white;
    3. add a border to all the items with round corner and special color. I think this could be done by creating a template with BorderBrush and BorderThickness. But would anyone give me any hint?

    4. is it possible to give each item two background pictures? One is smaller, and is put on the top of the other bigger one? If we could do this, then we could solve my 3rd question.

     

    Thank you very much.

     

    • Edited by B0L Thursday, January 23, 2014 11:49 AM
    Thursday, January 23, 2014 11:48 AM

Answers

  • You can do all of this by editing your ItemTemplate. See Specifying the look of the items in the Quickstart: Adding ListView and GridView controls.

    A few notes:

    Don't hardcode colours or busy backgrounds. Set them in resources and fall back to defaults in high contrast modes.

    For what you describe leave the Background plain. Use a Rectangle for your border. Set its RaduisX and Y properties to round the corners and Fill it with your full background image. Add an Image control on top for the inset image and TextBlocks for the text data. You can use a Grid to place everything in the right location.

    --Rob

    • Marked as answer by B0L Friday, January 24, 2014 12:31 AM
    Thursday, January 23, 2014 3:41 PM
    Owner

All replies

  • You can do all of this by editing your ItemTemplate. See Specifying the look of the items in the Quickstart: Adding ListView and GridView controls.

    A few notes:

    Don't hardcode colours or busy backgrounds. Set them in resources and fall back to defaults in high contrast modes.

    For what you describe leave the Background plain. Use a Rectangle for your border. Set its RaduisX and Y properties to round the corners and Fill it with your full background image. Add an Image control on top for the inset image and TextBlocks for the text data. You can use a Grid to place everything in the right location.

    --Rob

    • Marked as answer by B0L Friday, January 24, 2014 12:31 AM
    Thursday, January 23, 2014 3:41 PM
    Owner
  • Hi, Rob

     

    Thank you very much for your quick reply! I will mark it as answer.

     

    I will do it today and update my progress. Thanks!~~

    Friday, January 24, 2014 12:31 AM
  • Hi, Rob,

     

    What I need is the following one. You can see that:

    1. the background is gray;

    2. there is a title for the icon;

    3. the background of the Word icon is white;

    4. there is a round corner (with light gray) around the white background.

    Any suggestion?? Thanks.


    • Edited by B0L Friday, January 24, 2014 1:14 AM
    Friday, January 24, 2014 1:12 AM