locked
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

    Wednesday, May 28, 2014 8:44 AM

Answers

  • 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>

    Saturday, May 31, 2014 4:30 AM
    Owner

All replies

  • 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.

    Wednesday, May 28, 2014 12:05 PM
    Owner
  • Thanks for your reply Rob and sorry for selecting the wrong forum (newbie mistake). We are coding in XAML.

    Thierry

    Thursday, May 29, 2014 7:33 AM
  • 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>

    Saturday, May 31, 2014 4:30 AM
    Owner
  • Thanks a lot for your inputs Rob. Much appreciated.

    Thierry

    Thursday, June 5, 2014 6:16 AM