概要:
有时我在想这个学习LerryLee的Silverlight笔记还要不要写下去。首先我是菜鸟,也是边学边写,内容实在是没什么深度;其次Silverlight3与Silverlight2也就
那么一点差别,即使有什么问题大家到网上搜搜基本上都能找到。但我觉得既然当初开始了,那么就把它写完,至少也有始有终么。我就当是写在自己的笔记本上的,
给我自己看的。
事件的声明:
在C#中的事件声明有:声明事件,事件处理方法,事件与方法绑定。
silverlight也类似,可以在.maxl中声明事件,也可以在.cs文件中声明事件并绑定。
代码< Grid x:Name ="LayoutRoot" Background ="#46461F" >
< Ellipse Width ="120" Height ="120" Fill ="Orange"
Canvas.Top ="60" Canvas.Left ="80"
MouseEnter ="Ellipse_MouseEnter"
MouseLeave ="Ellipse_MouseLeave" >
</ Ellipse >
< Ellipse x:Name ="ell" Width ="50" Height ="50" Fill ="Orange"
Canvas.Top ="60" Canvas.Left ="280"
Margin ="283,125,67,125" >
</ Ellipse >
</ Grid >
代码public MainPage()
{
InitializeComponent();
ell.MouseEnter += new MouseEventHandler(Ellipse_MouseEnter);
ell.MouseLeave += new MouseEventHandler(Ellipse_MouseLeave);
}
private void Ellipse_MouseEnter( object sender, MouseEventArgs e)
{
Ellipse el = sender as Ellipse;
el.Fill = new SolidColorBrush(Colors.Yellow);
}
private void Ellipse_MouseLeave( object sender, MouseEventArgs e)
{
Ellipse ell = sender as Ellipse;
ell.Fill = new SolidColorBrush(Colors.Green);
}
效果也是一样的:
有人问sender as Ellipse;中的sender什么意思,显然object sender即事件的发送者,此例子中的sender即ellipse,因为是它触发的事件。
事件数据:
比如上个例子中的事件处理方法:void OnMouseLeave(object sender, MouseEventArgs e)
sender是事件发送者,那么e就是存储事件的数据。事件数据类从EventArgs继承来的。所以事件的数据要用到e。
代码< Grid x:Name ="LayoutRoot" Background ="White" >
< Rectangle Height ="120" Margin ="10,10,0,0" Width ="200"
Fill ="Orange" Stroke ="White" StrokeThickness ="2"
Canvas.Top ="40" Canvas.Left ="130" MouseMove ="Rectangle_MouseMove" />
< TextBlock Margin ="10,120,0,0" Name ="txtb" Text ="TextBlock" VerticalAlignment ="Top" Width ="120" />
</ Grid >
代码注意e.OriginalSource是Silverlight3中的,代替了原e.Source。
private void Rectangle_MouseMove( object sender, MouseEventArgs e)
{
Point p = e.GetPosition(e.OriginalSource as FrameworkElement);
txtb.Text = String.Format( " 坐标位置({0}:{1}) " , p.X, p.Y);
}
路由事件:
我开始不知道什么叫路由事件,不过LerryLee也解释了:事件路由,使得我们可以在父节点上接收和处理来自于子节点的事件。
估计事件路由就是说在父容器声明的事件,也可以应用到子控件。不知这样对不对?
这个例子我试了一下,没什么困难,就不写上来了。
拖放功能:
拖放的这篇跟事件密切相关,我就一起学了。
逻辑:
1,按下鼠标——MouseLeftButtonDown
2,拖动鼠标——MouseMove
3,松开鼠标——MouseLeftButtonUp
听TerryLee这么一说,思路一下就清晰了。我就试着自己写写看。
知道是一会事,做起来是另外一回事。遇到好多问题,不过最后总算高明白了。
要在Canvas里,Grid不行。——这个是因为我在Grid里设置不了坐标,谁有办法的可以告诉我一下。
button控件不行,但我用Image是可以的。——因为Silverlight3里button点击只响应click事件,不响应MouseLeftButtonDown事件。
加上ClickMode="Hover",button就可以拖动了。代码< Canvas Background ="#46461F" >
< Image Source ="/SilverlightAppDemo6;component/Images/aspxba8205_20081025143826_2.jpg" Width ="50" Height ="50"
MouseLeftButtonDown ="OnMouseDown"
MouseMove ="OnMouseMove"
MouseLeftButtonUp ="OnMouseUp" ></ Image >
< Button Canvas.Left ="10" Canvas.Top ="10" Content ="Button" Height ="23" Name ="button1" Width ="75"
MouseLeftButtonDown ="OnMouseDown"
MouseMove ="OnMouseMove"
MouseLeftButtonUp ="OnMouseUp" />
</ Canvas >
代码bool trackingMouseMove = false ;
Point mousePosition;
public MainPage()
{
InitializeComponent();
}
void OnMouseDown( object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
mousePosition = e.GetPosition( null );
trackingMouseMove = true ;
if ( null != element)
{
element.CaptureMouse();
element.Cursor = Cursors.Hand;
}
}
void OnMouseMove( object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (trackingMouseMove)
{
double deltaV = e.GetPosition( null ).Y - mousePosition.Y;
double deltaH = e.GetPosition( null ).X - mousePosition.X;
double newTop = deltaV + ( double )element.GetValue(Canvas.TopProperty);
double newLeft = deltaH + ( double )element.GetValue(Canvas.LeftProperty);
element.SetValue(Canvas.TopProperty, newTop);
element.SetValue(Canvas.LeftProperty, newLeft);
mousePosition = e.GetPosition( null );
}
}
void OnMouseUp( object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
trackingMouseMove = false ;
element.ReleaseMouseCapture();
mousePosition.X = mousePosition.Y = 0 ;
element.Cursor = null ;
}这个代码基本上来自TerryLee,我自己写的也可以移动,不过移动时一抖一抖的。我晕了。
总目录
上一篇:vs2010 学习Silverlight学习笔记(4):界面布局
下一篇:vs2010 学习Silverlight学习笔记(6):全屏模式