Circular Graphic

Hi, Is posible to do a graphic like this?


And animate it?



An easy appproach would be to do something like

    <Stroke Width="8">
            <GradientStop Offset="0" Color="#f0f" />
            <GradientStop Offset="1" Color="#f00" />

And then animate StartAngle and EndAngle on the circle. Wouldn’t give you the nice rounded endpoints though, for that you would have to do something a bit more advanced, using Path probably.

Great! But how I use StartAngle and EndAngle? In the Circle?

<Circle StartAngle="0" EndAngle="0" >

Like this I get a error…

And how can I change the direction of the gradient?


StartAngle and EndAngle is not in the current release. They will in the next one :slight_smile:

An example that will work in the next release.


I’m using an image to fill the stroke. This is a conical gradient (which makes it linear in the direction of the stroke).

<App Theme="Basic">
        <Panel Width="200" Height="200" Alignment="Center">
            <Panel ux:Name="Arrow">                <Image File="arrowright.png" Alignment="TopCenter"/>

            <Circle StartAngleDegrees="0" LengthAngleDegrees="0" ux:Name="TheCircle">
                <Stroke Width="20">
                    <ImageFill File="gradient.jpg"/>

        <Slider Alignment="BottomCenter" Width="200">
                <Change Target="TheCircle.LengthAngleDegrees" Value="359.99"/>
                <Rotate Target="Arrow" Degrees="360"/>

Note I used 359.99 as the target angle since I just noticed we have an issue about using 360 now. I’ll get that fixed soon.

Wow! Great! Thanks, I look forward to the next release!

This Example is working in this release (v0.5.3166)? I try to do the same but with a ScrollingAnimation. But the Circle never showup…

My Mistake! Work Perfect! :slight_smile: