Creating a Custom xamSlider Control

Before You Begin

The xamSlider™ control is associated with several base classes that you too can use to create your own custom sliders. You can inherit the xamSimpleSliderBase and xamRangeSlider classes so that you can create your own custom xamSlider control.

This topic will demonstrate how to override the following methods to create a xamSlider control that uses Color as a value.

DoubleToValue
ValueToDouble
GetParameter
SupportsCommand

What You Will Accomplish

You will create your own custom Color xamSlider control.

Follow these Steps

Create your own custom xamSimpleSliderBase and name it ColorSlider.

In Visual Basic:

Public Class ColorSlider
    Inherits XamSimpleSliderBase(Of Color)
    Protected Overloads Overrides Function DoubleToValue(ByVal value As
                Double) As Color
        Dim pixel As Integer = CInt(value)
        'Shift int to RGBA values
        Dim B As Byte = CByte((pixel And &HFF))
        pixel >>= 8
        Dim G As Byte = CByte((pixel And &HFF))
        pixel >>= 8
        Dim R As Byte = CByte((pixel And &HFF))
        pixel >>= 8
        ' alpha
        Dim A As Byte = CByte(pixel)
        Return Color.FromArgb(A, R, G, B)
    End Function
    Protected Overloads Overrides Function ValueToDouble(ByVal value As
                 Color) As Double
        Return (value.A << 24 Or value.R << 16 Or value.G << 8 Or value.B)
    End Function
    Protected Overloads Overrides Function GetParameter(ByVal source As
                 CommandSource) As Object
        If TypeOf source.Command Is xamSliderBaseCommandBase Then
            Return (Me)
        End If
        Return (Nothing)
    End Function
    Protected Overloads Overrides Function SupportsCommand(ByVal command As
                 ICommand) As Boolean
        Return (TypeOf command Is xamSliderBaseCommandBase)
    End Function
End Class

In C#:

public class ColorSlider : XamSimpleSliderBase<Color>
{
   protected override Color DoubleToValue(double value)
   {
      int pixel = (int)value;
      //Shift int to RGBA values
      byte B = (byte)(pixel & 0xFF); pixel >>= 8;
      byte G = (byte)(pixel & 0xFF); pixel >>= 8;
      byte R = (byte)(pixel & 0xFF); pixel >>= 8;
      byte A = (byte)pixel; // alpha
      return Color.FromArgb(A, R, G, B);
   }
   protected override double ValueToDouble(Color value)
   {
      return value.A << 24 | value.R << 16 | value.G << 8 | value.B;
   }
   protected override object GetParameter(CommandSource source)
   {
      if (source.Command is xamSliderBaseCommandBase)
      {
         return this;
      }
      return null;
   }
   protected override bool SupportsCommand(ICommand command)
   {
      return command is xamSliderBaseCommandBase;
   }
}

Add your custom slider to your page. Set the following properties:
- x:Name – MyCustomSlider
- Width – 300
- Height – 50
- MinValue – Blue
- Value – Purple
- MaxValue – Red
In XAML:
```
<colorSlider:ColorSlider
  x:Name="MyCustomSlider"
  Grid.Row="1"
  Width="300"
  Height="50"
  MinValue="Blue"
  Value="Purple"
  MaxValue="Red" />
```

Add a TextBox control to your page. Set the following properties.

x:Name – MyTextBox
Background – {Binding Value, ElementName=MyCustomSlider}

This is how the custom slider is bound to your TextBox control so as the color values change on the slider, it is reflected here.
Converter – {Static Resource MyConverter}

You need to use a converter to assign the value of the slider to the background of the TextBox control because it is of type is SolidBrushColor and the value is of type Color. The code for the converter is shown below

In XAML:

<TextBox
  Width="300" Height="100"
  Grid.Row="0" x:Name="MyTextBox"
  Background={StaticResource MyConverter} />