none
Binding color from slider value

    Question

  • Hi,

    I wanted to bind the value of a color from a slider, I could do it with 3 sliders for RGB or if possible with only one slider. I've tried to bind the R property from the slider but it didn't work. Any suggestions?

     

    Thanks
    Bruno Silva

    Saturday, September 09, 2006 12:17 AM

Answers

  • Hi Bruno,

    Adam Smith and I came up with a simple application that uses 4 sliders (alpha, red, green, blue) to control the background color of a Rectangle. I uploaded it to me server here: http://www.beacosta.com/Forum/MultiBindingConverter.zip.

    In our application, the 4 Sliders's Values are the sources of the binding and the SolidColorBrush's Color, in the Rectangle's Background, is the target. In this case, because we have 4 sources, we had to use a MultiBinding and write a Converter that combines them. This is the syntax for the rectangle with the MultiBinding:

                <Rectangle Width="200" Height="200" Margin="20">
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <MultiBinding Converter="{StaticResource conv}">
                                    <MultiBinding.Bindings>
                                        <Binding ElementName="alpha" Path="Value" />
                                        <Binding ElementName="red" Path="Value" />
                                        <Binding ElementName="green" Path="Value" />
                                        <Binding ElementName="blue" Path="Value" />
                                    </MultiBinding.Bindings>
                                </MultiBinding>
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>

    And here is the Converter:

        public class Conv : IMultiValueConverter
        {
            public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                float alpha = (float)(double)(values[0]);
                float red = (float)(double)(values[1]);
                float green = (float)(double)(values[2]);
                float blue = (float)(double) (values[3]);

                return Color.FromScRgb(alpha, red, green, blue);
            }

            public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotSupportedException();
            }
        }

    The sliders are pretty straight forward. Here is the alpha Slider:

                <Slider Minimum="0" Maximum="1" Value="0.75" Grid.Row="0" Grid.Column="1" Name="alpha" />

    This is a very cool sample. I will describe it better in my next blog post.

    Let us know if you have any questions about this.

    Thanks,

    Bea and Adam

    Saturday, September 09, 2006 1:27 AM
    Moderator
  • Hi Ryan,

    Remember that the target of a Binding has to be a DependencyProperty. So yes, as you said, that syntax doesn't work because R, G, B and A are not DPs.

    Bea

    Wednesday, October 11, 2006 4:44 PM
    Moderator

All replies

  • Hi Bruno,

    Adam Smith and I came up with a simple application that uses 4 sliders (alpha, red, green, blue) to control the background color of a Rectangle. I uploaded it to me server here: http://www.beacosta.com/Forum/MultiBindingConverter.zip.

    In our application, the 4 Sliders's Values are the sources of the binding and the SolidColorBrush's Color, in the Rectangle's Background, is the target. In this case, because we have 4 sources, we had to use a MultiBinding and write a Converter that combines them. This is the syntax for the rectangle with the MultiBinding:

                <Rectangle Width="200" Height="200" Margin="20">
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <MultiBinding Converter="{StaticResource conv}">
                                    <MultiBinding.Bindings>
                                        <Binding ElementName="alpha" Path="Value" />
                                        <Binding ElementName="red" Path="Value" />
                                        <Binding ElementName="green" Path="Value" />
                                        <Binding ElementName="blue" Path="Value" />
                                    </MultiBinding.Bindings>
                                </MultiBinding>
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>

    And here is the Converter:

        public class Conv : IMultiValueConverter
        {
            public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                float alpha = (float)(double)(values[0]);
                float red = (float)(double)(values[1]);
                float green = (float)(double)(values[2]);
                float blue = (float)(double) (values[3]);

                return Color.FromScRgb(alpha, red, green, blue);
            }

            public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotSupportedException();
            }
        }

    The sliders are pretty straight forward. Here is the alpha Slider:

                <Slider Minimum="0" Maximum="1" Value="0.75" Grid.Row="0" Grid.Column="1" Name="alpha" />

    This is a very cool sample. I will describe it better in my next blog post.

    Let us know if you have any questions about this.

    Thanks,

    Bea and Adam

    Saturday, September 09, 2006 1:27 AM
    Moderator
  • Thank you Beatriz, that's what I was looking for. :)

    (btw, I'm working with a friend of your's in Braga)

    Saturday, September 09, 2006 11:27 AM
  • Hello,

    In my head what I wanted to do was:

                <Rectangle Width="200" Height="200" Margin="20">
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color R="{Binding ElementName=redPath=Value}" G="{Binding ElementName=green Path=Value}" B="{Binding ElementName=blue Path=Value}" A="{Binding ElementName=alpha Path=Value}"/>
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>

    (I realize that there may be some syntax errors in there, but hopefully the intent is clear)

    I've looked around a little and looked at the examples relating to this; the gist is that I can't do it that way. I have to use the multi-binding like in Beatriz's example above or some other method with code.

    I would like to know the reason why you can't bind the RGBA properties directly. Is it because Color is a structure and not an object? (Since its not an object it can't be a dependancy object and have dependancy properties) Or maybe because a color value is generated and its individual properties (RGBA) cannot be dynamically changed?

    Thanks,

    Ryan

    Wednesday, October 11, 2006 3:22 PM
  • Hi Ryan,

    Remember that the target of a Binding has to be a DependencyProperty. So yes, as you said, that syntax doesn't work because R, G, B and A are not DPs.

    Bea

    Wednesday, October 11, 2006 4:44 PM
    Moderator
  • Hi There

    Is it possible to bind the value of a color from a slider using HSB or HLS ? For what I'm doing it would only be necessary to change the Hue as everything else is on 100% or 1.0.
    I have a Key Performance Indicator that i would like to apply this to.

    Thanks
    Dan
    • Edited by The_D_Man Monday, September 01, 2008 12:34 PM Added color format
    Monday, September 01, 2008 12:00 PM