大家好,在学习Silverlight的朋友门,如果你刚刚开始学习银光,那就和我一起来探讨这个神奇的东东,或者也可以加我的QQ:16853655,注明“博客园:银光”
我们先开始做一个图片滚动展览店
第一步,相信各位都会操作吧,添加一个Silverlight的应用程序项目
在Silverlight程序项目下(非WEB项目哦),添加一下两个文件
建立“ShopShow.xaml” 控件文件,代码如下:
ShopShow.xaml
1
<
UserControl x:Class
=
"
SilverlightDemo.ShopShow
"
2 xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
3 xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
4 Width = " 1280 " Height = " 800 "
5 >
6 < Grid >
7 < Grid.Background >
8 < ImageBrush ImageSource = " http://localhost:2149/Images/bg.jpg " Stretch = " Fill " />
9 </ Grid.Background >
10 < Image x:Name = " shower " Width = " 400 " Height = " 300 " Stretch = " Fill " Visibility = " Collapsed " >
11 < Image.Effect >
12 < DropShadowEffect Color = " Aqua " BlurRadius = " 10 " Opacity = " 0.8 " ShadowDepth = " 0 " />
13 </ Image.Effect >
14 </ Image >
15 < Canvas x:Name = " moveCanvas " Margin = " 250 160 0 0 " ></ Canvas >
16 < StackPanel Orientation = " Horizontal " Margin = " 500 500 0 0 " >
17 < Button Width = " 50 " Height = " 30 " Content = " Play " Margin = " 10 " x:Name = " btnStart " Click = " btnStart_Click " ></ Button >
18 < Button Width = " 50 " Height = " 30 " Content = " Stop " Margin = " 10 " x:Name = " btnStop " Click = " btnStop_Click " ></ Button >
19 </ StackPanel >
20 </ Grid >
21 </ UserControl >
22
2 xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
3 xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
4 Width = " 1280 " Height = " 800 "
5 >
6 < Grid >
7 < Grid.Background >
8 < ImageBrush ImageSource = " http://localhost:2149/Images/bg.jpg " Stretch = " Fill " />
9 </ Grid.Background >
10 < Image x:Name = " shower " Width = " 400 " Height = " 300 " Stretch = " Fill " Visibility = " Collapsed " >
11 < Image.Effect >
12 < DropShadowEffect Color = " Aqua " BlurRadius = " 10 " Opacity = " 0.8 " ShadowDepth = " 0 " />
13 </ Image.Effect >
14 </ Image >
15 < Canvas x:Name = " moveCanvas " Margin = " 250 160 0 0 " ></ Canvas >
16 < StackPanel Orientation = " Horizontal " Margin = " 500 500 0 0 " >
17 < Button Width = " 50 " Height = " 30 " Content = " Play " Margin = " 10 " x:Name = " btnStart " Click = " btnStart_Click " ></ Button >
18 < Button Width = " 50 " Height = " 30 " Content = " Stop " Margin = " 10 " x:Name = " btnStop " Click = " btnStop_Click " ></ Button >
19 </ StackPanel >
20 </ Grid >
21 </ UserControl >
22
ShopShop.xaml.cs
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.Threading;
using System.Windows.Media.Imaging;
namespace SilverlightDemo
{
public partial class ShopShow : UserControl
{
private double centerX = 400 ;
private double centerY = 300 ;
private double width = 400 ;
private double height = 60 ;
private double degree = 0 ; // 度数值
List < ShopItem > objList = new List < ShopItem > (); // 项集合类
private double itemWidth = 160 ;
private double itemHeight = 80 ;
private double count = 14 ;
private double currentOpacity = 0 ;
private DispatcherTimer timer;
public ShopShow()
{
InitializeComponent();
this .Loaded += new RoutedEventHandler(ShopShow_Loaded);
}
private void ShopShow_Loaded( object sender, RoutedEventArgs e)
{
this .timer = new DispatcherTimer();
for (var i = 1 ; i <= this .count; i ++ )
{
// 实例化用户控件
ShopItem myShopItem = new ShopItem();
Image myImage = myShopItem.obj;
// 加载唱片图片
Uri myUri = new Uri(String.Format( " http://localhost:2149/Images/album{0}.jpg " , i));
BitmapImage bitmap = new BitmapImage(myUri);
myImage.Source = bitmap;
// 绑定控件事件
myImage.MouseEnter += new MouseEventHandler(myImage_MouseEnter);
myImage.MouseLeave += new MouseEventHandler(myImage_MouseLeave);
myImage.MouseLeftButtonDown += new MouseButtonEventHandler(myImage_MouseLeftButtonDown);
// 添加到用户控件里
this .objList.Add(myShopItem);
moveCanvas.Children.Add(myShopItem);
}
timer.Tick += new EventHandler(timer_Tick);
TimeSpan sp = new TimeSpan( 0 , 0 , 0 , 0 , 10 );
timer.Interval = sp;
timer.Start();
}
public void myImage_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
Image img = sender as Image;
shower.Visibility = Visibility.Visible;
shower.Source = img.Source;
}
public void myImage_MouseEnter( object sender, MouseEventArgs e)
{
timer.Stop();
Image img = sender as Image;
currentOpacity = img.Opacity;
img.Opacity = 1 ;
}
public void myImage_MouseLeave( object sender, MouseEventArgs e)
{
timer.Start();
Image img = sender as Image;
img.Opacity = currentOpacity;
}
public void timer_Tick( object sender, EventArgs e)
{
StartMove();
}
private void StartMove()
{
for (var i = 0 ; i < objList.Count;i ++ )
{
// 根据控件数量总数和周圆计算一个平均值
var tmp = ( this .degree + ( 360 / this .count * i)) % 360 ;
tmp = tmp * Math.PI / 180 ;
var posX = ( this .width) * Math.Sin(tmp); // 更新X坐标
var posY = ( this .height) * Math.Cos(tmp); // 更新Y坐标
ShopItem obj = this .objList[i];
// 根据高宽计算缩放比例
double scale = ( 2 * this .height - posY) / ( 3 * this .height + this .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();
st.ScaleX = scale;
st.ScaleY = scale;
obj.RenderTransform = st;
obj.Opacity = scale;
}
this .degree = this .degree - 0.3 ;
}
private void btnStart_Click( object sender, RoutedEventArgs e)
{
timer.Start();
}
private void btnStop_Click( object sender, RoutedEventArgs e)
{
timer.Stop();
}
}
}
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.Threading;
using System.Windows.Media.Imaging;
namespace SilverlightDemo
{
public partial class ShopShow : UserControl
{
private double centerX = 400 ;
private double centerY = 300 ;
private double width = 400 ;
private double height = 60 ;
private double degree = 0 ; // 度数值
List < ShopItem > objList = new List < ShopItem > (); // 项集合类
private double itemWidth = 160 ;
private double itemHeight = 80 ;
private double count = 14 ;
private double currentOpacity = 0 ;
private DispatcherTimer timer;
public ShopShow()
{
InitializeComponent();
this .Loaded += new RoutedEventHandler(ShopShow_Loaded);
}
private void ShopShow_Loaded( object sender, RoutedEventArgs e)
{
this .timer = new DispatcherTimer();
for (var i = 1 ; i <= this .count; i ++ )
{
// 实例化用户控件
ShopItem myShopItem = new ShopItem();
Image myImage = myShopItem.obj;
// 加载唱片图片
Uri myUri = new Uri(String.Format( " http://localhost:2149/Images/album{0}.jpg " , i));
BitmapImage bitmap = new BitmapImage(myUri);
myImage.Source = bitmap;
// 绑定控件事件
myImage.MouseEnter += new MouseEventHandler(myImage_MouseEnter);
myImage.MouseLeave += new MouseEventHandler(myImage_MouseLeave);
myImage.MouseLeftButtonDown += new MouseButtonEventHandler(myImage_MouseLeftButtonDown);
// 添加到用户控件里
this .objList.Add(myShopItem);
moveCanvas.Children.Add(myShopItem);
}
timer.Tick += new EventHandler(timer_Tick);
TimeSpan sp = new TimeSpan( 0 , 0 , 0 , 0 , 10 );
timer.Interval = sp;
timer.Start();
}
public void myImage_MouseLeftButtonDown( object sender, MouseButtonEventArgs e)
{
Image img = sender as Image;
shower.Visibility = Visibility.Visible;
shower.Source = img.Source;
}
public void myImage_MouseEnter( object sender, MouseEventArgs e)
{
timer.Stop();
Image img = sender as Image;
currentOpacity = img.Opacity;
img.Opacity = 1 ;
}
public void myImage_MouseLeave( object sender, MouseEventArgs e)
{
timer.Start();
Image img = sender as Image;
img.Opacity = currentOpacity;
}
public void timer_Tick( object sender, EventArgs e)
{
StartMove();
}
private void StartMove()
{
for (var i = 0 ; i < objList.Count;i ++ )
{
// 根据控件数量总数和周圆计算一个平均值
var tmp = ( this .degree + ( 360 / this .count * i)) % 360 ;
tmp = tmp * Math.PI / 180 ;
var posX = ( this .width) * Math.Sin(tmp); // 更新X坐标
var posY = ( this .height) * Math.Cos(tmp); // 更新Y坐标
ShopItem obj = this .objList[i];
// 根据高宽计算缩放比例
double scale = ( 2 * this .height - posY) / ( 3 * this .height + this .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();
st.ScaleX = scale;
st.ScaleY = scale;
obj.RenderTransform = st;
obj.Opacity = scale;
}
this .degree = this .degree - 0.3 ;
}
private void btnStart_Click( object sender, RoutedEventArgs e)
{
timer.Start();
}
private void btnStop_Click( object sender, RoutedEventArgs e)
{
timer.Stop();
}
}
}
建立 “ShopItem.xaml” 控件文件,代码如下:
<
UserControl x:Class
=
"
SilverlightDemo.ShopItem
"
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Width = " 135 " Height = " 135 " >
< Grid x:Name = " LayoutRoot " Background = " White " >
< Image x:Name = " obj "
Width = " 135 "
Height = " 135 "
Stretch = " Fill " />
</ Grid >
</ UserControl >
xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
Width = " 135 " Height = " 135 " >
< Grid x:Name = " LayoutRoot " Background = " White " >
< Image x:Name = " obj "
Width = " 135 "
Height = " 135 "
Stretch = " Fill " />
</ Grid >
</ UserControl >
后台CS文件无需添加代码。
建立以上两个文件后,在App.xaml.cs的启动函数里修改如下:
private
void
Application_Startup(
object
sender, StartupEventArgs e)
{
this .RootVisual = new ShopShow();
}
{
this .RootVisual = new ShopShow();
}
然后在准备一个背景图片和14个类似海报的图片。
好了,开始运行去吧,别忘记先编译Silverlight程序项目后,再测试WEB浏览!