Geek Answers Handbook

Ellipse Drawing WPF Animation

I am creating a control that is an area of ​​a rectangle, and will draw an ellipse in the area of ​​the rectangle when a trigger occurs. This control will be able to place other controls, such as text fields, buttons, etc. Therefore, a circle will be drawn around them when triggered. I want the circle to be drawn as an animation, as if you were rotating the internal controls with a pen.

My question is the best way to achieve this. I did some research, and I could use WPF animation, or I could use GDI + to complete tasks. I'm new to WPF animation, so I'm asking a question.

+5
source share
1 answer

WPF animation makes this very easy. Here is the basic technique:

  • Create the visual appearance of the ellipse using any WPF features that you like (shapes, paths, geometry, brushes, drawings, images, etc.). It can be a simple ellipse or a fancy drawing created by your graphic designer or something in between.

  • Apply an OpacityMask consisting of a wide elliptical dashed line with a dash with zero length. Since the dash is zero length, the entire ellipse in the normal style will be invisible.

  • . ( ), . 0 1, , , , , .

ControlTemplate:

<ControlTemplate TargetType="MyCustomControl">
  <Grid>

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}">
      <Rectangle.OpacityMask>
        <VisualBrush>
          <VisualBrush.Visual>
            <Ellipse
              x:Name="opacityEllipse"
              StrokeDashArray="0 10"
              Stroke="Black" StrokeThickness="0.5"
              Width="1" Height"1" />
          </VisualBrush.Visual>
        </VisualBrush>
      </Rectangle.OpacityMask>
    </Rectangle>

    <ContentPresenter />   <!-- This presents the actual content -->

  </Grid>
</ControlTemplate>

WPF , - , , .

, , WPF. , " " , ( ) - , :

  • , , , , .
  • , , , , , , .
  • Expression Design ( Adobe Illustrator), XAML.
  • ( , ).
  • Expression Blend

:

<VisualBrush x:Key="EllipseVisualAppearance">
  <VisualBrush.Visual>
    <Ellipse StrokeThickness="0.1" Stroke="Blue" />
  </VisualBrush.Visual>
</VisualBrush>

, , , , . 0 360 DoubleAnimation , :

 <DoubleAnimation
   StoryBoard.TargetName="opacityEllipse"
   StoryBoard.TargetProperty="StrokeDashArray[0]"
   From="0" To="3.1416" Duration="0:0:0.5" />

3.1416 pi, 1. , .

StackOverflow , , . , . PathGeometry ArcSegment. , , , , -, .

+7

More articles:


All Articles