locked
Change color in all application RRS feed

  • Question

  • Hello everyone,

    I am trying to change background color in my application. I am trying to give user select color which is set background in my application's all page. Like if user select blue color than in my all application's pages background is blue. Same as for green , pink or whatever user select color. How to do?

    Tuesday, October 29, 2013 4:35 AM

Answers

  • Store the colour in a resource and bind your background color to that resource. You can update the resource to change the color.

    Even if you don't allow the user to change the color normally you should always draw colors from resources rather than hardcoding them. Define high contrast color resources as well.

    See ResourceDictionary and XAML resource references (Windows)‎ 

    --Rob

    • Marked as answer by Khant Nipun Wednesday, October 30, 2013 4:05 AM
    Tuesday, October 29, 2013 6:14 AM
    Moderator

All replies

  • Store the colour in a resource and bind your background color to that resource. You can update the resource to change the color.

    Even if you don't allow the user to change the color normally you should always draw colors from resources rather than hardcoding them. Define high contrast color resources as well.

    See ResourceDictionary and XAML resource references (Windows)‎ 

    --Rob

    • Marked as answer by Khant Nipun Wednesday, October 30, 2013 4:05 AM
    Tuesday, October 29, 2013 6:14 AM
    Moderator
  • Hello Rob,

    Thanks for meaningful answer, But my question in my listview, button style, all the things of background color changed, How that works?

    Tuesday, October 29, 2013 6:56 AM
  • Hi,

    What ROB said is right, you could create a resource like below in app.xaml and with the help of resource key name you can change the value at any time in the app. 

    <SolidColorBrush x:Key="PageBackgroundColor" Color="#008299"></SolidColorBrush>

    Bind that resource to root grid in all pages like below...

     <Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource PageBackgroundColor}">

    if you change the resource colour through code it utomatically reflects all pages....

    Tuesday, October 29, 2013 6:57 AM
  • But is it possible to change resource value programmatically? Any sample or code will be appreciate.
    Tuesday, October 29, 2013 7:01 AM
  • Yes Khant, we can change at any point of time with the help of the key name like below

     App.Current.Resources["PageBackgroundColor"] = Colors.Black;

    here i declared the resource in app.xaml so i am using App.Current

    please mark it as answer ,if you find this as usefull.

    Tuesday, October 29, 2013 9:14 AM
  • The method I've used in my applications is to create a class that implements INotifyPropertyChanged and contains regular CLR properties for the values I'd like to change at runtime, create an instance of that class in my resources file, and then bind my various elements to it.

    The problem with the static resource approach suggested by others is that the change in color will only be reflected once the view has been recreated since static resources are only bound once.

    This is my ApplicationPreferences.cs file. Note that I'm handling some other cases in here as well such as providing a default value for design time and a runtime default value if the user doesn't have a previously saved value:

    using System;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using Windows.Storage;
    
    namespace MyApp.Services
    {
        public class ApplicationPreferences : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
            }
    
            public String AccentColor
            {
                get 
                {
                    if (Windows.ApplicationModel.DesignMode.DesignModeEnabled) { return "#9E0B0E"; }
    
                    var storedValue = ApplicationData.Current.LocalSettings.Values["AccentColor"] as string;
                    return string.IsNullOrWhiteSpace(storedValue) ? "#9E0B0E" : storedValue;
                }
                set
                {
                    var storedValue = ApplicationData.Current.LocalSettings.Values["AccentColor"] as string;
                    if (value != storedValue)
                    {
                        ApplicationData.Current.LocalSettings.Values["AccentColor"] = value;
                        OnPropertyChanged();
                    }
                }
            }
        }
    }

    Then inside my resources file I have:

    <services:ApplicationPreferences x:Key="Preferences"/>

    And I bind to it in my views like this:

    <TextBlock FontFamily="Segoe UI" FontSize="20" Foreground="{Binding AccentColor, Source={StaticResource Preferences}}">

    Now any time I change AccentColor, it's immediately reflected everywhere.


    Dan Rigby - http://danrigby.com
    Tuesday, October 29, 2013 1:17 PM
  • Hi Dan,

    Your code will break in high contrast modes. Make sure to check for high contrast and fall back to reasonable defaults. If you want to allow customizing high contrast colors you'll need to customize both foreground and background together.

    You get this close to free if you use themes and ThemeResource (rather than StaticResource), but as you say that will update live only for theme changes not for custom resource changes.

    --Rob

    Tuesday, October 29, 2013 1:50 PM
    Moderator
  • Rob,

    Thanks for this information. The code in question was written for a Windows 8 application and theme resource wasn't yet available, but the shortcoming in regards to high contrast scenarios is just as applicable. I'll have to think a bit about this a bit and see if I can come up with a better solution in my apps.

    Thanks.


    Dan Rigby - http://danrigby.com
    Tuesday, October 29, 2013 2:54 PM