设计一个silverlight的Button控件--silverlight(银光)学习(1)
在www.silverlight.net上看到了制作一个silverlight 控件的视频,遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码,结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。
效果如下:
![](/images/cnblogs_com/wangergo/silverlightControl1.JPG)
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件,后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件,后台逻辑代码可以用.js文件,也可以用.cs 文件。
废话不多说了,我们动手设计吧。首先建立一个silverlight 类库项目:
![](/images/cnblogs_com/wangergo/silverlightControl2.JPG)
项目建好后,删除里面默认的一个Class1.cs文件,添加一个silverlight控件。
![](/images/cnblogs_com/wangergo/silverlightControl3.JPG)
然后把下列代码粘贴到.xaml文件里。
xaml代码
这段代码在vs2008里直接看不到效果,用blend2可以看到效果。
![](/images/cnblogs_com/wangergo/silverlightControl4.JPG)
熟悉"Flash"设计的朋友会发现这个界面是有几个层组成的,包括了黑色的底色,白色的边框层,还有玻璃效果的一层,还有个文本层,还有一起上下分割两个色彩的层。
后台的核心逻辑代码如下:
/// <summary>
/// 根据文本的长度,重新绘制控件的大小
/// </summary>
private void ResizeControl()
{
double left;
double top;
TextBlock tb = actControl.FindName("GlassButtonText") as TextBlock;
tb.Text = txtbutton;
if (autoSize)//如果控件的长度根据文本的长度自动调整
{
actControl.Height = tb.ActualHeight + 8 ;
![](/Images/OutliningIndicators/InBlock.gif)
actControl.Width = tb.ActualWidth + 16;
![](/Images/OutliningIndicators/InBlock.gif)
OuterBorder.Width = tb.ActualWidth + 20;
![](/Images/OutliningIndicators/InBlock.gif)
OuterBorder.Height = tb.ActualHeight + 10;
![](/Images/OutliningIndicators/InBlock.gif)
InnerBorder.Width = tb.ActualWidth + 16;
![](/Images/OutliningIndicators/InBlock.gif)
InnerBorder.Height = tb.ActualHeight + 8;
![](/Images/OutliningIndicators/InBlock.gif)
GlassButtonGlowEffect.Width = tb.ActualWidth + 16;
![](/Images/OutliningIndicators/InBlock.gif)
GlassButtonGlowEffect.Height = tb.ActualHeight + 8;
![](/Images/OutliningIndicators/InBlock.gif)
ButtonReflex.Width = tb.ActualWidth + 16;
![](/Images/OutliningIndicators/InBlock.gif)
ButtonReflex.Height = tb.ActualHeight + 8;
![](/Images/OutliningIndicators/InBlock.gif)
ReflexClip.Rect = new Rect(new Point(0, 0), new Point(tb.ActualWidth + 16, (tb.ActualHeight + 8)/2));
![](/Images/OutliningIndicators/InBlock.gif)
}
else//根据传入的参数设定控件的长度
{
![](/Images/OutliningIndicators/InBlock.gif)
actControl.Height = this.Height;
![](/Images/OutliningIndicators/InBlock.gif)
actControl.Width = this.Width;
}
left = (actControl.Width - tb.ActualWidth) / 2;
![](/Images/OutliningIndicators/InBlock.gif)
top = (actControl.Height - tb.ActualHeight) / 2;
![](/Images/OutliningIndicators/InBlock.gif)
tb.SetValue<double>(Canvas.TopProperty, top);//设定文本在绘制面板中的坐标,也就是要使其在控件的中间位置。
![](/Images/OutliningIndicators/InBlock.gif)
tb.SetValue<double>(Canvas.LeftProperty, left);
}
这样一个控件就设计好了,那么如果使用这个控件呢?
我们再添加一个 silverlight Project 。
![](/images/cnblogs_com/wangergo/silverlightControl5.JPG)
我们在这个项目添加上先前建的控件库项目的引用。
然后打开page.xaml文件对应的后台文件page.xaml.cs文件,在page_loaded事件里
加上如下代码:
效果如下:
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件,后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件,后台逻辑代码可以用.js文件,也可以用.cs 文件。
废话不多说了,我们动手设计吧。首先建立一个silverlight 类库项目:
项目建好后,删除里面默认的一个Class1.cs文件,添加一个silverlight控件。
然后把下列代码粘贴到.xaml文件里。
![](/Images/OutliningIndicators/ContractedBlock.gif)
这段代码在vs2008里直接看不到效果,用blend2可以看到效果。
熟悉"Flash"设计的朋友会发现这个界面是有几个层组成的,包括了黑色的底色,白色的边框层,还有玻璃效果的一层,还有个文本层,还有一起上下分割两个色彩的层。
后台的核心逻辑代码如下:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](/Images/OutliningIndicators/None.gif)
这样一个控件就设计好了,那么如果使用这个控件呢?
我们再添加一个 silverlight Project 。
我们在这个项目添加上先前建的控件库项目的引用。
然后打开page.xaml文件对应的后台文件page.xaml.cs文件,在page_loaded事件里
加上如下代码:
1
double top = 100;
2
3
double left = 20;
4![](/Images/OutliningIndicators/None.gif)
5
SilverControls.txtBoxControl txtbox = new SilverControls.txtBoxControl();
6![](/Images/OutliningIndicators/None.gif)
7
txtbox.ButtonText = "Hello!";
8![](/Images/OutliningIndicators/None.gif)
9
txtbox.SetValue<double>(Canvas.TopProperty, top);
10![](/Images/OutliningIndicators/None.gif)
11
txtbox.SetValue<double>(Canvas.LeftProperty, left);
12![](/Images/OutliningIndicators/None.gif)
13
this.Children.Add(txtbox);
14![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
然后保存,在浏览器里查看textpage.html页面就可以了。
源代码如下:
/Files/wangergo/silverlightControlSample.rar
www.80back.com版权所有,首发cnblogs.com转载请著名出处。
本文版权属于王传炜所有,首发http://www.cnblogs.com/,转载请注明出处。