Custom Color Picker And Dynamically Change The Grid Color For Windows 10 Universal App

Colorpicker help users to pick colors to place with their own methods to implement.

Let’s see the steps.

Create a new Windows 10 universal application and go to your MainPage.xaml.

Now add one listview control to list the colors and also add two controls inside the ListView, one is for color name and another one is for showing the color.

<ListView x:Name="colorList" SelectionChanged="colorList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Height="50" Width="50" Text="{Bindingcolor}"></TextBlock>
<Rectangle Height="50" Width="50" Fill="{BindingColorBrush}"></Rectangle>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Next go to code behind page and createcolors class to store the color properties like the following code.

public class colors
{
public string color
{
get;
set;
}
public Brush ColorBrush
{
get;
set;
}
}
public void loadcolors()
{
List < colors > mycolors = new List < colors > ();
Typetype = typeof(Windows.UI.Colors);
PropertyInfo[] Properties = type.GetRuntimeProperties().ToArray < PropertyInfo > ();
foreach(var item in Properties)
{
string s = item.Name;
Color c = (Color) item.GetValue(null, null);
colorsnewcolor = newcolors();
mycolors.Add(newcolors()
{
color = item.Name,
ColorBrush = newSolidColorBrush(c)
});
}
colorList.ItemsSource = mycolors;
}

The above code is used to get the list of system colors under Windows.UI namespace. The Color class contains a list of Properties each returning a particular color. The above code reads the Type and extracts all the properties from system color.

Next loops through each of these properties and adds them into our Colorslist by converting them into a ColorPickerBrush
object. Finally add the list of colors to our listview.

Now write the following code to get the user selected color and apply it to our grid.

private void colorList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
varcolor = (colors) e.AddedItems[0];
myGrid.Background = color.ColorBrush;
}

Run the app and see the expected output it looks like the following screen.

output

For more information on Windows 10 UWP, refer to my eBook:

Windows 10 UWP E-book

Read more articles on Universal Windows Platform: