none
WPF Application Color picker

    Question

  • OK. I've been working on a WPF Drawing Editor project, and i have some problems.

    I want to implement RGB sliders for color picker, and i can't seem to get function Color.FromRgb() in C# working. 

     

    I keep getting error message:

    System.Windows.Controls.Canvas' does not contain a definition for 'FromRgb' and no extension method 'FromRgb' accepting a first argument of type 'System.Windows.Controls.Canvas' could be found (are you missing a using directive or an assembly reference?)

     What am i doing wrong? I did another WPF App and tested that function, and it was working perfectly, but when i try to implement it in my project, this error appears.

    Help please.

     

    Wednesday, June 04, 2008 2:01 PM

Answers

  • Here is my color Picker UserControl that works. It is very similar to yours:

    XAML: 

    <Grid Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Vertical" Grid.RowSpan="3" Margin="0,20, 0, 20">
                <TextBlock Margin="10" Text="alpha"></TextBlock>
                <Slider x:Name="Alpha" Margin="10, 0, 10, 10" Value="{Binding Alpha, Mode=TwoWay}"  Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="red"></TextBlock>
                <Slider x:Name="Red" Margin="10, 0, 10, 10"  Value="{Binding Red, Mode=TwoWay}" Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="green"></TextBlock>
                <Slider x:Name="Green" Margin="10, 0, 10, 10" Value="{Binding Green, Mode=TwoWay}"  Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="blue"></TextBlock>
                <Slider x:Name="Blue" Margin="10, 0, 10, 10" Value="{Binding Blue, Mode=TwoWay}" Minimum="0" Maximum="255" SmallChange="4"></Slider>
            </StackPanel>             
            <Rectangle  RadiusX="10" RadiusY="10" Grid.Column="1" Margin="10" x:Name="PickedColor" Fill="{Binding Brush}" Stroke="#FF666666" StrokeThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">                                              
            </Rectangle>
            <StackPanel Grid.Column="1" Grid.Row="1">
                <TextBlock Text="Color:" Margin="10"></TextBlock>    
                <Border CornerRadius="5"  Margin="10,0,10,0" BorderThickness="1" BorderBrush="#FF666666">
                    <TextBox x:Name="HexColor" Margin="5,0,5,0" BorderThickness="0" Text="{Binding HexValue, Mode=TwoWay}">              
                    </TextBox>           
                 </Border>
            </StackPanel>
            <StackPanel Grid.Column="1" Grid.Row="2">
                <TextBlock Text="Color Mode:" Margin="10,10,10,0"></TextBlock>
                <RadioButton x:Name="Mode_ARGB" Content="ARGB" Margin="10,0,0,0" GroupName="ColorMode" IsChecked="True"></RadioButton>
                <RadioButton x:Name="Mode_HSL" Content="HSL" Margin="10,0,10,0" GroupName="ColorMode"></RadioButton>
            </StackPanel>            
        </Grid>

    Code Behind:

    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Browser;
    using System.ComponentModel;

    namespace YourNameSpace.Silverlight
    {
        public partial class ColorPicker : UserControl
        {
            Picker thePicker = new Picker();
            public ColorPicker()
            {
                InitializeComponent();           
                this.DataContext = thePicker;                    
            }           
        }
        public enum ColorMode
        {
            RGB,
            HSL
        }

       
        public class Picker : INotifyPropertyChanged
        {
            Color theColor = new Color();
            public Picker()
            {                      
                theColor.A = (byte)128;
                theColor.R = (byte)128;
                theColor.G = (byte)128;
                theColor.B = (byte)128;
                _brush = new SolidColorBrush(theColor);         
            }       
           
            public int Alpha
            {
                get { return (int)theColor.A; }
                set
                {
                    theColor.A = (byte)value;
                    NotifyChange("HexValue", "Brush");              
                }
            }

            public int Red
            {
                get { return (int)theColor.R; }
                set
                {
                    theColor.R = (byte)value;
                    NotifyChange("HexValue", "Brush");    
                }
            }
            public int Green
            {
                get { return (int)theColor.G; }
                set
                {
                    theColor.G = (byte)value;
                    NotifyChange("HexValue", "Brush");    
                }
            }
            public int Blue
            {
                get { return (int)theColor.B; }
                set
                {
                    theColor.B = (byte)value;
                    NotifyChange("HexValue", "Brush");             
                }
            }
            public ColorMode Mode { get; set; }

            public string HexValue
            {
                get { return theColor.ToString(); }
                set
                {
                    if (!value.StartsWith("#"))
                        return;               
                    string v = value.TrimStart('#');
                    if(v.Length > 8)
                        return;
                    if(v.Length == 6)
                        v = "FF" + v;
                    if(v.Length < 6)
                        v = "FF" + v;
                    while(v.Length < 8)
                        v += "0";

                    theColor.A = (byte)System.Convert.ToInt32(v.Substring(0, 2), 16);
                    theColor.R = (byte)System.Convert.ToInt32(v.Substring(2, 2), 16);
                    theColor.G = (byte)System.Convert.ToInt32(v.Substring(4, 2), 16);
                    theColor.B = (byte)System.Convert.ToInt32(v.Substring(6, 2), 16);               
                    NotifyChange("HexValue", "Brush", "Red", "Blue", "Green", "Alpha");
                }
            }
           
            private SolidColorBrush _brush;
            public SolidColorBrush Brush
            {
                get
                {
                    _brush.Color = theColor;
                    return _brush;                    
                }
            }

            private void NotifyChange(params object[] properties)
            {
                if (PropertyChanged != null)
                {
                    foreach (string p in properties)
                        PropertyChanged(this, new PropertyChangedEventArgs(p));              
                }
            }
            #region INotifyPropertyChanged Members

            public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

            #endregion
        }
       
    }

    Wednesday, June 04, 2008 3:02 PM
  • You used data binding. Neat stuff. :)

     Anyway's. I solved the problem. I've created a whole new WPF App, and did all the work again, and now it works. Still can't figure out why it didn't work in old project, but never mind.

     

    Thx anyways guys ;)
     

    Wednesday, June 04, 2008 4:59 PM

All replies

  • where exactly do you get that error message? can you post the entire code? and please not that not everything that works in wpf will work in silverlight ...

    Wednesday, June 04, 2008 2:07 PM
  • In silverlight the function is Color.FromArgb(alfa, r, b, g).

    By the way, do you have a Canvas named "Color" in your page?


     

     

    Wednesday, June 04, 2008 2:08 PM
  • I'm working in Visual Studio 2008, and Expression Blend 2 Beta March Preview 2.5

     The code is like this:


    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;

    namespace WpfApplication
    {
        /// <summary>
        /// Interaction logic for ColorControl.xaml
        /// </summary>
        public partial class ColorControl
        {
            public ColorControl()
            {
                this.InitializeComponent();
            }

            private double red = 0;
            private double green = 0;
            private double blue = 0;

            private void Default_Color(object sender, RoutedEventArgs e)
            {
                Rectangle rect = sender as Rectangle;
                rect.Fill = new SolidColorBrush(Color.FromRgb(Convert.ToByte(red), Convert.ToByte(green), Convert.ToByte(blue)));
            }

            private void SliderValueChange(object sender, RoutedEventArgs e)
            {
                Slider slider = sender as Slider;

                switch (slider.Name)
                {
                    case "SliderRed":
                        red = slider.Value;
                        break;
                    case "SliderGreen":
                        green = slider.Value;
                        break;
                    case "SliderBlue":
                        blue = slider.Value;
                        break;
                    default:
                        break;
                }
                ColorBox.Fill = new SolidColorBrush(Color.FromRgb(Convert.ToByte(red), Convert.ToByte(green), Convert.ToByte(blue)));
            }
        }
    }

    Wednesday, June 04, 2008 2:10 PM
  • In silverlight the function is Color.FromArgb(alfa, r, b, g).

    By the way, do you have a Canvas named "Color" in your page?

     

     I have 3 sliders (rgb) value range 0-255, and one rectangle which acts like color preview box.
     

    Wednesday, June 04, 2008 2:13 PM
  • hi,

     as mentioned by sladapter before, in sl it is fromArgb - A is the Alpha channel, so just add 255 ... or less if you want to have it transparent ...

    Wednesday, June 04, 2008 2:15 PM
  • I've tried that to. Same thing.

     The thing is. I know it can work. As i mentioned. I did another WPF project with only 3 sliders, and rectangle. I wrote same functions for sliders, and it worked very nice.

    I just wonder why it doesn't work in bigger project.

    Wednesday, June 04, 2008 2:19 PM
  • Check your XAML to see if you named your Canvas to Color (x:Name="Color")

     

    Wednesday, June 04, 2008 2:46 PM
  •  I've named it ColorBox. And i referenced it like that.

    Wednesday, June 04, 2008 2:54 PM
  • Here is my color Picker UserControl that works. It is very similar to yours:

    XAML: 

    <Grid Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Vertical" Grid.RowSpan="3" Margin="0,20, 0, 20">
                <TextBlock Margin="10" Text="alpha"></TextBlock>
                <Slider x:Name="Alpha" Margin="10, 0, 10, 10" Value="{Binding Alpha, Mode=TwoWay}"  Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="red"></TextBlock>
                <Slider x:Name="Red" Margin="10, 0, 10, 10"  Value="{Binding Red, Mode=TwoWay}" Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="green"></TextBlock>
                <Slider x:Name="Green" Margin="10, 0, 10, 10" Value="{Binding Green, Mode=TwoWay}"  Minimum="0" Maximum="255" SmallChange="4"></Slider>
                <TextBlock Margin="10" Text="blue"></TextBlock>
                <Slider x:Name="Blue" Margin="10, 0, 10, 10" Value="{Binding Blue, Mode=TwoWay}" Minimum="0" Maximum="255" SmallChange="4"></Slider>
            </StackPanel>             
            <Rectangle  RadiusX="10" RadiusY="10" Grid.Column="1" Margin="10" x:Name="PickedColor" Fill="{Binding Brush}" Stroke="#FF666666" StrokeThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">                                              
            </Rectangle>
            <StackPanel Grid.Column="1" Grid.Row="1">
                <TextBlock Text="Color:" Margin="10"></TextBlock>    
                <Border CornerRadius="5"  Margin="10,0,10,0" BorderThickness="1" BorderBrush="#FF666666">
                    <TextBox x:Name="HexColor" Margin="5,0,5,0" BorderThickness="0" Text="{Binding HexValue, Mode=TwoWay}">              
                    </TextBox>           
                 </Border>
            </StackPanel>
            <StackPanel Grid.Column="1" Grid.Row="2">
                <TextBlock Text="Color Mode:" Margin="10,10,10,0"></TextBlock>
                <RadioButton x:Name="Mode_ARGB" Content="ARGB" Margin="10,0,0,0" GroupName="ColorMode" IsChecked="True"></RadioButton>
                <RadioButton x:Name="Mode_HSL" Content="HSL" Margin="10,0,10,0" GroupName="ColorMode"></RadioButton>
            </StackPanel>            
        </Grid>

    Code Behind:

    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Browser;
    using System.ComponentModel;

    namespace YourNameSpace.Silverlight
    {
        public partial class ColorPicker : UserControl
        {
            Picker thePicker = new Picker();
            public ColorPicker()
            {
                InitializeComponent();           
                this.DataContext = thePicker;                    
            }           
        }
        public enum ColorMode
        {
            RGB,
            HSL
        }

       
        public class Picker : INotifyPropertyChanged
        {
            Color theColor = new Color();
            public Picker()
            {                      
                theColor.A = (byte)128;
                theColor.R = (byte)128;
                theColor.G = (byte)128;
                theColor.B = (byte)128;
                _brush = new SolidColorBrush(theColor);         
            }       
           
            public int Alpha
            {
                get { return (int)theColor.A; }
                set
                {
                    theColor.A = (byte)value;
                    NotifyChange("HexValue", "Brush");              
                }
            }

            public int Red
            {
                get { return (int)theColor.R; }
                set
                {
                    theColor.R = (byte)value;
                    NotifyChange("HexValue", "Brush");    
                }
            }
            public int Green
            {
                get { return (int)theColor.G; }
                set
                {
                    theColor.G = (byte)value;
                    NotifyChange("HexValue", "Brush");    
                }
            }
            public int Blue
            {
                get { return (int)theColor.B; }
                set
                {
                    theColor.B = (byte)value;
                    NotifyChange("HexValue", "Brush");             
                }
            }
            public ColorMode Mode { get; set; }

            public string HexValue
            {
                get { return theColor.ToString(); }
                set
                {
                    if (!value.StartsWith("#"))
                        return;               
                    string v = value.TrimStart('#');
                    if(v.Length > 8)
                        return;
                    if(v.Length == 6)
                        v = "FF" + v;
                    if(v.Length < 6)
                        v = "FF" + v;
                    while(v.Length < 8)
                        v += "0";

                    theColor.A = (byte)System.Convert.ToInt32(v.Substring(0, 2), 16);
                    theColor.R = (byte)System.Convert.ToInt32(v.Substring(2, 2), 16);
                    theColor.G = (byte)System.Convert.ToInt32(v.Substring(4, 2), 16);
                    theColor.B = (byte)System.Convert.ToInt32(v.Substring(6, 2), 16);               
                    NotifyChange("HexValue", "Brush", "Red", "Blue", "Green", "Alpha");
                }
            }
           
            private SolidColorBrush _brush;
            public SolidColorBrush Brush
            {
                get
                {
                    _brush.Color = theColor;
                    return _brush;                    
                }
            }

            private void NotifyChange(params object[] properties)
            {
                if (PropertyChanged != null)
                {
                    foreach (string p in properties)
                        PropertyChanged(this, new PropertyChangedEventArgs(p));              
                }
            }
            #region INotifyPropertyChanged Members

            public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

            #endregion
        }
       
    }

    Wednesday, June 04, 2008 3:02 PM
  • You used data binding. Neat stuff. :)

     Anyway's. I solved the problem. I've created a whole new WPF App, and did all the work again, and now it works. Still can't figure out why it didn't work in old project, but never mind.

     

    Thx anyways guys ;)
     

    Wednesday, June 04, 2008 4:59 PM