Making a ColorPicker.

11 Sep 2013, 17:18

So, just out of curiosity, how would you guys go about creating a ColorPicker with noesis? Since afaik there isn't any control supported to make a ColorPicker?

Thanks.

11 Sep 2013, 20:48

Hi,
I'm still a noob in WPF but here is what i would do.

Firstly i would create a panel with the following code:

<DockPanel>
            <Grid  x:Name="huePanel" DockPanel.Dock="Right" MinWidth="20">
                <Border>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Red" Offset="0"/>
                            <GradientStop Color="Blue" Offset="0.333"/>
                            <GradientStop Color="Lime" Offset="0.666"/>
                            <GradientStop Color="Red" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>

                </Border>
            </Grid>
            <Grid x:Name="saturationBrightnessPanel">
                <Border>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
                            <GradientStop Color="#FFFF0000" Offset="0"/>
                            <GradientStop Color="#FFFFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Border>
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
                            <GradientStop Color="#FF000000" Offset="0"/>
                            <GradientStop Color="#00000000" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            </Grid>
        </DockPanel>

In procedural code i would detected the clicks on the left to select the brightness and saturation.
On the right i would detect the clicks to select the hue and change the brush of the left panel to reflect it.
(In my sample code the hue is red, obviously) I think you could go even further by customizing a slider to select the hue but i don't know how to do it.

12 Sep 2013, 09:24

Hi Justei,

You already have a ColorPicker example within the Primitives sample that comes with NoesisGUI Unity package. There you can find the xaml and associated script:

Assets/NoesisGUI/Samples/Primitives/ColorPicker.xaml
Assets/NoesisGUI/Samples/Primitives/ColorPicker.cs
Assets/NoesisGUI/Samples/Primitives/HSVControl.xaml
Assets/NoesisGUI/Samples/Primitives/HSVControl.cs

You can directly use it, or take it as base for creating your own control

12 Sep 2013, 10:20

oh lol i had not seen that, gonna check it too to see if it's like what i would have done

12 Sep 2013, 11:13

oh lol i had not seen that, gonna check it too to see if it's like what i would have done

The HSV control is very similar to the one you posted

10 Oct 2013, 21:35

A new color picker we have just added in one of the tutorials of NoesisGUI v1.1 can be found here:

http://forum.unity3d.com/threads/192064 ... ost1382484

We are preparing a gallery subsection to share xaml spinets and user control developed by the community.

Making a ColorPicker.

Making a ColorPicker.

Re: Making a ColorPicker.

Re: Making a ColorPicker.

Re: Making a ColorPicker.

Re: Making a ColorPicker.

Re: Making a ColorPicker.

Who is online