Color Picker Editor in Windows Store App


In this article we will make an application for a Color picker editor. It is like a sub-set of a paints application. In a color picker application, we can get the color according to our choice. This application contains a color box, where a set of colors is available for picking the color and the second part is the editor.

Here we will take a frame as an object for using the color picker application. From the color box we can pick the color; just click on the color as our choice. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

  • Open Visual Studio 2011
  • File -> New -> Project
  • Choose Template -> Visual C# ->Metro Style Application
  • Rename the application


Step 2 : In the Solution Explorer there are two files that we will primarily work with; the BlankPage.xaml and BlankPage.xaml.cs files.


Step 3 : The BlankPage.xaml file is as in the following code:

Code :










    <Grid x:Name="LayoutRoot">


            <RowDefinition Height="0.010*"/>

            <RowDefinition Height="0.081*"/>

            <RowDefinition Height="0.058*"/>



            <ColumnDefinition Width="0.050*"/>

            <ColumnDefinition Width="0.333*"/>



            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="BlueViolet" Offset="1"/>

                <GradientStop Color="Chocolate"/>



        <StackPanel Grid.Row="1" Grid.Column="0">

            <Button x:Name="RedB" Background="Red" Height="50" Width="50" Click="RedB_Click_1">


            <Button x:Name="GreenB" Background="Green" Height="50" Width="50" Click="GreenB_Click_1">


            <Button x:Name="YelloB" Background="Yellow" Height="50" Width="50" Click="YelloB_Click_1">


            <Button x:Name="BlueB" Background="Blue" Height="50" Width="50" Click="BlueB_Click_1">



        <Grid Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left">

            <Frame x:Name="Frame1" Height="400" Width="400" Background="White"></Frame>


        <TextBlock Grid.Row="0" Grid.Column="0" Text="Color Box" FontSize="20" Foreground="White">


        <TextBlock Grid.Row="0" Grid.Column="1" Text="Color Picker Editor" FontSize="20" Foreground="White">




Step 4 : 
The BlankPage.xaml.cs file is as in the following code:

Code :

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;


namespace Application4



    public sealed partial class BlankPage : Page


        public BlankPage()





        protected override void OnNavigatedTo(NavigationEventArgs e)




        private void RedB_Click_1(object sender, RoutedEventArgs e)


            Frame1.Background = new SolidColorBrush(Windows.UI.Colors.Red);



        private void GreenB_Click_1(object sender, RoutedEventArgs e)


            Frame1.Background = new SolidColorBrush(Windows.UI.Colors.Green);



        private void YelloB_Click_1(object sender, RoutedEventArgs e)


            Frame1.Background = new SolidColorBrush(Windows.UI.Colors.Yellow);



        private void BlueB_Click_1(object sender, RoutedEventArgs e)


            Frame1.Background = new SolidColorBrush(Windows.UI.Colors.Blue);




Code 5 : After running this code the output looks like this:


Click the Red color in the Color Box.


Click the Blue color in the Color Box.



Similar Articles