question

ApptacularApps-8305 avatar image
0 Votes"
ApptacularApps-8305 asked ·

How to replicate background colour used in Microsoft Store item element

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}"/>


9878-shadowedview.png


windows-uwpwindows-uwp-xaml
shadowedview.png (202.0 KiB)
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

danielescipioni avatar image
0 Votes"
danielescipioni answered ·

If you want the same color you can use

<Grid Background="#2E2E2E">
· 4 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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?

0 Votes 0 ·

Then you have to create theme resources (https://docs.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}"
0 Votes 0 ·

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}"/>


0 Votes 0 ·
Show more comments