Transparent background for using thumbnailMode listview

Question

Hi, I am working on a custom file listview and trying to show the thumbnail of the files. But I find If use the thumbnailMode "listview", the thumbnail's background will change with the theme color. Could the background be uniform or transparent ? Thanks. 

Answer 1

When you say: "the thumbnail's background will change with the theme color"  could you post a picture of what you are describing here?  Isn't that Transparent?

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Answer 3

Thanks Jeff, see picture above. The thumbnail will change with the theme(The theme color is greeen). The theme color can be changed in PC Setting->Personalize->Start Screen.

Answer 4

Can anyone help me? Thanks ^_^

Answer 5

I am helping you with this.  I know it is tough to wait, but please have a little more patience.  Thanks for understanding, Jeff

---

Jeff Sanders (MSFT)

Answer 6

Hi Pan,

How are you setting the background color on the listview?  The transparency is working correctly on your images and it is picking up the color of your page by design (the theme).  In order to set the background color of the List view you would add a CSS style similar to this:

/* CSS applied to the ListViews in this sample */
#listView1, #listView2, #listView3, #listView4, #listView5
{
    height: 280px;
    border: solid 2px rgba(0, 0, 0, 0.13);
    background-color: #D84B4B;
}

Then the transparent images would pick up the background color of the listview instead of the page.

-Jeff

---

Jeff Sanders (MSFT)

Answer 7

Hi Jeff,

   Thank you very much, but It seems your answer may not work. These thumbnails are generated from "StorageFile.GetThumbnailAsync()". I use the first parameter as "ThumbnailMode.ListView"(the recommended way for using in listview). Then the thumbnails' background are green(from the theme color).

   Thanks for your answer.

Answer 8

Hi Pan,

Yes it works.  I tried it myself!

If it is not working for you, please post a complete sample that we can look at.

-Jeff

---

Jeff Sanders (MSFT)

Answer 9

Hi Pan,

Sorry for the late answer - the behavior you are observing is by design - as you will notice, the icon you get when using the ListView thumbnail mode are the same that are displayed in the file picker, so this mode helps your app follow the Windows 8 look and feel.

The reason for using this background color is providing a consistent experience for all file associations. In Windows 8, both desktop and Metro apps can be associated with a given file type. When a Metro app is associated with the file, the icon is shown on top of the app tile color (you can try this with music files if you associate them with the Music app by default). When a desktop app is associated with the file (as in your screenshot below), the association icon is shown on top of the desktop theme color. This helps user better identify the apps that their files can be opened with.

Showing the icon without the color background (with the SingleItem thumbnail mode) is not recommended because it will usually create a poor experience for files associated with Metro apps. SingleItem mode should only be used for a "details view" of an individual file.

I hope this helps!