Background Color for Icons in Windows 8 XAML App

Question

Hi,

A very simple question but one for which i am struggling to find a clear answer.

I would like to apply a green background on a default appbar button as shown below ("desired" is the icon I want to have):


However, Setting the background has no effect. It will remain as transparent. Setting the foreground changes the icon inside only as shown below:

Am I missing something here? How can I change the background of the built-in icons?

Thank you!

Thierry

Answer 1

What language are you using so we can help you find the appropriate forum? You'll do this differently in HTML, Xaml, and DirectX.

The UI design forum is for discussing what the UI should look like, not how to implement that look.

Answer 2

Thanks for your reply Rob and sorry for selecting the wrong forum (newbie mistake). We are coding in XAML.

Thierry

Answer 3

If you're using a Windows 8.1 AppBarButton then you'll need to either override the template to set the BackgroundEllipse's fill for individual changes or set the AppBarItemBackgroundThemeBrush for global.

For a Windows 8 styled button you'll need to edit the AppBarButtonStyle in StandardStyles.Xaml to set the color of the BackgroundGlyph TextBlock for individual changes or set the AppBarItemBackgroundThemeBrush for global.

--Rob

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    Styles that define common aspects of the platform look and feel
                    Required by Visual Studio project and item templates
                 -->
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
                <ResourceDictionary>
                    <ResourceDictionary.ThemeDictionaries>
                        <ResourceDictionary x:Key="Default">
                            <SolidColorBrush Color="Green" x:Key="AppBarItemBackgroundThemeBrush" />
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="HighContrast">
                        </ResourceDictionary>

                    </ResourceDictionary.ThemeDictionaries>
                </ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>

Answer 4

Thanks a lot for your inputs Rob. Much appreciated.

Thierry