none
Color picker in metro style app - C#

    Question

  • Hi, I am developing a paint like application. Is there any control for color picker or I have to manually put a lot of buttons filled with color ?

    I have one more question is that how can I use custom cursor in metro style app ?

    Window.Current.CoreWindow.PointerCursor = new CoreCursor(CoreCursorType.Custom, uint id);

    How can I find that unique resorce ID for my cursor ? How to add my cursor ?

    Monday, July 02, 2012 7:21 AM

Answers

  • I make this color picker using slider

    <Grid x:Name="ColorPicker" Margin="335,122,10,123"  Background="#3f000000">
                        <StackPanel>
                            <Slider x:Name="RSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged"  >
                                                        </Slider>
                            <Slider x:Name="GSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Slider x:Name="BSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Slider x:Name="ASlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Rectangle x:Name="showColor" Height="84" Margin="0,0,418,0"/>
                        </StackPanel>
                    </Grid>

    on sliderchange event:

     private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
            {
                byte R, G, B, A;
    
                A = Convert.ToByte(ASlider.Value);
                R = Convert.ToByte(RSlider.Value);
                G = Convert.ToByte(GSlider.Value);
                B = Convert.ToByte(BSlider.Value);
    
                Color myColor = new Color();
                myColor = Color.FromArgb(A, R, G, B);
                
                showColor.Fill = new SolidColorBrush(myColor);
             }

    • Proposed as answer by Prateek Jaiswal Wednesday, September 12, 2012 11:30 AM
    • Marked as answer by Xyroid Wednesday, September 12, 2012 12:10 PM
    Wednesday, September 12, 2012 11:30 AM
  • WinRT does not have any color picker, here is workaround for filling the combo box with all colors.

    <ComboBox x:Name="cbBorderColor" Width="200" Height="40" ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" SelectionChanged="cbBorderColor_SelectionChanged" Padding="8,0" Margin="10,0,0,0">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="35" Height="20" Fill="{Binding Name}" Margin="5,0"/>
                                <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{Binding Name}" Foreground="Black"/>
                            </Grid>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

    Add this code within constructor scope.

    var colors = typeof(Colors).GetTypeInfo().DeclaredProperties;
    foreach (var item in colors)
    {
           cbBorderColor.Items.Add(item);
    }

    Selection changed event

    private void cbBorderColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (cbBorderColor.SelectedIndex != -1)
                {
                    var pi = cbBorderColor.SelectedItem as PropertyInfo;
                    BorderColor = (Color)pi.GetValue(null);
                }
            }

    • Marked as answer by Xyroid Wednesday, July 11, 2012 5:20 AM
    Wednesday, July 11, 2012 5:19 AM

All replies

  • In the future, please use separate posts for unrelated questions.

    1) There is no in-box color picker control.

    2) I am researching the custom cursor issue.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    Monday, July 02, 2012 5:54 PM
    Moderator
  • There is no way to register custom cursors in a Metro style app.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    Friday, July 06, 2012 6:47 PM
    Moderator
  • WinRT does not have any color picker, here is workaround for filling the combo box with all colors.

    <ComboBox x:Name="cbBorderColor" Width="200" Height="40" ItemsSource="{Binding Colors}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" SelectionChanged="cbBorderColor_SelectionChanged" Padding="8,0" Margin="10,0,0,0">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="35" Height="20" Fill="{Binding Name}" Margin="5,0"/>
                                <TextBlock Grid.Column="1" Margin="10,0,0,0" Text="{Binding Name}" Foreground="Black"/>
                            </Grid>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>

    Add this code within constructor scope.

    var colors = typeof(Colors).GetTypeInfo().DeclaredProperties;
    foreach (var item in colors)
    {
           cbBorderColor.Items.Add(item);
    }

    Selection changed event

    private void cbBorderColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (cbBorderColor.SelectedIndex != -1)
                {
                    var pi = cbBorderColor.SelectedItem as PropertyInfo;
                    BorderColor = (Color)pi.GetValue(null);
                }
            }

    • Marked as answer by Xyroid Wednesday, July 11, 2012 5:20 AM
    Wednesday, July 11, 2012 5:19 AM
  • I make this color picker using slider

    <Grid x:Name="ColorPicker" Margin="335,122,10,123"  Background="#3f000000">
                        <StackPanel>
                            <Slider x:Name="RSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged"  >
                                                        </Slider>
                            <Slider x:Name="GSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Slider x:Name="BSlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Slider x:Name="ASlider" LargeChange="5" Maximum="255" ValueChanged="Slider_ValueChanged" ></Slider>
                            <Rectangle x:Name="showColor" Height="84" Margin="0,0,418,0"/>
                        </StackPanel>
                    </Grid>

    on sliderchange event:

     private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
            {
                byte R, G, B, A;
    
                A = Convert.ToByte(ASlider.Value);
                R = Convert.ToByte(RSlider.Value);
                G = Convert.ToByte(GSlider.Value);
                B = Convert.ToByte(BSlider.Value);
    
                Color myColor = new Color();
                myColor = Color.FromArgb(A, R, G, B);
                
                showColor.Fill = new SolidColorBrush(myColor);
             }

    • Proposed as answer by Prateek Jaiswal Wednesday, September 12, 2012 11:30 AM
    • Marked as answer by Xyroid Wednesday, September 12, 2012 12:10 PM
    Wednesday, September 12, 2012 11:30 AM
  • Thanks Prateek. Great work :)
    Wednesday, September 12, 2012 12:10 PM
  • welcome :)

    Wednesday, September 12, 2012 1:11 PM
  • can you please write the code in VB
    Monday, February 18, 2013 3:15 PM
  • Imports Windows.UI
    Imports System.Reflection
    Dim colors = GetType(Colors).GetTypeInfo().DeclaredProperties
    For Each item As IEnumerable(Of PropertyInfo) In colors
           cbBorderColor.Items.Add(item)
    Next
    Private Sub cbBorderColor_SelectionChanged(sender As Object, e As SelectionChangedEventArgs)
    	If cbBorderColor.SelectedIndex <> -1 Then
    		Dim pi = TryCast(cbBorderColor.SelectedItem, PropertyInfo)
    		BorderColor = DirectCast(pi.GetValue(Nothing), Color)
    	End If
    End Sub


    • Edited by Xyroid Saturday, February 23, 2013 7:05 AM
    Tuesday, February 19, 2013 5:53 AM
  •  the code dos not work

    VAR  & PropertyInfo is not recognized


    Saturday, February 23, 2013 5:47 AM
  • @imr2k1, please check the updated code
    Saturday, February 23, 2013 7:02 AM
  • I tried the code and get an error in line { For Each item As IEnumerable(Of PropertyInfo) In colors  }

    Additional information: Unable to cast object of type 'System.Reflection.RuntimePropertyInfo' to type 'System.Collections.Generic.IEnumerable`1[System.Reflection.PropertyInfo]'.

    Sunday, February 24, 2013 1:36 PM
  • Jose Fajardo did great job on color picker. he has created a xaml color picker user control using sharpdx. you can find code and video on following link :

    winrtxaml color picker

    --------------------------------------------------------------------------------

    If you find my post helpful, mark it as answer or Vote as helpful. ^_^

    Thursday, March 07, 2013 6:40 PM
  • None of these examples show how to set the initial value, such that the control is populated with a value at startup. That's a big deal, and it's not obvious.

    Randy

    Tuesday, October 01, 2013 5:55 PM