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 Table of Contents IntroductionDescriptionImplementation DetailsTriviaThe Project
The sample shows implementation of basic color picker control inside Settings Pane.
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.
<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
this.DataContext = new 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); } } }
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; }
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.
Sachin S edited Revision 11. Comment: Updated Title
Sachin S edited Revision 10. Comment: Initial Draft
Sachin S edited Revision 9. Comment: Finishing initial draft
Sachin S edited Revision 8. Comment: I think now TOC is fixed
Sachin S edited Revision 7. Comment: Finishing initial draft
Sachin S edited Revision 6. Comment: Finishing initial draft
Sachin S edited Revision 5. Comment: Fixing TOC and Formatting
Sachin S edited Revision 4. Comment: Finishing initial draft
Sachin S edited Revision 3. Comment: Trying to fix TOC
Sachin S edited Revision 2. Comment: Finishing initial draft
Sachin S edited Original. Comment: Finishing initial draft
Sachin S edited Revision 1. Comment: Finishing initial draft