Justei
Topic Author
Posts: 17
Joined: 28 Aug 2013, 21:03

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.
 
Shorinji
Posts: 24
Joined: 16 Aug 2013, 19:45
Location: Shanghai

Re: Making a ColorPicker.

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.
 
User avatar
sfernandez
Site Admin
Posts: 1974
Joined: 22 Dec 2011, 19:20

Re: Making a ColorPicker.

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 ;)
 
Shorinji
Posts: 24
Joined: 16 Aug 2013, 19:45
Location: Shanghai

Re: Making a ColorPicker.

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
 
User avatar
sfernandez
Site Admin
Posts: 1974
Joined: 22 Dec 2011, 19:20

Re: Making a ColorPicker.

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 :)
 
User avatar
jsantos
Site Admin
Posts: 2959
Joined: 20 Jan 2012, 17:18
Contact:

Re: Making a ColorPicker.

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.

Who is online

Users browsing this forum: asusralis, Bing [Bot] and 5 guests