locked
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?
    Tuesday, February 26, 2013 3:15 PM

Answers

  • 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.

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



    • Edited by henador Tuesday, February 26, 2013 4:57 PM
    • Proposed as answer by Jesse Jiang Wednesday, February 27, 2013 5:49 AM
    • Marked as answer by Jesse Jiang Monday, March 04, 2013 2:02 AM
    Tuesday, February 26, 2013 4:56 PM

All replies

  • 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.

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



    • Edited by henador Tuesday, February 26, 2013 4:57 PM
    • Proposed as answer by Jesse Jiang Wednesday, February 27, 2013 5:49 AM
    • Marked as answer by Jesse Jiang Monday, March 04, 2013 2:02 AM
    Tuesday, February 26, 2013 4:56 PM
  • Thank you, I'll try your method.
    Wednesday, February 27, 2013 3:41 PM
  • 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.
    Saturday, March 09, 2013 2:30 PM
  • 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.
    Saturday, March 09, 2013 10:38 PM