Silverlight 4 Color Palette

Tweet

In this post, we will see how to read all the colors from ‘System.Windows.Media.Colors’ class and create a color palette in Silverlight. This class contains every color as a property of the structure ‘System.Windows.Media.Color’ type. With the help of reflection, the ‘Colors’ class can be loaded.

Step 1: Create a SL application, name it as ‘SILV4_ColorPlate’. Write the following XAML code in MainPage.Xaml

<Grid x:Name="LayoutRoot" Background="White" Height="598" Width="605">
    <ListBox Height="447" HorizontalAlignment="Left" Margin="22,13,0,0"
             Name="lstColor" VerticalAlignment="Top" Width="436"
             SelectionChanged="lstColor_SelectionChanged"/>
    <Button Content="Button" Height="41" HorizontalAlignment="Left"
            Margin="487,84,0,0" Name="btnColor" VerticalAlignment="Top"
            Width="93" />
</Grid>

Step 2: Open MainPage.Xaml.cs and in the loaded event write the following code. Add a reference to System.Reflection:

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    Type t = typeof(System.Windows.Media.Colors);

    PropertyInfo[] sysColors = t.GetProperties();

    foreach (var color in sysColors)
    {
        //Read the Structure here
        Color c = (Color)color.GetValue(null, null);

        StackPanel stkPnl = new StackPanel();
        stkPnl.Width = lstColor.Width;
        stkPnl.Orientation = Orientation.Horizontal;

        TextBlock txtColName = new TextBlock();
        txtColName.Text = color.Name;
        txtColName.Width = 70;
        txtColName.Height = 20;
        Rectangle rectColor = new Rectangle();

        rectColor.StrokeThickness = 6;
        rectColor.Fill = new SolidColorBrush(c);
        rectColor.Width = 60;

        TextBlock txt = new TextBlock();
        txt.Width = 20;

        stkPnl.Children.Add(txtColName);
        stkPnl.Children.Add(txt);
        stkPnl.Children.Add(rectColor);

        ListBoxItem item = new ListBoxItem();
        item.Content = stkPnl;

        lstColor.Items.Add(item);
    }
}

The above code makes use of reflection to load all the colors from the Colors class. Every property is read and its name is displayed using the ‘TextBlock’. This property is type-casted to the ‘Color’ structure. The ‘SolidColorBrush’ object is created using the Color structure and the Fill property of the rectangle is set using this Color object.

Step 3: Write the following code in the ‘SelectionChanged’ event of the ListBox ‘lstColor’ as shown below:

private void lstColor_SelectionChanged(object sender,
    SelectionChangedEventArgs e)
{
    ListBoxItem item = lstColor.SelectedItem as ListBoxItem;

    StackPanel pnl = item.Content as StackPanel;

    foreach (UIElement ele in pnl.Children)
    {
        if (ele.GetType() == typeof(Rectangle))
        {
            btnColor.Background = ((Rectangle)ele).Fill;
        }
    }
}

The code shown above reads the selected ListBoxItem. Since this selection returns an object of ‘StackPanel’, every child element is read from the UIElementCollection of the StackPanel. If the element is of the type ‘Rectangle’, its ‘Fill’ property is assigned to the ‘Background’ property of the ‘Button’.

That’s it. Run the application and the following result will be displayed:

Tweet

About The Author

Mahesh Sabnis is a Microsoft MVP having over 18 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet