Custom Slider Windows 8.1 - xaml

Question

i need to create a custom slider, at the moment my slider looks exactly how i want, it looks like this (image from VisualStudio):
ant the xaml code is this:
<Grid x:Name="mainGrid">
<Grid Height="240" Width="300" Canvas.ZIndex="2">
<Grid.RenderTransform>
<RotateTransform x:Name="rotateTransform"
Angle="-125"
CenterX="150"
CenterY="150" />
</Grid.RenderTransform>
<Ellipse Height="54" Width="54"
x:Name="knob"
Fill="Red"
PointerMoved="Image_PointerMoved"
VerticalAlignment="Top"
Margin="0,-7,0,0"/>
</Grid>
<Path x:Name="path"
Data="M269.01,233.229 C303.532,181.303 304.261,118.855 269.097,67.0139 C207.933,-15.2077 92.8603,-16.8742 31.2108,66.0937 C-3.68835,121.514 -3.36331,179.271 30.8461,232.917 C51.2571,253.282 74.8965,230.573 61.3585,209.167 C38.2919,172.761 36.0008,129.688 62.1396,90.2093 C106.398,28.022 194.916,29.4803 237.509,90.1399 C262.554,127.345 263.613,170.209 237.647,209.792 C227.355,233.49 250.474,250.782 269.01,233.229 z"
Stretch="Fill"
Fill="Gray" />
</Grid>
and the C# code is this:
private void Image_PointerMoved(object sender, PointerRoutedEventArgs e)
{
//Canculate the current rotation angle and set the value.
var newPos = e.GetCurrentPoint(path);
double angle = GetAngleR(newPos.Position);
rotateTransform.Angle = angle;
}
public double GetAngleR(Point pos)
{
var xDiff = 150 - pos.X;
var yDiff = 150 - pos.Y;
var r = Math.Sqrt((xDiff * xDiff) + (yDiff * yDiff));
var radians = Math.Acos((yDiff) / r);
var angle = radians * (180 / Math.PI);
if(angle > 125)
{
angle = 125;
}
if(pos.X < 150)
{
angle = -angle;
}
return angle;
}
my problem is how i fill the path with a different color as i move the ellipse?
i need to achive somethig like this:
any suggestion?

Answer 1

Ok I have figured out how to do this slider, this isn't a perfect solution but it works and for me is enough.
I have created a GeometryGroup that contains some BezierSegment used to draw the arch path and then I have added a to the group a RectangleGeometry that is the size of the element.
With GeometryGroup in this case, the intersecting area of two shapes is not filled.
After that i have placed the right color behind the main path.
this is the code:
XAML
<Grid x:Name="mainGrid">
<Grid Height="240" Width="300" Canvas.ZIndex="2">
<Grid.RenderTransform>
<RotateTransform x:Name="rotateTransform"
Angle="-125"
CenterX="150"
CenterY="150" />
</Grid.RenderTransform>
<Image Height="54" Width="54" x:Name="knob"
Source="ms-appx:///Assets/ic_slider_credito.png"
PointerMoved="Image_PointerMoved"
VerticalAlignment="Top"
Margin="0,-5,0,0" />
</Grid>
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Left"
Fill="Gray"
Width="300"
Height="240" />
<Path x:Name="fillPath"
Height="240"
Width="300"
UseLayoutRounding="False"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Fill="Orange" />
<Path x:Name="path"
Height="240"
Width="300"
UseLayoutRounding="False"
Stretch="Fill"
Fill="White" />
</Grid>
C#
public SliderInvioCredito()
{
this.InitializeComponent();
DrawPath();
}
private void Image_PointerMoved(object sender, PointerRoutedEventArgs e)
{
var newPos = e.GetCurrentPoint(path);
double angle = GetAngleR(newPos.Position);
rotateTransform.Angle = angle;
}
public double GetAngleR(Point pos)
{
var xDiff = 150 - pos.X;
var yDiff = 150 - pos.Y;
var r = Math.Sqrt((xDiff * xDiff) + (yDiff * yDiff));
var radians = Math.Acos((yDiff) / r);
var angle = radians * (180 / Math.PI);
if (angle > 125)
{
angle = 125;
}
if (pos.X < 150)
{
angle = -angle;
}
DrawFillPath(pos.X, pos.Y, angle);
return angle;
}
private void DrawFillPath(double x, double y, double angle)
{
var start = new Point(150, 120);
var pth = new PathFigure();
pth.StartPoint = start;
var ls1 = new LineSegment();
ls1.Point = start;
pth.Segments.Add(ls1);
var ls8 = new LineSegment();
ls8.Point = new Point(150, 240);
pth.Segments.Add(ls8);
var ls2 = new LineSegment();
ls2.Point = new Point(0, 240);
pth.Segments.Add(ls2);
if (angle > -45)
{
var ls5 = new LineSegment();
ls5.Point = new Point(0, 0);
pth.Segments.Add(ls5);
if (angle > -30)
{
var ls6 = new LineSegment();
ls6.Point = new Point(x, 0);
pth.Segments.Add(ls6);
}
}
else
{
var ls3 = new LineSegment();
ls3.Point = new Point(0, y);
pth.Segments.Add(ls3);
}
if (angle > 45)
{
var ls7 = new LineSegment();
ls7.Point = new Point(300, 0);
pth.Segments.Add(ls7);
var ls9 = new LineSegment();
ls9.Point = new Point(300, y);
pth.Segments.Add(ls9);
}
var ls4 = new LineSegment();
ls4.Point = new Point(x, y);
pth.Segments.Add(ls4);
var pthCollection = new PathFigureCollection();
pthCollection.Add(pth);
var pthGeometry = new PathGeometry();
pthGeometry.Figures = pthCollection;
fillPath.Data = pthGeometry;
}
private void DrawPath()
{
var cc1 = new BezierSegment();
cc1.Point1 = new Point(303.532, 181.303);
cc1.Point2 = new Point(304.261, 118.855);
cc1.Point3 = new Point(269.097, 67.0139);
var cc2 = new BezierSegment();
cc2.Point1 = new Point(207.933, -15.2077);
cc2.Point2 = new Point(92.8603, -16.8742);
cc2.Point3 = new Point(31.2108, 66.0937);
var cc3 = new BezierSegment();
cc3.Point1 = new Point(-3.68835, 121.514);
cc3.Point2 = new Point(-3.36331, 179.271);
cc3.Point3 = new Point(30.8461, 232.917);
var cc4 = new BezierSegment();
cc4.Point1 = new Point(51.2571, 253.282);
cc4.Point2 = new Point(74.8965, 230.573);
cc4.Point3 = new Point(61.3585, 209.167);
var cc5 = new BezierSegment();
cc5.Point1 = new Point(38.2919, 172.761);
cc5.Point2 = new Point(36.0008, 129.688);
cc5.Point3 = new Point(62.1396, 90.2093);
var cc6 = new BezierSegment();
cc6.Point1 = new Point(106.398, 28.022);
cc6.Point2 = new Point(194.916, 29.4803);
cc6.Point3 = new Point(237.509, 90.1399);
var cc7 = new BezierSegment();
cc7.Point1 = new Point(262.554, 127.345);
cc7.Point2 = new Point(263.613, 170.209);
cc7.Point3 = new Point(237.647, 209.792);
var cc8 = new BezierSegment();
cc8.Point1 = new Point(227.355, 233.49);
cc8.Point2 = new Point(250.474, 250.782);
cc8.Point3 = new Point(269.01, 233.229);
var pthFigure = new PathFigure();
pthFigure.StartPoint = new Point(269.01, 233.229);
var psc = new PathSegmentCollection();
psc.Add(cc1);
psc.Add(cc2);
psc.Add(cc3);
psc.Add(cc4);
psc.Add(cc5);
psc.Add(cc6);
psc.Add(cc7);
psc.Add(cc8);
pthFigure.Segments = psc;
var pthFigureCollection = new PathFigureCollection();
pthFigureCollection.Add(pthFigure);
var pthGeometry = new PathGeometry();
pthGeometry.Figures = pthFigureCollection;
var rect = new RectangleGeometry();
rect.Rect = new Rect(0, 0, 300, 240);
var gg = new GeometryGroup();
gg.Children.Add(pthGeometry);
gg.Children.Add(rect);
path.Data = gg;
}