Vista - Problems with ArcSegment

I am hoping someone out there has had more success with an ArcSegment than I
have and can help me out. What I am trying to do is draw a ring shape, and I
would like it to start at the top center of a box, and go all the way around
back to the top (for now, after I can draw it correctly, I am going to
animate it for a timer so that the number of degrees drawn shrinks as the
timer counts down). If I only draw the ring 3/4 of the way around, it works,
but when I try to complete the ring back to the top, and use 360 for the
RotationAngle, it disappears.

Also, I would like to use a linear gradient that goes from red to green so
that as the timer ticks down, they get into a "Red Zone", but the gradient
doesn't seem to get used from beginning to end, rather, it's like it's drawn
on a background behind the shape, and then just pulled through, if that makes
sense. So if anyone has any ideas about getting a circular gradient, I would
appreciate it.

Thanks!

Ian Foutz

I believe that we take the angle mod 360, so a 360 degree angle is a 0
degree angle. Try 359.9?

As for the Gradient, we do not have "stroke along path" in this version of
WPF, which would likely produce the effect you're looking for. Rather, a
Pen + a Geomety produces a new geometric area, which is then filled by the
Pen's Brush as it would have been had the widened geometry be directly
filled by a Brush. I can't think of a straightforward workaround for you -
minor design changes are likely needed. Perhaps have the circle composed of
multiple segments each filled with a solid color ranging from Green to Red
(not trying to simulate a gradient, just a different asthetic, where each,
say, 15 degrees, is a different solid block), or perhaps have the color of
the circle itself animate from Green to Red over time?

-Adam Smith [MS]

"Ian Foutz" <Ian Foutz@discussions.microsoft.com> wrote in message
news:40DB8451-DF95-4A07-AEEB-7565E20542ED@microsoft.com...
>I am hoping someone out there has had more success with an ArcSegment than
>I
> have and can help me out. What I am trying to do is draw a ring shape,
> and I
> would like it to start at the top center of a box, and go all the way
> around
> back to the top (for now, after I can draw it correctly, I am going to
> animate it for a timer so that the number of degrees drawn shrinks as the
> timer counts down). If I only draw the ring 3/4 of the way around, it
> works,
> but when I try to complete the ring back to the top, and use 360 for the
> RotationAngle, it disappears.
>
> Also, I would like to use a linear gradient that goes from red to green so
> that as the timer ticks down, they get into a "Red Zone", but the gradient
> doesn't seem to get used from beginning to end, rather, it's like it's
> drawn
> on a background behind the shape, and then just pulled through, if that
> makes
> sense. So if anyone has any ideas about getting a circular gradient, I
> would
> appreciate it.
>
> Thanks!
>
> Ian Foutz
>

On the color thing, I am now just changing the color of the whole ring. Good
enough for my purposes for now, but if you could get an ability to define a
circular color gradient added to the feature wishlist for a next version, I'd
really appreciate it.

I still can't get it to work as one ArcSegment. I tried 359.9, 359, and
even 0, none of them seem to work. What I have done that mostly works is
break it down into 2 180 degree arcsegments. The circle looks great, and the
first half of the animation does too. The one weird thing I get now is in
the second half of the animation, I get this weird flickering line as the
first arc shrinks, and the second arc should be nothing behind it. Here's my
XAML so you can see what I'm talking about.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>

<Page.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="TestButton">
<EventTrigger.Actions>
<BeginStoryboard Name="TimerCountdownStoryboard">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="CountdownRingColor" Storyboard.TargetProperty="Color"
Duration="0:0:20" FillBehavior="HoldEnd">
<LinearColorKeyFrame Value="Green" KeyTime="0:0:0"/>
<LinearColorKeyFrame Value="Yellow" KeyTime="0:0:10"/>
<LinearColorKeyFrame Value="Red" KeyTime="0:0:20"/>
</ColorAnimationUsingKeyFrames>
<PointAnimationUsingPath Storyboard.TargetName="CountdownRingArc2"
Storyboard.TargetProperty="Point" Duration="0:0:30" FillBehavior="HoldEnd">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="100, 4">
<ArcSegment IsLargeArc="False" RotationAngle="180" Size="96, 96"
Point="100, 196" SweepDirection="Counterclockwise" />
<ArcSegment IsLargeArc="False" RotationAngle="180" Size="96, 96"
Point="100, 4" SweepDirection="Counterclockwise" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<PointAnimationUsingPath BeginTime="0:0:15"
Storyboard.TargetName="CountdownRingArc1" Storyboard.TargetProperty="Point"
Duration="0:0:15" FillBehavior="HoldEnd">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="100, 196">
<ArcSegment IsLargeArc="False" RotationAngle="180" Size="96, 96"
Point="100, 4" SweepDirection="Counterclockwise" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<DoubleAnimation Storyboard.TargetName="CountdownRingArc2"
Storyboard.TargetProperty="RotationAngle" Duration="0:0:15"
FillBehavior="HoldEnd" From="180" To="0" />
<DoubleAnimation BeginTime="0:0:15"
Storyboard.TargetName="CountdownRingArc1"
Storyboard.TargetProperty="RotationAngle" Duration="0:0:15"
FillBehavior="HoldEnd" From="180" To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click" SourceName="TestButton2">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="TimerCountdownStoryboard"/>
</EventTrigger.Actions>
</EventTrigger>
</Page.Triggers>

<StackPanel Margin="4" Orientation="Vertical">
<Border Margin="4" Height="202" Width="202" BorderBrush="Black"
BorderThickness="2" CornerRadius="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Grid.Background>
<LinearGradientBrush StartPoint="0, 0" EndPoint="1, 1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="Blue" />
<GradientStop Offset="1.0" Color="Purple" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>

<Path Name="CountdownRing" StrokeThickness="8">
<Path.Stroke>
<SolidColorBrush Color="Green" x:Name="CountdownRingColor" />
</Path.Stroke>
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="100, 4">
<ArcSegment x:Name="CountdownRingArc1" IsLargeArc="False"
RotationAngle="180" Size="96, 96" Point="100, 196" SweepDirection="Clockwise"
/>
<ArcSegment x:Name="CountdownRingArc2" IsLargeArc="False"
RotationAngle="180" Size="96, 96" Point="100, 4" SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
<TextBlock Grid.Column="0" Grid.Row="0" Name="CountdownText"
HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="WrapWithOverflow">30</TextBlock>
</Grid>
</Border>
<Button HorizontalAlignment="Center" Name="TestButton">Click to start
timer</Button>
<Button HorizontalAlignment="Center" Name="TestButton2">Click to stop
timer</Button>
</StackPanel>
</Page>


Any ideas?

Thanks,
Ian Foutz




"Adam Smith [MS]" wrote:

> I believe that we take the angle mod 360, so a 360 degree angle is a 0
> degree angle. Try 359.9?
>
> As for the Gradient, we do not have "stroke along path" in this version of
> WPF, which would likely produce the effect you're looking for. Rather, a
> Pen + a Geomety produces a new geometric area, which is then filled by the
> Pen's Brush as it would have been had the widened geometry be directly
> filled by a Brush. I can't think of a straightforward workaround for you -
> minor design changes are likely needed. Perhaps have the circle composed of
> multiple segments each filled with a solid color ranging from Green to Red
> (not trying to simulate a gradient, just a different asthetic, where each,
> say, 15 degrees, is a different solid block), or perhaps have the color of
> the circle itself animate from Green to Red over time?
>
> -Adam Smith [MS]
>
> "Ian Foutz" <Ian Foutz@discussions.microsoft.com> wrote in message
> news:40DB8451-DF95-4A07-AEEB-7565E20542ED@microsoft.com...
> >I am hoping someone out there has had more success with an ArcSegment than
> >I
> > have and can help me out. What I am trying to do is draw a ring shape,
> > and I
> > would like it to start at the top center of a box, and go all the way
> > around
> > back to the top (for now, after I can draw it correctly, I am going to
> > animate it for a timer so that the number of degrees drawn shrinks as the
> > timer counts down). If I only draw the ring 3/4 of the way around, it
> > works,
> > but when I try to complete the ring back to the top, and use 360 for the
> > RotationAngle, it disappears.
> >
> > Also, I would like to use a linear gradient that goes from red to green so
> > that as the timer ticks down, they get into a "Red Zone", but the gradient
> > doesn't seem to get used from beginning to end, rather, it's like it's
> > drawn
> > on a background behind the shape, and then just pulled through, if that
> > makes
> > sense. So if anyone has any ideas about getting a circular gradient, I
> > would
> > appreciate it.
> >
> > Thanks!
> >
> > Ian Foutz
> >
>
>
>