MainPage.xaml:
Code
<UserControl x:Class="ZoomByAnimation.MainPage"
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" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Black">
<Grid.RowDefinitions >
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Canvas x:Name="canvasContainer" Grid.Row="1" Grid.Column="1">
</Canvas>
<Button x:Name="addpicture" Grid.Row="1" Grid.Column="0" Click="addpicture_Click" Background="Black">
<Button.Content>
<Canvas x:Name="addpiccanvas" Background="Black">
<Ellipse x:Name="de1" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-137" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="d1tb" Text="d" FontSize="24" Canvas.Top="-140" Canvas.Left="-9" Foreground="Black" Height="6" Width="0" />
<Ellipse x:Name="ae" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-167" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="atb" Text="A" FontSize="26" Canvas.Top="-172" Canvas.Left="-9" Foreground="Black" Height="5" Width="0"/>
<Ellipse x:Name="de2" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-107" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="d2tb" Text="d" FontSize="24" Canvas.Top="-109" Canvas.Left="-7" Height="2" Width="11"/>
<Ellipse x:Name="ce" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-17" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="ctb" Text="c" FontSize="24" Canvas.Top="-22" Canvas.Left="-7" Height="5"/>
<Ellipse x:Name="pe" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-77" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="ptb" Text="P" FontSize="26" Canvas.Top="-81" Canvas.Left="-7" Height="4" Width="22"/>
<Ellipse x:Name="ie" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-47" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="itb" Text="i" FontSize="24" Canvas.Top="-49" Canvas.Left="-3" Height="2" Width="9"/>
</Canvas>
</Button.Content>
</Button>
<Button x:Name="delpicture" Grid.Row="1" Grid.Column="2" Click="delpicture_Click">
<Button.Content >
<Canvas x:Name="delCanvas" Background="Black">
<Ellipse x:Name="de" Height="30" Width="30" Canvas.Top="-142" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee1" Height="30" Width="30" Canvas.Top="-112" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="le" Height="30" Width="30" Canvas.Top="-82" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee2" Height="30" Width="30" Canvas.Top="-52" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave" />
<Ellipse x:Name="te1" Height="30" Width="30" Canvas.Top="-22" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee3" Height="30" Width="30" Canvas.Top="8" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="dtb" Text="D" FontSize="24" Canvas.Left="-7" Canvas.Top="-144" Height="2" Width="14"/>
<TextBlock x:Name="e1tb" Text="e" FontSize="24" Canvas.Left="-8" Canvas.Top="-117" Height="5" Width="15"/>
<TextBlock x:Name="ltb" Text="l" FontSize="24" Canvas.Left="-4" Canvas.Top="-84" Height="2" Width="9"/>
<TextBlock x:Name="e2tb" Text="e" FontSize="24" Canvas.Left="-8" Canvas.Top="-56" Height="4" Width="15"/>
<TextBlock x:Name="ttb" Text="t" FontSize="24" Canvas.Left="-4" Canvas.Top="-24" RenderTransformOrigin="0.241,0.54" Height="2" Width="11"/>
<TextBlock x:Name="e3tb" Text="e" FontSize="24" Canvas.Left="-7" Canvas.Top="4" Height="4" Width="14"/>
</Canvas>
</Button.Content>
</Button>
<Button x:Name="top" Grid.Row="0" Grid.ColumnSpan="3"/>
<Button x:Name="bottom" Grid.Row="2" Grid.ColumnSpan="3" Click="bottom_Click">
<Button.Content>
<TextBlock x:Name="infor" Opacity="1" Text="Silverlight图片浏览工具 copyright:QijieXue" FontFamily="Comic Sans MS" FontSize="24" Grid.Row="2" Grid.Column="1"/>
</Button.Content>
</Button>
<Canvas x:Name="InfoCanvas" Visibility="Collapsed" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Vertical" Canvas.Left="250" Canvas.Top="250">
<StackPanel.Projection>
<PlaneProjection RotationY="-35" CenterOfRotationX="0.5" CenterOfRotationY="0.5" CenterOfRotationZ="0"/>
</StackPanel.Projection>
<TextBlock x:Name="naminfo" Foreground="White" Text="Cooper is a software tester in hisoft" FontSize="20"/>
<TextBlock x:Name="interestinfo" Foreground="White" Text="He is interested in SharePoint and Silverlight" FontSize="20"/>
<TextBlock x:Name="mailinfo" Foreground="White" Text="Mail: v-qixe@microsoft.com" FontSize="20"/>
<TextBlock x:Name="msninfo" Foreground="White" Text="MSN: myheartgoon@hotmail.com" FontSize="20"/>
<TextBlock x:Name="bloginfo" Foreground="White" Text="Blog: http://www.cnblogs.com/qixue" FontSize="20"/>
<Button x:Name="Ok" Content="OK" FontSize="24" Foreground="Black" Click="Ok_Click"/>
</StackPanel>
</Canvas>
</Grid>
</UserControl>
<UserControl x:Class="ZoomByAnimation.MainPage"
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" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Background="Black">
<Grid.RowDefinitions >
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Canvas x:Name="canvasContainer" Grid.Row="1" Grid.Column="1">
</Canvas>
<Button x:Name="addpicture" Grid.Row="1" Grid.Column="0" Click="addpicture_Click" Background="Black">
<Button.Content>
<Canvas x:Name="addpiccanvas" Background="Black">
<Ellipse x:Name="de1" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-137" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="d1tb" Text="d" FontSize="24" Canvas.Top="-140" Canvas.Left="-9" Foreground="Black" Height="6" Width="0" />
<Ellipse x:Name="ae" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-167" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="atb" Text="A" FontSize="26" Canvas.Top="-172" Canvas.Left="-9" Foreground="Black" Height="5" Width="0"/>
<Ellipse x:Name="de2" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-107" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="d2tb" Text="d" FontSize="24" Canvas.Top="-109" Canvas.Left="-7" Height="2" Width="11"/>
<Ellipse x:Name="ce" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-17" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="ctb" Text="c" FontSize="24" Canvas.Top="-22" Canvas.Left="-7" Height="5"/>
<Ellipse x:Name="pe" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-77" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="ptb" Text="P" FontSize="26" Canvas.Top="-81" Canvas.Left="-7" Height="4" Width="22"/>
<Ellipse x:Name="ie" Fill="Red" Height="30" Width="30" Canvas.Left="-15" Canvas.Top="-47" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="itb" Text="i" FontSize="24" Canvas.Top="-49" Canvas.Left="-3" Height="2" Width="9"/>
</Canvas>
</Button.Content>
</Button>
<Button x:Name="delpicture" Grid.Row="1" Grid.Column="2" Click="delpicture_Click">
<Button.Content >
<Canvas x:Name="delCanvas" Background="Black">
<Ellipse x:Name="de" Height="30" Width="30" Canvas.Top="-142" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee1" Height="30" Width="30" Canvas.Top="-112" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="le" Height="30" Width="30" Canvas.Top="-82" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee2" Height="30" Width="30" Canvas.Top="-52" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave" />
<Ellipse x:Name="te1" Height="30" Width="30" Canvas.Top="-22" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<Ellipse x:Name="ee3" Height="30" Width="30" Canvas.Top="8" Canvas.Left="-15" Fill="Red" MouseEnter="de1_MouseEnter" MouseLeave="de1_MouseLeave"/>
<TextBlock x:Name="dtb" Text="D" FontSize="24" Canvas.Left="-7" Canvas.Top="-144" Height="2" Width="14"/>
<TextBlock x:Name="e1tb" Text="e" FontSize="24" Canvas.Left="-8" Canvas.Top="-117" Height="5" Width="15"/>
<TextBlock x:Name="ltb" Text="l" FontSize="24" Canvas.Left="-4" Canvas.Top="-84" Height="2" Width="9"/>
<TextBlock x:Name="e2tb" Text="e" FontSize="24" Canvas.Left="-8" Canvas.Top="-56" Height="4" Width="15"/>
<TextBlock x:Name="ttb" Text="t" FontSize="24" Canvas.Left="-4" Canvas.Top="-24" RenderTransformOrigin="0.241,0.54" Height="2" Width="11"/>
<TextBlock x:Name="e3tb" Text="e" FontSize="24" Canvas.Left="-7" Canvas.Top="4" Height="4" Width="14"/>
</Canvas>
</Button.Content>
</Button>
<Button x:Name="top" Grid.Row="0" Grid.ColumnSpan="3"/>
<Button x:Name="bottom" Grid.Row="2" Grid.ColumnSpan="3" Click="bottom_Click">
<Button.Content>
<TextBlock x:Name="infor" Opacity="1" Text="Silverlight图片浏览工具 copyright:QijieXue" FontFamily="Comic Sans MS" FontSize="24" Grid.Row="2" Grid.Column="1"/>
</Button.Content>
</Button>
<Canvas x:Name="InfoCanvas" Visibility="Collapsed" Grid.Row="1" Grid.Column="1">
<StackPanel Orientation="Vertical" Canvas.Left="250" Canvas.Top="250">
<StackPanel.Projection>
<PlaneProjection RotationY="-35" CenterOfRotationX="0.5" CenterOfRotationY="0.5" CenterOfRotationZ="0"/>
</StackPanel.Projection>
<TextBlock x:Name="naminfo" Foreground="White" Text="Cooper is a software tester in hisoft" FontSize="20"/>
<TextBlock x:Name="interestinfo" Foreground="White" Text="He is interested in SharePoint and Silverlight" FontSize="20"/>
<TextBlock x:Name="mailinfo" Foreground="White" Text="Mail: v-qixe@microsoft.com" FontSize="20"/>
<TextBlock x:Name="msninfo" Foreground="White" Text="MSN: myheartgoon@hotmail.com" FontSize="20"/>
<TextBlock x:Name="bloginfo" Foreground="White" Text="Blog: http://www.cnblogs.com/qixue" FontSize="20"/>
<Button x:Name="Ok" Content="OK" FontSize="24" Foreground="Black" Click="Ok_Click"/>
</StackPanel>
</Canvas>
</Grid>
</UserControl>
MainPage.xaml.cs:
Code
1using System;
2using System.IO;
3using System.Windows;
4using System.Windows.Controls;
5using System.Windows.Documents;
6using System.Windows.Input;
7using System.Windows.Media;
8using System.Windows.Media.Imaging;
9using System.Windows.Media.Animation;
10using System.Windows.Shapes;
11
12namespace ZoomByAnimation
13{
14 public partial class MainPage : UserControl
15 {
16 bool isMouseDown = false;
17 double beginX = 0;
18 double beginY = 0;
19 int imgNum = 0;
20 public MainPage()
21 {
22 InitializeComponent();
23 }
24
25 Button ADD and Delete#region Button ADD and Delete
26 private void addpicture_Click(object sender, RoutedEventArgs e)
27 {
28 Random random=new Random ();
29 OpenFileDialog openFileDialog = new OpenFileDialog();
30 openFileDialog.Filter = "JPEG Files(*.jpg)|*.jpg|Bitmap Files(*.bmp)|*.bmp";
31 if (openFileDialog.ShowDialog()==true)
32 {
33 Stream s = openFileDialog.File.OpenRead();
34 BitmapImage image = new BitmapImage();
35 image.SetSource(s);
36 Image img = new Image();
37 imgNum++;
38 img.Name = string.Format("img{0}", imgNum);
39 img.Source = image;
40 img.Width = 200;
41 img.Height = 200;
42 img.SetValue (Canvas.LeftProperty ,Convert.ToDouble (random .Next (600)));
43 img.SetValue(Canvas.TopProperty ,Convert.ToDouble (random.Next (400)));
44 // Add the new image to Canvas(Named canvasContainer)
45 canvasContainer.Children.Add(img);
46 //Mouse Event
47 img.MouseEnter += new MouseEventHandler(img_MouseEnter);
48 img.MouseLeave += new MouseEventHandler(img_MouseLeave);
49 img.MouseLeftButtonDown += new MouseButtonEventHandler(img_MouseLeftButtonDown);
50 img.MouseMove += new MouseEventHandler(img_MouseMove);
51 img.MouseLeftButtonUp += new MouseButtonEventHandler(img_MouseLeftButtonUp);
52 img.MouseWheel += new MouseWheelEventHandler(img_MouseWheel);
53 }
54 }
55
56 private void delpicture_Click(object sender, RoutedEventArgs e)
57 {
58 foreach (Image obj in canvasContainer.Children)
59 {
60 Image img = obj as Image;
61 if (Convert.ToDouble(img.GetValue(Canvas.ZIndexProperty)) == 1)
62 {
63 LayoutRoot.Resources.Remove(string.Format("{0}enterStoryboard", img.Name));
64 LayoutRoot.Resources.Remove(string.Format("{0}leaveStoryboard", img.Name));
65 LayoutRoot.Resources.Remove(string.Format("{0}largerStoryboard", img.Name));
66 canvasContainer.Children.Remove(img);
67 img = null;
68 break;
69 }
70 }
71 }
72 #endregion Button Add and Delete
73
74 Zoom in and Zoom out#region Zoom in and Zoom out
75 void img_MouseWheel(object sender, MouseWheelEventArgs e)
76 {
77 Image img = sender as Image;
78 int delta = e.Delta;
79 double size = delta;
80 if ((img.Width + size * 2) > 200)
81 {
82 ChangeImageSize(img, size * 2);
83 }
84 else
85 {
86 ChangeImageSize(img, 200 - img.Width); //If zoom out too much that image width little than 200, then asign 200 to image width
87 }
88 }
89
90 private void ChangeImageSize(Image img, double size)
91 {
92 // To check if the larger Storyboard exists
93 // if not, new one
94 if (LayoutRoot.Resources[(object)string.Format("{0}largerStoryboard",img.Name)] == null)
95 {
96 Storyboard sb = new Storyboard();
97 Duration myDuration = new Duration(TimeSpan.FromSeconds(0.7));
98 DoubleAnimation widthAnimation = new DoubleAnimation();
99 DoubleAnimation heightAnimation = new DoubleAnimation();
100 widthAnimation.Duration = myDuration;
101 heightAnimation.Duration = myDuration;
102 sb.Duration = myDuration;
103 Storyboard.SetTarget(widthAnimation, img);
104 Storyboard.SetTarget(heightAnimation, img);
105 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
106 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
107 sb.Children.Add(widthAnimation);
108 sb.Children.Add(heightAnimation);
109 LayoutRoot.Resources.Add(string.Format("{0}largerStoryboard", img.Name), sb);
110 }
111 // Get the larger Storyboard and start it
112 Storyboard largerimgStoryboard=LayoutRoot.Resources [(object )string.Format ("{0}largerStoryboard",img.Name )] as Storyboard ;
113 //Think about why should we get it out from the code block up
114 // cuz it doesn't work inside, for the code block up not excuted every time and the size is not as same big as the size last mouse wheel
115 DoubleAnimation width = largerimgStoryboard.Children[0] as DoubleAnimation; //the widthAnimation
116 width.To = img.Width + size;
117 width = largerimgStoryboard.Children[1] as DoubleAnimation; // the heightAnimation
118 width.To = img.Width + size;
119 largerimgStoryboard .Begin ();
120 }
121 #endregion Zoom in and Zoom out
122
123 Move image#region Move image
124 void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
125 {
126 Image img = sender as Image;
127 isMouseDown = false;
128 img.ReleaseMouseCapture();
129 }
130
131 void img_MouseMove(object sender, MouseEventArgs e)
132 {
133 Image img = sender as Image;
134 if (isMouseDown)
135 {
136 double currX = e.GetPosition(this).X;
137 double currY = e.GetPosition(this).Y;
138 img.SetValue (Canvas.LeftProperty ,Convert.ToDouble((double)img.GetValue (Canvas.LeftProperty )+(currX -beginX )));
139 img.SetValue(Canvas.TopProperty, Convert.ToDouble((double)img.GetValue(Canvas.TopProperty) + (currY - beginY)));
140 beginX = currX;
141 beginY = currY;
142 }
143 }
144
145 void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
146 {
147 Image img = sender as Image;
148 beginX = e.GetPosition(this).X;
149 beginY = e.GetPosition(this).Y;
150 isMouseDown = true;
151 img.CaptureMouse();
152 foreach (UIElement obj in canvasContainer.Children)
153 {
154 if (obj is Image)
155 {
156 Image tmpImg = obj as Image;
157 tmpImg.SetValue(Canvas.ZIndexProperty, 0);
158 }
159 }
160 img.SetValue(Canvas.ZIndexProperty, 1);
161 }
162 #endregion move image
163
164 MouseEnter and MouserLeave the image#region MouseEnter and MouserLeave the image
165 void img_MouseEnter(object sender, MouseEventArgs e)
166 {
167 Image img = sender as Image;
168 if (img.Width == 200)
169 {
170 Duration myDuration = new Duration(TimeSpan .FromSeconds (0.3));
171 //To check wether the mouse enter Storyboard(Named like img1enterStoryboard) of img(Named like img1) exists or not
172 // if it doesn't exists, new a Storyboard named img.Name+enterStoryboard for img
173 if (LayoutRoot .Resources [(object)(string.Format ("{0}enterStoryboard",img .Name ))]==null)
174 {
175 Storyboard sb=new Storyboard ();
176 DoubleAnimation widthAnimation = new DoubleAnimation();
177 DoubleAnimation heightAnimation = new DoubleAnimation();
178 widthAnimation.Duration = myDuration;
179 heightAnimation.Duration = myDuration;
180 sb.Duration = myDuration;
181 sb.Children.Add(widthAnimation);
182 sb.Children.Add(heightAnimation);
183 Storyboard.SetTarget(widthAnimation, img);
184 Storyboard.SetTarget(heightAnimation, img);
185 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
186 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
187 widthAnimation.To = 280;
188 heightAnimation.To = 280;
189 //Add the new Storyboard named img1enterStoryboard to LayoutRoot
190 LayoutRoot.Resources.Add(string.Format ("{0}enterStoryboard",img.Name ), sb);
191 }
192 //Get the existing mouse enter Storyboard named img1enterStoryboard and start the storyboard
193 Storyboard enterimgboard = LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] as Storyboard;
194 enterimgboard.Begin();
195 //If the mouse leave Storyboard of this img exists, Stop it
196 if (LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] != null)
197 {
198 Storyboard leaveimgboard = LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] as Storyboard;
199 leaveimgboard.Stop();
200 }
201 }
202 }
203
204 void img_MouseLeave(object sender, MouseEventArgs e)
205 {
206 Image img = sender as Image;
207 if (img.Width <=280&&img .Width >200)
208 {
209 Duration myDuration = new Duration(TimeSpan .FromSeconds (0.5));
210 //To check wether the mouse leave Storyboard(Named like img1leaveStoryboard) of img(Named like img1) exists or not
211 // if it doesn't exists, new a Storyboard named img.Name+leaveStoryboard for img
212 if (LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] == null)
213 {
214 Storyboard sb = new Storyboard();
215 DoubleAnimation widthAnimation = new DoubleAnimation();
216 DoubleAnimation heightAnimation = new DoubleAnimation();
217 widthAnimation.Duration = myDuration;
218 heightAnimation.Duration = myDuration;
219 sb.Duration = myDuration;
220 sb.Children.Add(widthAnimation);
221 sb.Children.Add(heightAnimation);
222 Storyboard.SetTarget(widthAnimation, img);
223 Storyboard.SetTarget(heightAnimation, img);
224 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
225 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
226 widthAnimation.To = 200;
227 heightAnimation.To = 200;
228 //Add the new Storyboard named img1leaveStoryboard to LayoutRoot
229 LayoutRoot.Resources.Add(string.Format("{0}leaveStoryboard", img.Name), sb);
230 }
231 //Get the existing mouse leave Storyboard named img1leaveStoryboard and start the storyboard
232 Storyboard leaveimgboard = LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] as Storyboard;
233 leaveimgboard.Begin();
234 //If the mouse enter Storyboard of this img exists, Stop it
235 if (LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] != null)
236 {
237 Storyboard enterimgboard = LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] as Storyboard;
238 enterimgboard.Stop();
239 }
240 }
241 }
242
243 private void bottom_Click(object sender, System.Windows.RoutedEventArgs e)
244 {
245 // TODO: Add event handler implementation here.
246 InfoCanvas.Visibility=System.Windows.Visibility .Visible;
247 //string myinfo="Cooper is a software tester in hisoft"+"\n"+"He is interested in SharePoint and Silverlight"+"\n"+"Mail: v-qixe@microsoft.com"+"\n"+"MSN: myheartgoon@hotmail.com"+"\n"+"Blog: http://www.cnblogs.com/qixue";
248 //System.Windows.MessageBox .Show (myinfo,"copyright information",MessageBoxButton.OK);
249 }
250 #endregion MouseEnter and MouserLeave the image
251
252 //Below code is not important very much, pay no attention on it
253 private void de1_MouseEnter(object sender, MouseEventArgs e)
254 {
255 Ellipse el = sender as Ellipse;
256 Duration myDuration = new Duration(TimeSpan.FromSeconds(0.8));
257 if (LayoutRoot.Resources[(object)String.Format("{0}Storyboard", el.Name)] == null)
258 {
259 Storyboard sb = new Storyboard();
260 sb.Duration = myDuration;
261 DoubleAnimation widthAnimation = new DoubleAnimation();
262 DoubleAnimation heightAnimation = new DoubleAnimation();
263 widthAnimation.Duration = myDuration;
264 heightAnimation.Duration = myDuration;
265 Storyboard.SetTarget(widthAnimation, el);
266 Storyboard.SetTarget(heightAnimation, el);
267 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath ("Width"));
268 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
269 widthAnimation.To = 45;
270 heightAnimation.To=45;
271 sb.Children.Add(widthAnimation);
272 sb.Children.Add(heightAnimation);
273 LayoutRoot.Resources.Add(string.Format("{0}Storyboard", el.Name), sb);
274 }
275 Storyboard elStoryboard=LayoutRoot .Resources [(object)string.Format("{0}Storyboard",el.Name)] as Storyboard;
276 elStoryboard.Begin();
277 }
278
279 private void de1_MouseLeave(object sender, MouseEventArgs e)
280 {
281 Ellipse el = sender as Ellipse;
282 if (LayoutRoot.Resources[(object)string.Format("{0}Storyboard", el.Name)] != null)
283 {
284 Storyboard elStoryboard=LayoutRoot .Resources [(object)string.Format ("{0}Storyboard",el.Name)] as Storyboard;
285 elStoryboard.Stop();
286 }
287 }
288
289 private void Ok_Click(object sender, System.Windows.RoutedEventArgs e)
290 {
291 // TODO: Add event handler implementation here.
292 InfoCanvas.Visibility=System.Windows .Visibility .Collapsed;
293 }
294 }
295}
296
1using System;
2using System.IO;
3using System.Windows;
4using System.Windows.Controls;
5using System.Windows.Documents;
6using System.Windows.Input;
7using System.Windows.Media;
8using System.Windows.Media.Imaging;
9using System.Windows.Media.Animation;
10using System.Windows.Shapes;
11
12namespace ZoomByAnimation
13{
14 public partial class MainPage : UserControl
15 {
16 bool isMouseDown = false;
17 double beginX = 0;
18 double beginY = 0;
19 int imgNum = 0;
20 public MainPage()
21 {
22 InitializeComponent();
23 }
24
25 Button ADD and Delete#region Button ADD and Delete
26 private void addpicture_Click(object sender, RoutedEventArgs e)
27 {
28 Random random=new Random ();
29 OpenFileDialog openFileDialog = new OpenFileDialog();
30 openFileDialog.Filter = "JPEG Files(*.jpg)|*.jpg|Bitmap Files(*.bmp)|*.bmp";
31 if (openFileDialog.ShowDialog()==true)
32 {
33 Stream s = openFileDialog.File.OpenRead();
34 BitmapImage image = new BitmapImage();
35 image.SetSource(s);
36 Image img = new Image();
37 imgNum++;
38 img.Name = string.Format("img{0}", imgNum);
39 img.Source = image;
40 img.Width = 200;
41 img.Height = 200;
42 img.SetValue (Canvas.LeftProperty ,Convert.ToDouble (random .Next (600)));
43 img.SetValue(Canvas.TopProperty ,Convert.ToDouble (random.Next (400)));
44 // Add the new image to Canvas(Named canvasContainer)
45 canvasContainer.Children.Add(img);
46 //Mouse Event
47 img.MouseEnter += new MouseEventHandler(img_MouseEnter);
48 img.MouseLeave += new MouseEventHandler(img_MouseLeave);
49 img.MouseLeftButtonDown += new MouseButtonEventHandler(img_MouseLeftButtonDown);
50 img.MouseMove += new MouseEventHandler(img_MouseMove);
51 img.MouseLeftButtonUp += new MouseButtonEventHandler(img_MouseLeftButtonUp);
52 img.MouseWheel += new MouseWheelEventHandler(img_MouseWheel);
53 }
54 }
55
56 private void delpicture_Click(object sender, RoutedEventArgs e)
57 {
58 foreach (Image obj in canvasContainer.Children)
59 {
60 Image img = obj as Image;
61 if (Convert.ToDouble(img.GetValue(Canvas.ZIndexProperty)) == 1)
62 {
63 LayoutRoot.Resources.Remove(string.Format("{0}enterStoryboard", img.Name));
64 LayoutRoot.Resources.Remove(string.Format("{0}leaveStoryboard", img.Name));
65 LayoutRoot.Resources.Remove(string.Format("{0}largerStoryboard", img.Name));
66 canvasContainer.Children.Remove(img);
67 img = null;
68 break;
69 }
70 }
71 }
72 #endregion Button Add and Delete
73
74 Zoom in and Zoom out#region Zoom in and Zoom out
75 void img_MouseWheel(object sender, MouseWheelEventArgs e)
76 {
77 Image img = sender as Image;
78 int delta = e.Delta;
79 double size = delta;
80 if ((img.Width + size * 2) > 200)
81 {
82 ChangeImageSize(img, size * 2);
83 }
84 else
85 {
86 ChangeImageSize(img, 200 - img.Width); //If zoom out too much that image width little than 200, then asign 200 to image width
87 }
88 }
89
90 private void ChangeImageSize(Image img, double size)
91 {
92 // To check if the larger Storyboard exists
93 // if not, new one
94 if (LayoutRoot.Resources[(object)string.Format("{0}largerStoryboard",img.Name)] == null)
95 {
96 Storyboard sb = new Storyboard();
97 Duration myDuration = new Duration(TimeSpan.FromSeconds(0.7));
98 DoubleAnimation widthAnimation = new DoubleAnimation();
99 DoubleAnimation heightAnimation = new DoubleAnimation();
100 widthAnimation.Duration = myDuration;
101 heightAnimation.Duration = myDuration;
102 sb.Duration = myDuration;
103 Storyboard.SetTarget(widthAnimation, img);
104 Storyboard.SetTarget(heightAnimation, img);
105 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
106 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
107 sb.Children.Add(widthAnimation);
108 sb.Children.Add(heightAnimation);
109 LayoutRoot.Resources.Add(string.Format("{0}largerStoryboard", img.Name), sb);
110 }
111 // Get the larger Storyboard and start it
112 Storyboard largerimgStoryboard=LayoutRoot.Resources [(object )string.Format ("{0}largerStoryboard",img.Name )] as Storyboard ;
113 //Think about why should we get it out from the code block up
114 // cuz it doesn't work inside, for the code block up not excuted every time and the size is not as same big as the size last mouse wheel
115 DoubleAnimation width = largerimgStoryboard.Children[0] as DoubleAnimation; //the widthAnimation
116 width.To = img.Width + size;
117 width = largerimgStoryboard.Children[1] as DoubleAnimation; // the heightAnimation
118 width.To = img.Width + size;
119 largerimgStoryboard .Begin ();
120 }
121 #endregion Zoom in and Zoom out
122
123 Move image#region Move image
124 void img_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
125 {
126 Image img = sender as Image;
127 isMouseDown = false;
128 img.ReleaseMouseCapture();
129 }
130
131 void img_MouseMove(object sender, MouseEventArgs e)
132 {
133 Image img = sender as Image;
134 if (isMouseDown)
135 {
136 double currX = e.GetPosition(this).X;
137 double currY = e.GetPosition(this).Y;
138 img.SetValue (Canvas.LeftProperty ,Convert.ToDouble((double)img.GetValue (Canvas.LeftProperty )+(currX -beginX )));
139 img.SetValue(Canvas.TopProperty, Convert.ToDouble((double)img.GetValue(Canvas.TopProperty) + (currY - beginY)));
140 beginX = currX;
141 beginY = currY;
142 }
143 }
144
145 void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
146 {
147 Image img = sender as Image;
148 beginX = e.GetPosition(this).X;
149 beginY = e.GetPosition(this).Y;
150 isMouseDown = true;
151 img.CaptureMouse();
152 foreach (UIElement obj in canvasContainer.Children)
153 {
154 if (obj is Image)
155 {
156 Image tmpImg = obj as Image;
157 tmpImg.SetValue(Canvas.ZIndexProperty, 0);
158 }
159 }
160 img.SetValue(Canvas.ZIndexProperty, 1);
161 }
162 #endregion move image
163
164 MouseEnter and MouserLeave the image#region MouseEnter and MouserLeave the image
165 void img_MouseEnter(object sender, MouseEventArgs e)
166 {
167 Image img = sender as Image;
168 if (img.Width == 200)
169 {
170 Duration myDuration = new Duration(TimeSpan .FromSeconds (0.3));
171 //To check wether the mouse enter Storyboard(Named like img1enterStoryboard) of img(Named like img1) exists or not
172 // if it doesn't exists, new a Storyboard named img.Name+enterStoryboard for img
173 if (LayoutRoot .Resources [(object)(string.Format ("{0}enterStoryboard",img .Name ))]==null)
174 {
175 Storyboard sb=new Storyboard ();
176 DoubleAnimation widthAnimation = new DoubleAnimation();
177 DoubleAnimation heightAnimation = new DoubleAnimation();
178 widthAnimation.Duration = myDuration;
179 heightAnimation.Duration = myDuration;
180 sb.Duration = myDuration;
181 sb.Children.Add(widthAnimation);
182 sb.Children.Add(heightAnimation);
183 Storyboard.SetTarget(widthAnimation, img);
184 Storyboard.SetTarget(heightAnimation, img);
185 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
186 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
187 widthAnimation.To = 280;
188 heightAnimation.To = 280;
189 //Add the new Storyboard named img1enterStoryboard to LayoutRoot
190 LayoutRoot.Resources.Add(string.Format ("{0}enterStoryboard",img.Name ), sb);
191 }
192 //Get the existing mouse enter Storyboard named img1enterStoryboard and start the storyboard
193 Storyboard enterimgboard = LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] as Storyboard;
194 enterimgboard.Begin();
195 //If the mouse leave Storyboard of this img exists, Stop it
196 if (LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] != null)
197 {
198 Storyboard leaveimgboard = LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] as Storyboard;
199 leaveimgboard.Stop();
200 }
201 }
202 }
203
204 void img_MouseLeave(object sender, MouseEventArgs e)
205 {
206 Image img = sender as Image;
207 if (img.Width <=280&&img .Width >200)
208 {
209 Duration myDuration = new Duration(TimeSpan .FromSeconds (0.5));
210 //To check wether the mouse leave Storyboard(Named like img1leaveStoryboard) of img(Named like img1) exists or not
211 // if it doesn't exists, new a Storyboard named img.Name+leaveStoryboard for img
212 if (LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] == null)
213 {
214 Storyboard sb = new Storyboard();
215 DoubleAnimation widthAnimation = new DoubleAnimation();
216 DoubleAnimation heightAnimation = new DoubleAnimation();
217 widthAnimation.Duration = myDuration;
218 heightAnimation.Duration = myDuration;
219 sb.Duration = myDuration;
220 sb.Children.Add(widthAnimation);
221 sb.Children.Add(heightAnimation);
222 Storyboard.SetTarget(widthAnimation, img);
223 Storyboard.SetTarget(heightAnimation, img);
224 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
225 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
226 widthAnimation.To = 200;
227 heightAnimation.To = 200;
228 //Add the new Storyboard named img1leaveStoryboard to LayoutRoot
229 LayoutRoot.Resources.Add(string.Format("{0}leaveStoryboard", img.Name), sb);
230 }
231 //Get the existing mouse leave Storyboard named img1leaveStoryboard and start the storyboard
232 Storyboard leaveimgboard = LayoutRoot.Resources[(object)(string.Format("{0}leaveStoryboard", img.Name))] as Storyboard;
233 leaveimgboard.Begin();
234 //If the mouse enter Storyboard of this img exists, Stop it
235 if (LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] != null)
236 {
237 Storyboard enterimgboard = LayoutRoot.Resources[(object)(string.Format("{0}enterStoryboard", img.Name))] as Storyboard;
238 enterimgboard.Stop();
239 }
240 }
241 }
242
243 private void bottom_Click(object sender, System.Windows.RoutedEventArgs e)
244 {
245 // TODO: Add event handler implementation here.
246 InfoCanvas.Visibility=System.Windows.Visibility .Visible;
247 //string myinfo="Cooper is a software tester in hisoft"+"\n"+"He is interested in SharePoint and Silverlight"+"\n"+"Mail: v-qixe@microsoft.com"+"\n"+"MSN: myheartgoon@hotmail.com"+"\n"+"Blog: http://www.cnblogs.com/qixue";
248 //System.Windows.MessageBox .Show (myinfo,"copyright information",MessageBoxButton.OK);
249 }
250 #endregion MouseEnter and MouserLeave the image
251
252 //Below code is not important very much, pay no attention on it
253 private void de1_MouseEnter(object sender, MouseEventArgs e)
254 {
255 Ellipse el = sender as Ellipse;
256 Duration myDuration = new Duration(TimeSpan.FromSeconds(0.8));
257 if (LayoutRoot.Resources[(object)String.Format("{0}Storyboard", el.Name)] == null)
258 {
259 Storyboard sb = new Storyboard();
260 sb.Duration = myDuration;
261 DoubleAnimation widthAnimation = new DoubleAnimation();
262 DoubleAnimation heightAnimation = new DoubleAnimation();
263 widthAnimation.Duration = myDuration;
264 heightAnimation.Duration = myDuration;
265 Storyboard.SetTarget(widthAnimation, el);
266 Storyboard.SetTarget(heightAnimation, el);
267 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath ("Width"));
268 Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
269 widthAnimation.To = 45;
270 heightAnimation.To=45;
271 sb.Children.Add(widthAnimation);
272 sb.Children.Add(heightAnimation);
273 LayoutRoot.Resources.Add(string.Format("{0}Storyboard", el.Name), sb);
274 }
275 Storyboard elStoryboard=LayoutRoot .Resources [(object)string.Format("{0}Storyboard",el.Name)] as Storyboard;
276 elStoryboard.Begin();
277 }
278
279 private void de1_MouseLeave(object sender, MouseEventArgs e)
280 {
281 Ellipse el = sender as Ellipse;
282 if (LayoutRoot.Resources[(object)string.Format("{0}Storyboard", el.Name)] != null)
283 {
284 Storyboard elStoryboard=LayoutRoot .Resources [(object)string.Format ("{0}Storyboard",el.Name)] as Storyboard;
285 elStoryboard.Stop();
286 }
287 }
288
289 private void Ok_Click(object sender, System.Windows.RoutedEventArgs e)
290 {
291 // TODO: Add event handler implementation here.
292 InfoCanvas.Visibility=System.Windows .Visibility .Collapsed;
293 }
294 }
295}
296