Circular Graphic

How-to Discussions
1

Hi, Is posible to do a graphic like this?

file

And animate it?

Thanks!

2

Hi!

An easy appproach would be to do something like

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

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.

3

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?

Thanks!

4

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

5

An example that will work in the next release.

Video

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>
        <Panel Width="200" Height="200" Alignment="Center">
            <Panel ux:Name="Arrow">                <Image File="arrowright.png" Alignment="TopCenter"/>
            </Panel>

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

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

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.

6

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

7

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…

8

My Mistake! Work Perfect! :slight_smile: