Draw color ramp in combobox

Question

I'd like to add an array of color schemes for contour rendering in a combobox. A color scheme is required to drawn as a color ramp. How can I do this? Is there any relevant code sample?

Answer 1

Create a ComboBox where:

1. Each item is a GradientStopCollection for a color scheme

2. The ComboBox.ItemTemplate is a Rectangle where Rectangle.Fill is a LinearGradientBrush whose GradientStops="{Binding}"

There may be easier ways to accomplish this task but this one works well. Start by using just a Rectangle to get the LinearGradientBrush/GradientStops stuff worked out then dork around with adding them to a ComboBox.

I highly recommend getting Petzold's "Programming Windows" Sixth Edition (for Windows8/WinRT and XAML). It covers stuff like this and much more.

Answer 2

Thank you, I'll try your method.

Answer 3

I tries your method but it still does not work. Here is my XAML code

                        <ComboBox x:Name="ShadingScheme" SelectionChanged="OnShadingSchemeSelectionChanged" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2">
                            <ComboBox.ItemTemplate>
                                <DataTemplate>
                                    <Rectangle Width="180" Height="30">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush StartPoint="0.0, 0.0" EndPoint="1.0, 0.0" GradientStops="{Binding GradientStopCollection}"/>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>

And the corresponding C++ code:

    // Shading scheme: rainbow
    GradientStopCollection^ colorRampRainbow = ref new GradientStopCollection();
    for ( int i = 0; i < MAX_RAINBOW_SHADE_COLOR; i++ ) {
        GradientStop^ gradientStop = ref new GradientStop();
        gradientStop->Offset = 1.0*i/(MAX_RAINBOW_SHADE_COLOR-1);
        mcolor_get_component(MCOLOR_SHADE_RAINBOW[i], r, g, b);
        gradientStopColor.R = r; gradientStopColor.G = g; gradientStopColor.B = b; gradientStopColor.A=255;
        gradientStop->Color = gradientStopColor;
        colorRampRainbow->Append(gradientStop);
    }

    // Shading scheme: aqua
    GradientStopCollection^ colorRampAqua = ref new GradientStopCollection();
    for ( int i = 0; i < MAX_AQUA_SHADE_COLOR; i++ ) {
        GradientStop^ gradientStop = ref new GradientStop();
        gradientStop->Offset = 1.0*i/(MAX_AQUA_SHADE_COLOR-1);
        mcolor_get_component(MCOLOR_SHADE_AQUA[i], r, g, b);
        gradientStopColor.R = r; gradientStopColor.G = g; gradientStopColor.B = b; gradientStopColor.A=255;
        gradientStop->Color = gradientStopColor;
        colorRampAqua->Append(gradientStop);
    }
    
	Vector<GradientStopCollection^>^ allColorRamps = ref new Vector<GradientStopCollection^>();
    allColorRamps->Append(colorRampRainbow);
    allColorRamps->Append(colorRampAqua);
    ShadingScheme->ItemsSource = allColorRamps;

Although there are two items in the combobox, the color ramp is not shown, just a white rectangle instead. Could you point out what's wrong with my code? thanks.

Answer 4

I keep trying to figure it out, and find if I change the binding definition from

 <LinearGradientBrush StartPoint="0.0, 0.0" EndPoint="1.0, 0.0" GradientStops="{Binding GradientStopCollection}"/>

to

 <LinearGradientBrush StartPoint="0.0, 0.0" EndPoint="1.0, 0.0" GradientStops="{Binding}"/>

The first color ramp can be drawn in the combobox. But when I click the drop down arrow of the combobox, my app crashes.