Fatal编程技术网
  • xaml/
  • Xaml 自定义滑块Windows 8.1

Xaml 自定义滑块Windows 8.1

xaml windows-runtime windows-store-apps

Xaml 自定义滑块Windows 8.1,xaml,windows-runtime,windows-store-apps,winrt-xaml,Xaml,Windows Runtime,Windows Store Apps,Winrt Xaml,我需要创建一个自定义滑块，目前我的滑块看起来正是我想要的，它看起来像这样（来自VisualStudio的图像）： ant xaml代码如下： <Grid x:Name="mainGrid"> <Grid Height="240" Width="300" Canvas.ZIndex="2"> <Grid.RenderTransform> <RotateTransform x:Name="rotateTran

我需要创建一个自定义滑块，目前我的滑块看起来正是我想要的，它看起来像这样（来自VisualStudio的图像）：

ant 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>

        <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>

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;
    }
C代码是这样的：

<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>

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;
    }

private void Image\u PointerMoved（对象发送方，PointerRoutedEventArgs e）
{
//取消当前旋转角度并设置该值。
var newPos=e.GetCurrentPoint（路径）；
双角度=获取角度（新位置位置）；
旋转变换。角度=角度；
}
公共双人钓鱼机（Point pos）
{
变量xDiff=150-位置X；
var yDiff=150-位置Y；
var r=Math.Sqrt（（xDiff*xDiff）+（yDiff*yDiff））；
var弧度=数学Acos（（yDiff）/r）；
可变角度=弧度*（180/数学π）；
如果（角度>125）
{
角度=125；
}
如果（位置X<150）
{
角度=-角度；
}
返回角；
}
我的问题是如何在移动椭圆时用不同的颜色填充路径

我需要实现这样的目标：

有什么建议吗？

好的，我已经想出了如何使用这个滑块，这不是一个完美的解决方案，但它很有效，对我来说已经足够了

我创建了一个
GeometryGroup
，其中包含一些用于绘制拱门路径的
BezierSegment
，然后我向a组
RectangleGeometry
中添加了一个，即元素的大小

使用
GeometryGroup
在这种情况下，两个形状的相交区域不填充

之后，我将正确的颜色放置在主路径后面

代码如下：

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 sliderivinoviedito（）
{
this.InitializeComponent（）；
绘图路径（）；
}
私有无效映像_PointerMoved（对象发送方，PointerRoutedEventArgs e）
{
var newPos=e.GetCurrentPoint（路径）；
双角度=获取角度（新位置位置）；
旋转变换。角度=角度；
}
公共双人钓鱼机（Point pos）
{
变量xDiff=150-位置X；
var yDiff=150-位置Y；
var r=Math.Sqrt（（xDiff*xDiff）+（yDiff*yDiff））；
var弧度=数学Acos（（yDiff）/r）；
可变角度=弧度*（180/数学π）；
如果（角度>125）
{
角度=125；
}
如果（位置X<150）
{
角度=-角度；
}
DrawFillPath（位置X、位置Y、角度）；
返回角；
}
专用空心DrawFillPath（双x、双y、双角度）
{
var开始=新点（150、120）；
var pth=新路径图（）；
pth.StartPoint=开始；
var ls1=新线段（）；
ls1.点=开始；
pth.段添加（ls1）；
var ls8=新线段（）；
ls8.点=新点（150240）；
pth.段添加（ls8）；
var ls2=新线段（）；
ls2.点=新点（0240）；
pth.段添加（ls2）；
如果（角度>-45）
{
var ls5=新线段（）；
ls5.点=新点（0,0）；
pth.段添加（ls5）；
如果（角度>-30）
{
var ls6=新线段（）；
ls6.点=新点（x，0）；
pth.段添加（ls6）；
}
}
其他的
{
var ls3=新线段（）；
ls3.点=新点（0，y）；
pth.段添加（ls3）；
}
如果（角度>45）
{
var ls7=新线段（）；
ls7.点=新点（300,0）；
pth.段添加（ls7）；
var ls9=新线段（）；
ls9.点=新点（300，y）；
pth.段添加（ls9）；
}
var ls4=新线段（）；
ls4.点=新点（x，y）；
pth.段添加（ls4）；
var pthCollection=new PathFigureCollection（）；
pth收集。添加（pth）；
var pthGeometry=新路径几何体（）；
pthGeometry.图=pthCollection；
fillPath.Data=pthGeometry；
}
私有void DrawPath（）
{
var cc1=新的BezierSegment（）；
cc1.Point1=新点（303.532181.303）；
cc1.Point2=新点（304.261118.855）；
cc1.Point3=新点（269.097,67.0139）；
var cc2=新的BezierSegment（）；
cc2.Point1=新点（207.933，-15.2077）；
cc2.Point2=新点（92.8603，-16.8742）；
cc2.Point3=新点（31.2108,66.0937）；
var cc3=新的BezierSegment（）；
cc3.Point1=新点（-3.68835121.514）；
cc3.Point2=新点（-3.36331179.271）；
cc3.Point3=新点（30.8461232.917）；
var cc4=新的BezierSegment（）；
cc4.Point1=新点（51.2571253.282）；
cc4.Point2=新点（74.8965230.573）；
cc4.Point3=新点（61.3585209.167）；
var cc5=新的BezierSegment（）；
cc5.Point1=新点（38.2919172.761）；
cc5.Point2=新点（36.0008129.688）；
cc5.Point3=新点（62.1396,90.2093）；
var cc6=新的BezierSegment（）；
cc6.Point1=新点（106.398,28.022）；
cc6.Point2=新点（194.916,29.4803）；
cc6.Point3=新点（237.509,90.1399）；
var cc7=新的BezierSegment（）；
cc7.Point1=新点（262.554127.345）；
cc7.Point2=新点（263.613170.209）；
cc7.Point3=新点（237.6472009.792）；
var cc8=新的BezierSegment（）；
cc8.Point1=新点（227.355233.49）；
cc8.Point2=新点（250.474250.782）；
cc8.Point3=新点（269.01233.229）；
var pthFigure=新路径图（）；
pthFigure.StartPoint=新点（269.01233.229）；
var psc=新的PathSegmentCollection（）；
psc.Add（抄送）