How to replicate background colour used in Microsoft Store item element

Apptacular Apps 386

In the product page of the Microsoft Store I noticed a large view with a shadow underneath it containing information about an app. Does anyone know which theme resource is being used as the background colour for this object?

I think something like this is being used:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

1 answer

Daniele 1,996

If you want the same color you can use

<Grid Background="#2E2E2E">

Apptacular Apps 386 Reputation points

2020-06-12T23:00:52.72+00:00

This looks better in the dark theme but in the light theme I want to use #FFFFFF so is there a way a add a colour resource to automatically change the background colour depending on the current theme?

Daniele 1,996

Then you have to create theme resources (https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-theme-resources)

   <Application [...]>  
       <Application.Resources>  
           <ResourceDictionary>  
               <ResourceDictionary.ThemeDictionaries>  
                   <ResourceDictionary x:Key="Light">  
                       <SolidColorBrush x:Key="MyBackgroundColorBrush" Color="White"/>  
                   </ResourceDictionary>  
                   <ResourceDictionary x:Key="Dark">  
                       <SolidColorBrush x:Key="MyBackgroundColorBrush" Color="#2E2E2E"/>  
                   </ResourceDictionary>  
               </ResourceDictionary.ThemeDictionaries>  
           </ResourceDictionary>  
       </Application.Resources>  
   </Application>

and use them

   Background="{ThemeResource MyBackgroundColorBrush}"

Apptacular Apps 386 Reputation points

2020-06-14T11:50:36.61+00:00
Great, thanks, can the same thing be done with an image? I tend to get confused with ImageSource and BitmapImage.

Main page XAML

<Image x:Name="imgFlower" Source="{ThemeResource ImageFlower}"/>

Daniele 1,996

Yes

<ResourceDictionary x:Key="Light">
    <SolidColorBrush x:Key="MyBackgroundColorBrush" Color="White"/>
    <BitmapImage x:Key="CircleImage" UriSource="ms-appx:///Assets/Light/circle.png"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
    <SolidColorBrush x:Key="MyBackgroundColorBrush" Color="#2E2E2E"/>
    <BitmapImage x:Key="CircleImage" UriSource="ms-appx:///Assets/Dark/circle.png"/>
</ResourceDictionary>

and

<Image Source="{ThemeResource CircleImage}"/>

Share via

How to replicate background colour used in Microsoft Store item element

1 answer

Your answer