WPF/E Sample: Develop a simple pie report

Learning WPF/E has been around for a while. Some time ago, I used to think about how to use WPF/ETO draw a picture. It may be a good choice to draw a dynamic 2D report.

In this example, Ellipse is used to draw an Ellipse, and Ellipse. Clip is used to extract a slice. Similarly, the final display Effect

<Ellipse Height = "200" Width = "200" x: Name = "1" MouseLeave = "javascript: leaveReport"
MouseEnter = "javascript: enterReport"
Canvas. Left = "30" Canvas. Top = "30"

Stroke = "Black" StrokeThickness = "1" Fill = "SlateBlue">

<Ellipse. Clip>

<RectangleGeometry Rect = "0, 0,
100,100 "/>

</Ellipse. Clip>

<Ellipse. RenderTransform>

<ScaleTransform x: Name = "r1" CenterX = "100" CenterY = "100" ScaleX = "1" ScaleY = "1"/>

</Ellipse. RenderTransform>

</Ellipse>

MouseLeave: triggered when the mouse moves out of the object area

MouseEnter: triggers an event when the mouse moves into the object area.

Function
EnterReport (sender, args)

{

Var o = wpf. FindName ("story_r" + sender. Name );

 
O. Begin ();

}

Function
LeaveReport (sender, args)

{

Var o = wpf. FindName ("story_r" + sender. Name );

O. Stop ();

}

The ScaleTransform above aims to achieve the dynamic effect below. X (ScaleX) and Y (ScaleY) coordinates stretch or shorten (1 by default ).

For visual effects. We need to add some dynamic effects to the finished report. For example, if you move the mouse over the specified slice, the slice will become larger. Effect

To achieve this, we need to use BeginStoryboard to achieve our goal.

<BeginStoryboard>

<Storyboard>

<DoubleAnimation
X: Name = "story_r1_1" Duration = "0: 0: 1"
Storyboard. TargetName = "r1"
Storyboard. TargetProperty = "ScaleX" From = "1"
To = "1.05"/>

<DoubleAnimation
X: Name = "story_r1_2" Duration = "0: 0: 1"
Storyboard. TargetName = "r1"
Storyboard. TargetProperty = "ScaleY" From = "1"
To = "1.05"/>

</Storyboard>

</BeginStoryboard>

The preceding figure shows that when the Canvas. Loaded event is completed, the target ID: r1, attribute: ScaleX, and ScaleY are automatically extended by 0.05 times from the original length within 1 second.

The example is very simple. It mainly involves some basic WPF/E controls. I hope you can download the source code for learning. You are welcome to point out something wrong. Learn WPF/E together and make progress.

Source code: http://files.cnblogs.com/cnzc/WPFESample.rar

If you cannot see the effect on your local machine, please download WPF/E ctp for windows. for: http://go.microsoft.com/fwlink? Linkid = 77792 & clcid = 0x409

About situations where sometimes WPF/E is not supported under IIS: http://www.cnblogs.com/cnzc/archive/2007/01/26/631218.html

I have never written an article for a long time.