Silverlight: silverlight网页图片浏览工具

 

MainPage.xaml:

代码

< UserControl  x:Class ="objectMove.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:DesignHeight ="700"  d:DesignWidth ="1200" >
     < UserControl.Resources  >
         < Storyboard  x:Name ="myboard" >
             < DoubleAnimation  x:Name ="r1Animation"  Storyboard.TargetName ="r1Transform"  Storyboard.TargetProperty ="Angle"  From ="-180"  To ="180"  Duration ="0:0:3"  RepeatBehavior ="Forever" />
    < DoubleAnimation  x:Name ="r2Animation"  Storyboard.TargetName ="r2Transform"  Storyboard.TargetProperty ="Angle"  From ="-180"  To ="180"  Duration ="0:0:3"  RepeatBehavior ="Forever" />
    < DoubleAnimation  x:Name ="r3Animation"  Storyboard.TargetName ="r3Transform"  Storyboard.TargetProperty ="Angle"  From ="-180"  To ="180"  Duration ="0:0:3"  RepeatBehavior ="Forever" />
         </ Storyboard >
     </ UserControl.Resources >
     < Grid  x:Name ="LayoutRoot"  Background ="white" >
   < Grid.RowDefinitions >
    < RowDefinition  Height ="50" />
    < RowDefinition  Height ="600" />
    < RowDefinition  Height ="50" />
   </ Grid.RowDefinitions >
   < Grid.ColumnDefinitions  >
    < ColumnDefinition  Width ="20" />
    < ColumnDefinition  Width ="800" />
    < ColumnDefinition  Width ="200" />
   </ Grid.ColumnDefinitions >
   < TextBlock  Text ="Silverlight图片浏览工具"  FontFamily ="Comic Sans MS"  FontSize ="34"  Grid.Row ="0"  Grid.Column ="1"  HorizontalAlignment ="Center" />
         < Canvas  Height ="600"  Width ="800"  x:Name ="Container"  Margin ="0,8,0,-8"  Grid.Row ="1"  Grid.Column ="1" >
             < Rectangle  x:Name ="r1"  Height ="80"  Width ="80"  Canvas.Left ="479"  Canvas.Top ="189"   MouseLeftButtonDown ="Rectangle_MouseLeftButtonDown"  MouseMove ="Rectangle_MouseMove"  MouseLeftButtonUp ="Rectangle_MouseLeftButtonUp"  MouseEnter ="Rectangle_MouseEnter"  MouseLeave ="Rectangle_MouseLeave"  RenderTransformOrigin ="0.525,1" >
                 < Rectangle.Fill  >
                     < ImageBrush  x:Name ="ImgBrush"  ImageSource ="Images/bug.png"   />
                 </ Rectangle.Fill >
                 < Rectangle.RenderTransform  >
                     < RotateTransform  x:Name ="r1Transform" />
                 </ Rectangle.RenderTransform >
             </ Rectangle >
             < Rectangle  x:Name ="r2"  Height ="80"  Width ="80"  Canvas.Left ="67"  Canvas.Top ="189"   MouseLeftButtonDown ="Rectangle_MouseLeftButtonDown"  MouseMove ="Rectangle_MouseMove"  MouseLeftButtonUp ="Rectangle_MouseLeftButtonUp"  MouseEnter ="Rectangle_MouseEnter"  MouseLeave ="Rectangle_MouseLeave"  RenderTransformOrigin ="0.525,1.05" >
                 < Rectangle.Fill  >
                     < ImageBrush  x:Name ="ImgBrush2"  ImageSource ="Images/porit.png"   />
                 </ Rectangle.Fill >
    < Rectangle.RenderTransform  >
                     < RotateTransform  x:Name ="r2Transform" />
                 </ Rectangle.RenderTransform >
             </ Rectangle >
             < Rectangle  x:Name ="r3"  Height ="80"  Width ="80"  Canvas.Left ="275"  Canvas.Top ="189"   MouseLeftButtonDown ="Rectangle_MouseLeftButtonDown"  MouseMove ="Rectangle_MouseMove"  MouseLeftButtonUp ="Rectangle_MouseLeftButtonUp"  MouseEnter ="Rectangle_MouseEnter"  MouseLeave ="Rectangle_MouseLeave"  RenderTransformOrigin ="0.5,1.063" >
                 < Rectangle.Fill  >
                     < ImageBrush  x:Name ="ImgBrush3"  ImageSource ="Images/Penguins.jpg"   />
                 </ Rectangle.Fill >
     < Rectangle.RenderTransform  >
                     < RotateTransform  x:Name ="r3Transform" />
                 </ Rectangle.RenderTransform >
             </ Rectangle >
         </ Canvas >
   < Canvas  Width ="800"  Height ="50"  Grid.Row ="2"  Grid.Column ="1" >
    < StackPanel  Orientation ="Horizontal" >
        < Button  x:Name ="button1"  Height ="23"  HorizontalAlignment ="Left"   Content ="Run"  VerticalAlignment ="Top"  Width ="75"  Click ="button1_Click"  FontSize ="13.333"  FontFamily ="Verdana"  BorderThickness ="3,3,1,1"   >
         < Button.Effect >
          < DropShadowEffect />
         </ Button.Effect >
        </ Button >
           < Button  x:Name ="button2"  HorizontalAlignment ="Left"  Height ="23"  VerticalAlignment ="Top"  Content ="Stop"  Width ="75"  Click ="button2_Click"  FontSize ="13.333"  FontFamily ="Verdana"  BorderThickness ="3,3,1,1" >
            < Button.Effect >
             < DropShadowEffect />
            </ Button.Effect >
           </ Button >
           < Slider   x:Name ="slider1"  Height ="23"  HorizontalAlignment ="Left"  VerticalAlignment ="Top"  Width ="400"  Minimum ="80"  Maximum ="500"  ValueChanged ="slider1_ValueChanged"  Value ="80"  BorderThickness ="5,15,5,5"  RenderTransformOrigin ="0.5,0.5"   >
            < Slider.Effect >
             < DropShadowEffect />
            </ Slider.Effect >
            < Slider.Background >
             < LinearGradientBrush  EndPoint ="0.5,1"  StartPoint ="0.5,0" >
              < GradientStop  Color ="Black"  Offset ="0.127" />
              < GradientStop  Color ="#FF85B678"  Offset ="0.92" />
             </ LinearGradientBrush >
            </ Slider.Background >
           </ Slider >
    </ StackPanel >
   </ Canvas >
    < Canvas  Width ="200"  Height ="600"  Grid.Row ="1"  Grid.Column ="2" >
    < StackPanel  Orientation ="Vertical" >
     < TextBlock  Text ="替换为自己的照片"  FontSize ="21.333"  HorizontalAlignment ="left"  Cursor ="Hand"  ToolTipService.ToolTip ="首先，选中左边的某张图片， 点击下方选择图片按钮， 在对话框中选择自己想上传的图片"  FontFamily ="Comic Sans MS" />
                 < Image  x:Name ="currImage"  Width ="200"  Height ="200" />
                 < Button  x:Name ="selectbt1"  Content ="选择图片"  Click ="selectbt1_Click"  FontSize ="13.333"  BorderThickness ="3,3,1,1"  Background ="#FF5BABEB" >
                  < Button.Effect >
                   < DropShadowEffect />
                  </ Button.Effect >
                 </ Button >
    </ StackPanel >
   </ Canvas >
     </ Grid >
</ UserControl >

 

 

MainPage.xaml.cs:

 

代码

using  System;
using  System.IO;
using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Input;
using  System.Windows.Media;
using  System.Windows.Media.Imaging;
using  System.Windows.Media.Animation;
using  System.Windows.Shapes;

namespace  objectMove
{
     public   partial   class  MainPage : UserControl
    {
         double  beginX  =   0 ;
         double  beginY  =   0 ;
         bool  isMouseDown  =   false ;
         public  MainPage()
        {
            InitializeComponent();
        }

         private   void  Rectangle_MouseLeftButtonDown( object  sender, MouseButtonEventArgs e)
        {
            Rectangle r  =  sender  as  Rectangle;
   
            beginX  =  e.GetPosition( this ).X;
            beginY  =  e.GetPosition( this ).Y;
    foreach  ( object   item  in  Container.Children )
            {
                 if  (item  is  Rectangle)
                {
                    Rectangle re  =  item  as  Rectangle;
                    re.SetValue(Canvas.ZIndexProperty,  0 );
                }
            }
            r.SetValue(Canvas.ZIndexProperty,  1 );
   slider1.Value  = r.Width ;
            isMouseDown  =   true ;
            r.CaptureMouse();         
        }

         private   void  Rectangle_MouseMove( object  sender, MouseEventArgs e)
        {
   
            Rectangle r  = sender  as  Rectangle;   
             if (isMouseDown)
            {
                r.Opacity  =   0.2 ;
                 double  currX  =  e.GetPosition( this ).X;
                 double  currY  =  e.GetPosition( this ).Y;
                 if  (currX  >   200   &&  currX  <   800 )
                {
                    r.SetValue(Canvas.LeftProperty, (currX  -  beginX)  +  Convert.ToDouble(r.GetValue(Canvas.LeftProperty)));
                    beginX  =  currX;
                }
                 if  (currY  >   200   &&  currY  < 600 )
                {
                    r.SetValue(Canvas.TopProperty, (currY  -  beginY)  +  Convert.ToDouble(r.GetValue(Canvas.TopProperty)));
                    beginY  =  currY;
                }
            }
        }

         private   void  Rectangle_MouseLeftButtonUp( object  sender, MouseButtonEventArgs e)
        {
            Rectangle r  =  sender  as  Rectangle;
            isMouseDown  =   false ;
            r.ReleaseMouseCapture();
            r.Opacity  =   1 ;            
        }

         ///   <summary>
         ///  Rectangle_MouseEnter和Rectangle_MouseLeave这两个方法实现 当鼠标移过未选中的图片是图片要放大1.5倍
         ///   </summary>     
         private   void  Rectangle_MouseEnter( object  sender, MouseEventArgs e)
        {
            Rectangle r  =  sender  as  Rectangle;
    if (r.Width == 80 && Convert.ToDouble (r.GetValue (Canvas.ZIndexProperty)) == 0 )
   {
            r.Width  *=   1.5 ;
            r.Height  *=   1.5 ;
   }
        }

         private   void  Rectangle_MouseLeave( object  sender, MouseEventArgs e)
        {
            Rectangle r  =  sender  as  Rectangle;
    if (r.Width == 80 * 1.5 && Convert.ToDouble (r.GetValue (Canvas.ZIndexProperty)) == 0 )
   {
            r.Width  /=   1.5 ;
            r.Height  /=   1.5 ;
   }
        }
         private   void  button1_Click( object  sender, RoutedEventArgs e)
        {
            myboard.Begin();
        }
   private   void  button2_Click( object  sender, RoutedEventArgs e)
        {
            myboard.Stop ();
        }

         private   void  slider1_ValueChanged( object  sender, RoutedPropertyChangedEventArgs < double >  e)
        {
             if  (e.OldValue  != 0 )  // 防止Slider提前初始化时该方法被调用 引发object not set to a instance异常 
            {
                Slider slider1  =  sender  as  Slider;
                 double  value  =  slider1.Value;
                 foreach  ( object  item  in  Container.Children)
                {
                     if  (item  is  Rectangle)
                    {
                        Rectangle re  =  item  as  Rectangle;
                         if  (Convert.ToDouble(re.GetValue(Canvas.ZIndexProperty))  ==   1 )
                        {
                            re.Width  =  value;
                            re.Height  =  value;
                        }
                    }
                }
            }
        }

         private   void  selectbt1_Click( object  sender, RoutedEventArgs e)
        {
            OpenFileDialog opFileDialog  =   new  OpenFileDialog();
            opFileDialog.Filter  =   " Jpeg Files (*.jpg)|*.jpg|All Files(*.*)|*.* " ;
             if  (opFileDialog.ShowDialog() == true )
            {
                Stream mystream = null ;
                 using  (mystream  =  opFileDialog.File.OpenRead())
                {
                     // BitmapImage继承自ImageSource
                    BitmapImage image  =   new  BitmapImage();
                    image.SetSource(mystream);
                    currImage.Source  =  image;
                    mystream.Close();
                     foreach  (var item  in  Container .Children)
                    {
                         if  (item  is  Rectangle)
                        {
                            Rectangle r  =  item  as  Rectangle;
                             double  zindex  =  Convert.ToDouble(r.GetValue(Canvas.ZIndexProperty));
                             // zindex=1 当前选中的Rectangle 把它的ImageBrush的ImageSource更给为选则的图片
                             if  (zindex  ==   1 )
                            {
                                ImageBrush brush  =   new  ImageBrush();
                                brush.ImageSource  =  image;
                                r.Fill  =  brush;
                            }
                        }
                    }                    
                }
            }
        }
                  
    }
}

 

 

转载于:https://www.cnblogs.com/qixue/archive/2009/11/18/1605600.html