Effect chart
Xaml
1.shopshow_page
<navigation:page x:class= "Silverlightapplication6.shopshow"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
Mc:ignorable= "D"
xmlns:navigation= "Clr-namespace:system.windows.controls;assembly=system.windows.controls.navigation"
D:designwidth= "d:designheight=" "600"
title= "Shopshow Page" >
<grid x:name= "LayoutRoot" >
<Grid.Background>
<imagebrush imagesource= ". /images/win7-6.jpg "stretch=" "Fill" >
</ImageBrush>
</Grid.Background>
<image x:name= "Shower" width= "180" height= "180" stretch= "Fill" visibility= "collapsed" >
<Image.Effect>
<dropshadoweffect color= "White" blurradius= "ten" opacity= "0.8" shadowdepth= "0" >
</DropShadowEffect>
</Image.Effect>
</Image>
<canvas x:name= "Movecanvas" ></Canvas>
<stackpanel orientation= "Horizontal" margin= "300,500,0,0" >
<button width= "height=" content= "Play" margin= "ten" x:name= "Btn_start" click= "Btn_start_click" ></ Button>
<button width= "height=" content= "Stop" margin= "ten" x:name= "Btn_stop" click= "Btn_stop_click" ></button >
</StackPanel>
</Grid>
</navigation:Page>
2 Shopitem
<usercontrol x:class= "Silverlightapplication6.shopitem"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:ignorable= "D" >
<grid x:name= "LayoutRoot" >
<image x:name= "obj" width= "135" height= "135" stretch= "None" >
</Image>
</Grid>
</UserControl>
C # code
Class Shopshow
Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Net;
Using System.Windows;
Using System.Windows.Controls;
Using System.Windows.Documents;
Using System.Windows.Input;
Using System.Windows.Media;
Using System.Windows.Media.Animation;
Using System.Windows.Shapes;
Using System.Windows.Navigation;
Using System.Windows.Threading;
Using System.Windows.Media.Imaging;
Namespace SilverlightApplication6
{
public partial class Shopshow:P age
{
Private DispatcherTimer timer;
Private List<shopitem> objlist = new list<shopitem> ();
Private double count = number of 14;//records
Private double degree = 0;//cheap variable
Private double width = 300; Oval Long radius
Private double height = 60; Ellipse short radius
Private double CenterX = 400;//Center point x coordinate
Private double centery = 300;//Center point y-coordinate
Private double itemwidth = 160; Object width
Private double itemheight = 80; Object height
Private double currentopacity = 0;//Transparency
Public Shopshow ()
{
InitializeComponent ();
This. Loaded + = new Routedeventhandler (shopshow_loaded);
}
void Shopshow_loaded (object sender, RoutedEventArgs e)
{
Timer = new DispatcherTimer ();
for (var i = 1; I <count; i++)
{
Instantiating a user control
Shopitem item = new Shopitem ();
Image image = Item.obj;
Load album pictures
Uri uri = new Uri (string. Format (".. /images/album{0}.png ", i), urikind.relative);
BitmapImage bitmap = new BitmapImage (URI);
Image. Source = bitmap;
Bound Control Events
Image. MouseLeftButtonDown + = new Mousebuttoneventhandler (Image_mouseleftbuttondown);
Image. MouseEnter + = new MouseEventHandler (image_mouseenter);
Image. MouseLeave + = new MouseEventHandler (image_mouseleave);
Objlist.add (item);
MOVECANVAS.CHILDREN.ADD (item);
}
Timer. Tick + = new EventHandler (Timer_tick);
TimeSpan sp = new TimeSpan (0,0,0,0,20);
Timer. Interval = SP;
Timer. Start ();
}
The method of producing elliptical motion effect
public void Startmove ()
{
for (var i = 0; i < Objlist.count; i++)
{
Calculates an average value based on the total number of controls and the circumference
var tmp= (degree+ (360/count) *i)%360;
TMP = TMP * math.pi/180;//update x
var posx = width * Math.sin (TMP);//Update X
var posy = height * MATH.COS (TMP);//Update Y
Shopitem obj = objlist[i];
Calculate scaling based on width and height
Double scale = (2*height-posy)/(3*HEIGHT+ITEMHEIGHT/2);
Canvas.setleft (Obj,centerx + posx-(ITEMWIDTH/2) * scale);
Canvas.settop (obj, Centery-posy-(ITEMHEIGHT/2) * scale);
Canvas.setzindex (Obj,int. Parse (Math.ceiling (Count*scale). ToString ()));
ScaleTransform st = new ScaleTransform () {CenterX = scale, ScaleY = scale};
Obj. RenderTransform = st;
Obj. Opacity = scale;
}
degree-= 0.3;
}
void Timer_tick (object sender, EventArgs e)
{
Startmove ();
}
void Image_mouseleave (object sender, MouseEventArgs e)
{
Image img = sender as image;
Img. Opacity = currentopacity;
Timer. Start ();
}
void Image_mouseenter (object sender, MouseEventArgs e)
{
Timer. Stop ();
Image img = sender as image;
Currentopacity = img. Opacity;
Img. Opacity = 1;
}
void Image_mouseleftbuttondown (object sender, MouseButtonEventArgs e)
{
Image img = sender as image;
Shower. Visibility = visibility.visible;
Shower. Source = img. Source;
}
private void Btn_start_click (object sender, RoutedEventArgs e)
{
Timer. Start ();
}
private void Btn_stop_click (object sender, RoutedEventArgs e)
{
Timer. Stop ();
}
}
}