Silverlight: 图片浏览工具改进版

 

 

 

 

 

 

 

 

 

 

MainPage.xaml：

 

<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：

 

  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