#963 – A Color Selection Box Organized by Hue, part II

In part I, I included source code for generating a list of sample colors.

To bind to a generated color list, we can call ColorUtil.GenerateColorList and make the result available via a property.  In the code sample below, we generate a list of 4,096 colors (16 values for red, green and blue).

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        this.InitializeComponent();
        this.DataContext = this;

         ColorList = ColorUtil.GenerateColorList(16);
    }

    private List<ColorWithInfo> colorList;
    public List<ColorWithInfo> ColorList
    {
        get { return colorList; }
        protected set
        {
            colorList = value;
            RaisePropertyChanged("ColorList");
        }
    }

    // INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    private void RaisePropertyChanged(string propName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }
}

In our XAML, we can create a simple ComboBox that binds to this list.  We set the ItemTemplate to display each color as a simple rectangle and the ItemsPanel as a WrapPanel with a fixed width.

    <ComboBox Margin="15" Height="30" Width="200"
                ItemsSource="{Binding ColorList}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Rectangle Height="55" Width="55">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{Binding Color}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </Grid>
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <ComboBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal" Width="1000"/>
            </ItemsPanelTemplate>
        </ComboBox.ItemsPanel>
    </ComboBox>

Below is an image showing the ComboBox in action. Note that the colors are sorted by hue, given that the GenerateColorList method sorted the color values this way.

963-001

#962 – A Color Selection Box Organized by Hue, part I

Here’s some code that generates a spread of different colors.  (We’ll later bind a ComboBox to the generated list of colors).

    public class ColorWithInfo : IComparable
    {
        public Color Color { get; set; }

        public string Info
        {
            get { return string.Format("{0}/{1}/{2}", Color.R, Color.G, Color.B); }
        }

        public string HueSatBright
        {
            get { return string.Format("{0}/{1}/{2}", Hue, Saturation, Brightness); }
        }

        public float Hue
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetHue(); }
        }

        public float Saturation
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetSaturation(); }
        }

        public float Brightness
        {
            get { return System.Drawing.Color.FromArgb(Color.R, Color.G, Color.B).GetBrightness(); }
        }

        public int CompareTo(object obj)
        {
            ColorWithInfo cwiOther = obj as ColorWithInfo;

            // Sort by Hue, and then Saturation, and then Brightness
            if (this.Hue == cwiOther.Hue)
            {
                if (this.Saturation == cwiOther.Saturation)
                    return this.Brightness.CompareTo(cwiOther.Brightness);
                else
                    return this.Saturation.CompareTo(cwiOther.Saturation);
            }
            else
                return this.Hue.CompareTo(cwiOther.Hue);
        }
    }

    public static class ColorUtil
    {
        public static List<ColorWithInfo> GenerateColorList(int numValsPerColor)
        {
            List<ColorWithInfo> colorList = new List<ColorWithInfo>();

            // Create increment such that we start at 0, end at 255,
            // and have a total of numValsPerColor within that range.
            int delta = Convert.ToInt32(255.0 / ((double)numValsPerColor - 1.0));

            for (int r = 0; r < numValsPerColor; r++)
                for (int g = 0; g < numValsPerColor; g++)
                    for (int b = 0; b < numValsPerColor; b++)
                    {
                        ColorWithInfo cwi = new ColorWithInfo {
                            Color = Color.FromRgb((byte)(r * delta), (byte)(g * delta), (byte)(b * delta))};
                        colorList.Add(cwi);
                    }

            colorList.Sort();

            return colorList;
        }
    }

#946 – Checking for Valid Characters in a String

You can use a regular expression to check a string to see if the string contains only characters within a specified set of characters.

For example, to check whether a string is limited to a single line containing only alphabetic characters (e.g. a..z, A..Z), you can use the regular expression shown below.

        private bool IsAlphabetic(string s)
        {
            Regex r = new Regex(@"^[a-zA-Z]+$");

            return r.IsMatch(s);
        }

The regular expression defines a pattern and the IsMatch method checks the string to see if it matches the pattern.  You can read the regular expression as follows:

  • ^ – start of the string
  • [a..zA..Z] – single character that is a lowercase or uppercase letter
  • + – repeat previous item one or more times (alphabetic character)
  • $ – end of the string

A string will therefore match if it is a single line of text containing at least one alphabetic character and is limited to alphabetic characters.

946-001

 

946-002

#832 – Creating a Cursor File

If you want to use a custom cursor in your application, you can create a .cur (static) or .ani (animated) cursor file using a cursor creation application.  You can then embed the resulting cursor file in your application and load it at run-time.

One good example of a cursor creation application is the RealWorld Cursor Editor, available as freeware.

The RealWorld Editor allows creating a cursor from scratch or creating a cursor based on an image.  Below, we convert an image of Cyrano de Bergerac into a cursor that we can then use as the mouse pointer.

We load the image into the application.

832-001

We flip the image horizontally, rotate it so that the nose points up and to the left, and then erase everything but the face.

832-002

Finally, we use the Create mouse cursor command.

832-003

The hotspot is set to the tip of the nose.

832-004

832-005

832-006

 

Voila!

832-007

832-008

#831 – Embedding a Cursor in Your Project as a Resource

If you have a custom cursor that your application uses, you can load it at run-time from an external file.  But this requires that you distribute the cursor file with your application.  To avoid distributing the .cur file, you can embed this file into your project as a resource.

First, add the .cur file to your project and set its Build Action to Resource.

831-001

831-002

831-003

831-004

To load the cursor at run-time, you use the Application.GetResourceStream method, which returns a StreamResourceInfo object.  You can then use the Stream property of this object to create the cursor.  (You’ll need a using statement for the System.Windows.Resources namespace).

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            StreamResourceInfo sriCurs = Application.GetResourceStream(
                new Uri("captain-america-arrow.cur", UriKind.Relative));

            this.Cursor = new Cursor(sriCurs.Stream);
        }

831-005

#830 – Loading a Cursor from a File

You can set a cursor in your application to a cursor that you load from a .cur or .ani file.  The constructor for the System.Windows.Input.Cursor class accepts either a filename or a stream.  If you use a filename, you should use the full path to your cursor file.

In the example below, we set the cursor for the parent window to one of two different cursors, depending on which button we click.

    <StackPanel>
        <Button Content="Steve Rogers" Margin="10"
               Click="Button_Click_1"/>
        <Button Content="Peggy Carter" Margin="10"
                Click="Button_Click_2"/>
    </StackPanel>

 

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            string fullPath = Path.Combine(Environment.CurrentDirectory, "captain-america-arrow.cur");
            this.Cursor = new Cursor(fullPath);
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            string fullPath = Path.Combine(Environment.CurrentDirectory, "captain-america-shield.ani");
            this.Cursor = new Cursor(fullPath);
        }

830-001
830-002

#829 – Setting an Application-Wide Cursor from Code

You can use the Cursors property of a FrameworkElement to set the cursor that the user sees when moving the mouse over that element.  This cursor will also be used on descendant elements of the element where you set the cursor.

You can also set the cursor from code.  You could just set the Cursor property of an individual element in code.  But you can also set the static Mouse.OverrideCursor property, indicating a cursor that should be used throughout the entire application.  This will override any Cursor properties of individual elements.

    <StackPanel>
        <Label Content="Ad eundum quo nemo ante iit"
               Background="LightCoral"
               Cursor="Hand"/>
        <Label Content="Noli habere bovis, vir"
               Background="DarkSeaGreen"/>
        <Button Content="Ventilabis Me"
                Click="btnClick"
                HorizontalAlignment="Center"/>
    </StackPanel>

 

        private void btnClick(object sender, RoutedEventArgs e)
        {
            Mouse.OverrideCursor = Cursors.AppStarting;
        }

829-001
829-002

#827 – Overriding the Cursor Properties of Child Elements

A child FrameworkElement can set a Cursor value that overrides the current Cursor value set by a parent (or ancestor) element.  This new Cursor value then applies in the element where it is set and any of its own child elements.

A parent/ancestor FrameworkElement can, however, force all child elements to use a particular cursor, by setting the ForceCursor property to true.  This overrides any Cursor property values that the child elements might set.

In the example below, the second Button sets its Cursor property to Hand, but this value is overridden because the parent StackPanel sets the ForceCursor property to true.

    <StackPanel Cursor="Hand" ForceCursor="True">
        <Label Content="Ad eundum quo nemo ante iit"
               Margin="5"
               Background="LightCoral"/>
        <Label Content="Noli habere bovis, vir"
               Margin="5"
               Background="DarkSeaGreen"/>
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button Content="Veni, Vidi"
                    Padding="10,5" Margin="10"/>
            <Button Content="Dormivi"
                    Cursor="Wait"
                    Padding="10,5" Margin="10"/>
        </StackPanel>
    </StackPanel>

827-001
827-002

#826 – Lower-Level Elements Can Have Different Cursor

Cursor set on a top-level FrameworkElement will also be used on all elements within the parent element’s logical tree.  All lower-level elements will show the same cursor when the user hovers over the element.

You can, however, set a Cursor on a top-level element and then set a different value for Cursor on the lower-level element.  The top-level Cursor will be used for all descendants of the top-level element except for the one that explicitly sets a different cursor.

    <StackPanel Cursor="Hand">
        <Label Content="Ad eundum quo nemo ante iit"
               Margin="5"
               Background="LightCoral"/>
        <Label Content="Noli habere bovis, vir"
               Margin="5"
               Background="DarkSeaGreen"/>
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button Content="Veni, Vidi"
                    Padding="10,5" Margin="10"/>
            <Button Content="Dormivi"
                    Cursor="Wait"
                    Padding="10,5" Margin="10"/>
        </StackPanel>
    </StackPanel>

826-001
826-002

#824 – Setting a Cursor on a Top Level Element

When you set the Cursor property on a FrameworkElement, the cursor is displayed whenever you move the mouse pointer over that element.  This Cursor value will also apply to all descendants of the element.

In the example below, when we set the Cursor in the top-level Window, that cursor is used for all elements contained in the window.

Layout, within the Window:

    <StackPanel>
        <Label Content="Ad eundum quo nemo ante iit"
               Margin="5"
               Background="LightCoral"/>
        <Label Content="Noli habere bovis, vir"
               Margin="5"
               Background="DarkSeaGreen"/>
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <Button Content="Veni, Vidi"
                    Padding="10,5" Margin="10"
                    Click="btnClick_Wait"/>
            <Button Content="Dormivi"
                    Padding="10,5" Margin="10"
                    Click="btnClick_StopWaiting"/>
        </StackPanel>
    </StackPanel>

Code-behind:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnClick_Wait(object sender, RoutedEventArgs e)
        {
            this.Cursor = Cursors.AppStarting;
        }

        private void btnClick_StopWaiting(object sender, RoutedEventArgs e)
        {
            this.Cursor = Cursors.Arrow;
        }
    }

824-001
824-002
824-003
824-004
824-005

Follow

Get every new post delivered to your Inbox.

Join 311 other followers