Windows Store App - Basic ColorPicker Control inside Settings Pane

Windows Store App - Basic ColorPicker Control inside Settings Pane

This article discusses the basic color palette control implementation for Windows Store App. With Windows 8.1 release around the corner and seeing there is still no Color Picker control (yes we have DatePicker and TimePicker) I thought of writing one in response to this MSDN question.  

Currently it only supports basic colors available through Colors class. We can extend the sample to include LinearGradientBrush and ImageBrush which will be different in terms of how these brushes will be retrieved/formed and stored. 

http://gallery.technet.microsoft.com/Windows-Store-App-Basic-c5ec0fcf


Introduction

The sample shows implementation of basic color picker control inside Settings Pane.



↑ Return to Top

Description

Provides a settings pane implementation with list of available colors inside Colors class. User can select the color which will be automatically applied to the main page.


Implementation Details

I will try to discuss the core steps of implementation here in details. For exact details please refer the sample link above or bottom of this page.

Step I - Get all colors from class Colors
We will retrieve the value of declared properties on class Colors as shown below
C#
 public ObservableCollection<ColorItem> Colors 
        { 
            get 
            { 
                if (_Colors == null) 
                { 
                    _Colors = new ObservableCollection<ColorItem>(); 
                    foreach (PropertyInfo propertyInfo in typeof(Colors).GetTypeInfo().DeclaredProperties) 
                    { 
                        Color color = (Color)propertyInfo.GetValue(null); 
                        if (color != null) 
                        { 
                            _Colors.Add(new ColorItem(color)); 
                        } 
                    } 
                } 
                return _Colors; 
            } 
            set 
            { 
                _Colors = value; 
            } 
        }

Step II - Populate the UI element with all colors retrieved in above step.

For this sample, we will use GridView and bind the items inside GridView to property Colors inside ColorDataModel. Further the Rectangle (inside GridView DataTemplate) Fill color is bound to ColorBrush property inside ColorItem class. GridView XAML will look like this 
 
XAML
 <GridView Name="gridViewColors" BorderBrush="White" BorderThickness="3" Width="630" Height="650" Margin="3" 
                      ItemsSource="{Binding Colors}" 
                      ItemContainerStyle="{StaticResource gridViewItemStyle}" 
                      SelectedItem="{Binding Source={Binding}, Path=SelectedColorItem, Mode=TwoWay}" 
                                      <GridView.ItemTemplate                    <DataTemplate                        <Rectangle Width="30" Height="30" Fill="{Binding ColorBrush}"/> 
                    </DataTemplate> 
                </GridView.ItemTemplate> 
            </GridView>

↑ Return to Top

Step III - Respond to color change in ColorPicker control

As we can see from above GridView declaration in XAML, that SelectedItem is TwoWay bound to property SelecteedColorItem on parent DataContext. In this case we are binding flyout DataContext to ColorDataModel inside ColorSettingsFlyout constructor as shown below 

C#
            this.DataContext = new ColorDataModel();

Further inside property SelecteedColorItem which is bound to GridView SelectedItem, we are raising an event to let the application know color selection is changed.
Here is how event is setup and configured inside ColorDataModel 

public delegate void ColorSelectionChangedHandler(object o, ColorEventArgs e); 
        public static event ColorSelectionChangedHandler ColorSelectionChanged; 
 
ColorItem _SelectedColorItem = null; 
        public ColorItem SelectedColorItem 
        { 
            get { return _SelectedColorItem; } 
            set  
            { 
                _SelectedColorItem = value; 
                if (value != null && ColorSelectionChanged != null) 
                { 
                    ColorEventArgs colorArgs = new ColorEventArgs(value.ColorBrush); 
                    ColorSelectionChanged(this, colorArgs); 
                } 
            } 
        }

Now it is up to application how to respond to this change. In this sample MainPage is responded to this event by changing its background color. Note the custom class ColorEventArgs args in event handler.

Code snippet doing the same is here
C#
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
            ColorDataModel.ColorSelectionChanged += ColorDataModel_ColorSelectionChanged;
        }

        void ColorDataModel_ColorSelectionChanged(object o, ColorEventArgs e)
        {
            gridMain.Background = e.ColorBrush;
        }

        protected override void SaveState(Dictionary<String, Object> pageState)
        {
            ColorDataModel.ColorSelectionChanged -= ColorDataModel_ColorSelectionChanged;
        }

↑ Return to Top

Trivia


Apart from core functionality of Color Picker, this sample also demonstrates few more things as mentioned below 

I. Use of button to launch application custom settings pane.
II. Customizing GridViewItem Style to remove "Check" or "Glyph" mark when GridViewItem is selected.    
III. Responding to settings change inside application Settings Pane.

↑ Return to Top

The Project



Provides a settings pane implementation with list of available colors inside Colors class. User can select the color which will be automatically applied to the main page.

This document describes the project available for download at TechNet Gallery

http://gallery.technet.microsoft.com/Windows-Store-App-Basic-c5ec0fcf

Sort by: Published Date | Most Recent | Most Useful
Comments
Page 1 of 1 (1 items)