在
www.silverlight.net上看到了制作一个silverlight 控件的视频,遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码,结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。
效果如下:
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件,后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件,后台逻辑代码可以用.js文件,也可以用.cs 文件。
废话不多说了,我们动手设计吧。首先建立一个silverlight 类库项目:
项目建好后,删除里面默认的一个Class1.cs文件,添加一个silverlight控件。
然后把下列代码粘贴到.xaml文件里。
xaml代码
1
<Canvas
2
xmlns="http://schemas.microsoft.com/client/2007"
3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
x:Name="GlassButton" Height="34" Width="120" RenderTransformOrigin="0.5,0.5">
5
<Canvas.Resources>
6
<Storyboard x:Name="GlassButtonGlow">
7
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButtonGlowEffect" Storyboard.TargetProperty="(UIElement.Opacity)">
8
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
9
</DoubleAnimationUsingKeyFrames>
10
</Storyboard>
11
<Storyboard x:Name="GlassButtonNormal">
12
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButtonGlowEffect" Storyboard.TargetProperty="(UIElement.Opacity)">
13
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
14
</DoubleAnimationUsingKeyFrames>
15
</Storyboard>
16
<Storyboard x:Name="GlassButtonDown">
17
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
18
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/>
19
</DoubleAnimationUsingKeyFrames>
20
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
21
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.95"/>
22
</DoubleAnimationUsingKeyFrames>
23
</Storyboard>
24
<Storyboard x:Name="GlassButtonUp">
25
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
26
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
27
</DoubleAnimationUsingKeyFrames>
28
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="GlassButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
29
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
30
</DoubleAnimationUsingKeyFrames>
31
</Storyboard>
32
</Canvas.Resources>
33
<Canvas.RenderTransform>
34
<TransformGroup>
35
<ScaleTransform ScaleX="1" ScaleY="1"/>
36
<SkewTransform AngleX="0" AngleY="0"/>
37
<RotateTransform Angle="0"/>
38
<TranslateTransform X="0" Y="0"/>
39
</TransformGroup>
40
</Canvas.RenderTransform>
41
<!-- Outer border of the button
just the stroke of the rectangle -->
42
<Rectangle Width="180" Height="34" RadiusX="5" RadiusY="5" StrokeThickness="1" Stroke="#FFFFFFFF" x:Name="OuterBorder"/>
43
<!-- Next in black border, and a somewhat opaque fill -->
44
<Rectangle Canvas.Top="1" Canvas.Left="1" Width="178" Height="32" RadiusX="4" RadiusY="4" Fill="#7F000000" Stroke="#FF000000" StrokeThickness="1" x:Name="InnerBorder" />
45
<!-- Radial gradient to give a glow to the button when rolled over -->
46
<Rectangle x:Name="GlassButtonGlowEffect" Canvas.Top="2" Canvas.Left="2" Width="176" Height="30" RadiusX="3" RadiusY="3" Opacity="0" >
47
<Rectangle.Fill>
48
<RadialGradientBrush>
49
<RadialGradientBrush.RelativeTransform>
50
<TransformGroup>
51
<ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
52
<TranslateTransform X="-0.368" Y="-0.152"/>
53
</TransformGroup>
54
</RadialGradientBrush.RelativeTransform>
55
<GradientStop Color="#B28DBDFF" Offset="0" />
56
<GradientStop Color="#008DBDFF" Offset="1" />
57
</RadialGradientBrush>
58
</Rectangle.Fill>
59
</Rectangle>
60
<TextBlock x:Name="GlassButtonText" Canvas.Left="8" Canvas.Top="5" Foreground="#FFFFFFFF" Text="Click Me" Cursor="Hand" RenderTransformOrigin="0.5,0.5" FontFamily="Verdana" FontSize="16" >
61
<TextBlock.RenderTransform>
62
<TransformGroup>
63
<ScaleTransform ScaleX="1" ScaleY="1"/>
64
<SkewTransform AngleX="0" AngleY="0"/>
65
<RotateTransform Angle="0"/>
66
<TranslateTransform X="0" Y="0"/>
67
</TransformGroup>
68
</TextBlock.RenderTransform>
69
</TextBlock>
70
<!-- over the top of part of the text is a lighter opaque gradient, clipped to the top half of the button -->
71
<Rectangle Canvas.Left="2" Canvas.Top="2" Width="176" Height="30" RadiusX="3" RadiusY="3" x:Name="ButtonReflex">
72
<Rectangle.Fill>
73
<LinearGradientBrush StartPoint="0.494,0.028" EndPoint="0.494, 0.889" >
74
<GradientStop Color="#99FFFFFF" Offset="0" />
75
<GradientStop Color="#33FFFFFF" Offset="1" />
76
</LinearGradientBrush>
77
</Rectangle.Fill>
78
<Rectangle.Clip>
79
<RectangleGeometry x:Name="ReflexClip" Rect="0,0,176,15"/>
80
</Rectangle.Clip>
81
</Rectangle>
82
</Canvas>
这段代码在vs2008里直接看不到效果,用blend2可以看到效果。
熟悉"Flash"设计的朋友会发现这个界面是有几个层组成的,包括了黑色的底色,白色的边框层,还有玻璃效果的一层,还有个文本层,还有一起上下分割两个色彩的层。
后台的核心逻辑代码如下:
/**/
/// <summary>
/// 根据文本的长度,重新绘制控件的大小
/// </summary>
private
void
ResizeControl()
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
double left;
double top;
TextBlock tb = actControl.FindName("GlassButtonText") as TextBlock;
tb.Text = txtbutton;
if (autoSize)//如果控件的长度根据文本的长度自动调整
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
actControl.Height = tb.ActualHeight + 8 ;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
actControl.Width = tb.ActualWidth + 16;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
OuterBorder.Width = tb.ActualWidth + 20;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
OuterBorder.Height = tb.ActualHeight + 10;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
InnerBorder.Width = tb.ActualWidth + 16;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
InnerBorder.Height = tb.ActualHeight + 8;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
GlassButtonGlowEffect.Width = tb.ActualWidth + 16;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
GlassButtonGlowEffect.Height = tb.ActualHeight + 8;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
ButtonReflex.Width = tb.ActualWidth + 16;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
ButtonReflex.Height = tb.ActualHeight + 8;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
ReflexClip.Rect = new Rect(new Point(0, 0), new Point(tb.ActualWidth + 16, (tb.ActualHeight + 8)/2));
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
}
else//根据传入的参数设定控件的长度
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
{
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
actControl.Height = this.Height;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
actControl.Width = this.Width;
}
left = (actControl.Width - tb.ActualWidth) / 2;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
top = (actControl.Height - tb.ActualHeight) / 2;
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
tb.SetValue<double>(Canvas.TopProperty, top);//设定文本在绘制面板中的坐标,也就是要使其在控件的中间位置。
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
tb.SetValue<double>(Canvas.LeftProperty, left);
}
这样一个控件就设计好了,那么如果使用这个控件呢?
我们再添加一个 silverlight Project 。
我们在这个项目添加上先前建的控件库项目的引用。
然后打开page.xaml文件对应的后台文件page.xaml.cs文件,在page_loaded事件里
加上如下代码:
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0f96da3603811ffa37bc7ae1b8b5d747.jpeg)
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类比.
userControl.ascx文件是用户自定义控件的皮肤文件,后台逻辑代码写在.cs里。而 silverlight控件的皮肤文件是.xaml文件,后台逻辑代码可以用.js文件,也可以用.cs 文件。
废话不多说了,我们动手设计吧。首先建立一个silverlight 类库项目:
![](https://i-blog.csdnimg.cn/blog_migrate/e2fc5d18e936f2143856f89b342bb296.jpeg)
项目建好后,删除里面默认的一个Class1.cs文件,添加一个silverlight控件。
![](https://i-blog.csdnimg.cn/blog_migrate/5b02042d696340af1b707d85a00a4e55.jpeg)
然后把下列代码粘贴到.xaml文件里。
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
1
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
21
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
22
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
23
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
24
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
25
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
26
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
27
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
28
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
29
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
30
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
31
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
32
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
33
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
34
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
35
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
36
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
37
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
38
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
39
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
40
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
41
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
42
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
43
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
44
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
45
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
46
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
47
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
48
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
49
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
50
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
51
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
52
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
53
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
54
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
55
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
56
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
57
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
58
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
59
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
60
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
61
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
62
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
63
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
64
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
65
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
66
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
67
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
68
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
69
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
70
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
71
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
72
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
73
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
74
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
75
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
76
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
77
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
78
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
79
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
80
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
81
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
82
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
这段代码在vs2008里直接看不到效果,用blend2可以看到效果。
![](https://i-blog.csdnimg.cn/blog_migrate/ab548f34b76e722a96179b4194c04a23.jpeg)
熟悉"Flash"设计的朋友会发现这个界面是有几个层组成的,包括了黑色的底色,白色的边框层,还有玻璃效果的一层,还有个文本层,还有一起上下分割两个色彩的层。
后台的核心逻辑代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f2671b7f42ce505d9bf55a7a0ca257fb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
这样一个控件就设计好了,那么如果使用这个控件呢?
我们再添加一个 silverlight Project 。
![](https://i-blog.csdnimg.cn/blog_migrate/8576d1199ff29ea992cc66eb182a61c2.jpeg)
我们在这个项目添加上先前建的控件库项目的引用。
然后打开page.xaml文件对应的后台文件page.xaml.cs文件,在page_loaded事件里
加上如下代码:
1
double
top
=
100
;
2
3
double
left
=
20
;
4![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
SilverControls.txtBoxControl txtbox
=
new
SilverControls.txtBoxControl();
6![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7
txtbox.ButtonText
=
"
Hello!
"
;
8![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
9
txtbox.SetValue
<
double
>
(Canvas.TopProperty, top);
10![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
11
txtbox.SetValue
<
double
>
(Canvas.LeftProperty, left);
12![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
13
this
.Children.Add(txtbox);
14
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
然后保存,在浏览器里查看textpage.html页面就可以了。
源代码如下:
/Files/wangergo/silverlightControlSample.rar
www.80back.com版权所有,首发cnblogs.com转载请著名出处。