CODEWITHSUNDEEP
controlswindows-phone-8.1color-picker
sidy3d
sidy3d

Reputation: 549

Windows phone 8.1 color picker control

I was wondering if there was a color picker control for windows phone 8.1 runtime apps that look like this.

Thanks in advance!

enter image description here

Upvotes: 2

Views: 2337

Answers (2)

Ganesh Cauda
Ganesh Cauda

Reputation: 71

My solution is make a ColorPicker class under Colorsource folder (or whatever you want to name it) which contain list of color data

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    namespace MyApps.Colorsource
    {
        class ColorPicker
        {
            public static List<ColorPicker> ColorData()
            {
    string[] colorNames =
       {
        "White","Black","Yellow","BananaYellow","LaserLemon","Jasmine","Green","Emerald",
        "GreenYellow","Lime","Chartreuse","LimeGreen","SpringGreen","LightGreen",
        "MediumSeaGreen","MediumSpringGreen","Olive","SeaGreen","Red","OrangeRed",
        "DarkOrange","Orange","ImperialRed","Maroon","Brown","Chocolate",
        "Coral","Crimson","DarkSalmon","DeepPink","Firebrick","HotPink",
        "IndianRed","LightCoral","LightPink","LightSalmon","Magenta","MediumVioletRed",
        "Orchid","PaleVioletRed","Salmon","SandyBrown","Navy","Indigo",
        "MidnightBlue","Blue","Purple","BlueViolet","CornflowerBlue","Cyan",
        "DarkCyan","DarkSlateBlue","DeepSkyBlue","DodgerBlue","LightBlue","LightSeaGreen",
        "LightSkyBlue","LightSteelBlue","Mauve","MediumSlateBlue","RoyalBlue","SlateBlue",
        "SlateGray","SteelBlue","Teal","Turquoise","DarkGrey","LightGray"
        };

    string[] uintColors =
        { 
                "#FFFFFFFF","#FF000000","#FFFFFF00","#FFFFE135","#FFFFFF66","#FFF8DE7E",                             "#FF008000",#FF008A00","#FFADFF2F","#FF00FF00","#FF7FFF00","#FF32CD32",
                "#FF00FF7F","#FF90EE90",
            "#FF3CB371","#FF00FA9A","#FF808000","#FF2E8B57","#FFFF0000","#FFFF4500",
            "#FFFF8C00","#FFFFA500","#FFED2939","#FF800000","#FFA52A2A","#FFD2691E",
            "#FFFF7F50","#FFDC143C","#FFE9967A","#FFFF1493","#FFB22222","#FFFF69B4",
            "#FFCD5C5C","#FFF08080","#FFFFB6C1","#FFFFA07A","#FFFF00FF","#FFC71585",
            "#FFDA70D6","#FFDB7093","#FFFA8072","#FFF4A460","#FF000080","#FF4B0082",
            "#FF191970","#FF0000FF","#FF800080","#FF8A2BE2","#FF6495ED","#FF00FFFF",
            "#FF008B8B","#FF483D8B","#FF00BFFF","#FF1E90FF","#FFADD8E6","#FF20B2AA",
            "#FF87CEFA","#FFB0C4DE","#FF76608A","#FF7B68EE","#FF4169E1","#FF6A5ACD",
            "#FF708090","#FF4682B4","#FF008080","#FF40E0D0","#FFA9A9A9","#FFD3D3D3"
        };

    // i variable depends on how many color you want to add in my case i have 67 colors

        var data = new List<ColorPicker>();
        for (int i = 0; i < 68; i++) { 
            data.Add(new ColorPicker(colorNames[i], uintColors[i]));
        }

        return data;

    }

    public ColorPicker(string name, string color)
    {
        Name = name;
        Coloruint = color;
    }

    public string Name { get; set; }
    public string Coloruint { get; set; }
        }
    }

And then I create a GridView

    <GridView x:Name="ColorGrid"
              ItemsSource="{Binding}"
              VerticalAlignment="Top"
              Tapped="ColorGrid_Tapped">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Ellipse Fill="{Binding Coloruint}"
                                     Height="50"
                                     Width="50"
                                     Margin="10"/>
                        </Grid>

                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>

OnNavigatedTo on that page add this code

     var colorViewModel=ColorPicker.ColorData();
     ColorGrid.DataContext = colorViewModel;

To use the color data on gridviewtapped add this code

    private void ColorGrid_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Ellipse senderObject = e.OriginalSource as Ellipse;
        if (senderObject != null)
        {
            //senderObject.Fill;<< This is content color data

        }

    }

Hope this help :D i got this idea from http://spasol.wordpress.com/2013/06/02/custom-color-picker-for-windows-phone/

Upvotes: 3

Igor Ralic
Igor Ralic

Reputation: 15006

You can try a custom color picker - here's an article on Nokia Developer Wiki written by Spaso Lazarevic.

It comes down to using a predefined set of colors on a different page, nicely laid out.

Upvotes: 1

Related Questions