silverlight
发布时间:2022-05-04 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了设计一个silverlight的textbox控件--silverlight(闪光)学习(1),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
在 www.silverlight.net上看到了制作一个silverlight 控件的视频,遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的代码,结果发现他的控件代码写得不完美。如果文字过长就会超出控件的边框。于是重新设计了下。 效果如下:
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里用户自定义控件做下类
在
www.silverlight.net上看到了制作
一个silverlight 控件的视频,遗憾的是视频里没有讲怎么设计这个控件。于是追踪到作者的blog里下载到了他的
代码,结果发现他的控件
代码写得不完美。如果
文字过长就会超出控件的边框。于是重新设计了下。
效果如下:
在讲怎么设计这个控件前,我把这个silverlight控件和asp.net里
用户自定义控件做下类比.
userContro
l.ascx
文件是
用户自定义控件的皮肤
文件,
后台逻辑
代码写在.cs里。而 silverlight控件的皮肤
文件是.xaml
文件,
后台逻辑
代码可以用.js
文件,也可以用.cs
文件。
废话不多说了,我们动手设计吧。首先建立
一个silverlight 类库项目:
项目建好后,
删除里面
默认的
一个Class1.cs
文件,
添加一个silverlight控件。
然后把下列
代码粘贴到.xaml
文件里。
xaml代码
1<Canvas
2 xmlns="http://scheR_174_11845@as.microsoft.com/client/2007"
3 xmlns:x="http://scheR_174_11845@as.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,176,15"/>
80 </Rectangle.Clip>
81 </Rectangle>
82</Canvas>
这段
代码在vs2008里直接看不到
效果,用blend2可以看到
效果。
熟悉"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 ;
actControl.Width = tb.ActualWidth + 16;
OuterBorder.Width = tb.ActualWidth + 20;
OuterBorder.Height = tb.ActualHeight + 10;
InnerBorder.Width = tb.ActualWidth + 16;
InnerBorder.Height = tb.ActualHeight + 8;
GlassButtonGlowEffect.Width = tb.ActualWidth + 16;
GlassButtonGlowEffect.Height = tb.ActualHeight + 8;
ButtonReflex.Width = tb.ActualWidth + 16;
ButtonReflex.Height = tb.ActualHeight + 8;
reflexClip.Rect = new rect(new Point(0, 0), new Point(tb.ActualWidth + 16, (tb.ActualHeight + 8)/2));
}
else//根据传入的参数设定控件的长度
{
actControl.Height = this.Height;
actControl.Width = this.Width;
}
left = (actControl.Width - tb.ActualWidth) / 2;
top = (actControl.Height - tb.ActualHeight) / 2;
tb.SETVALue<double>(Canvas.TopProperty, top);//设定文本在绘制面板中的坐标,也就是要使其在控件的中间位置。
tb.SETVALue<double>(Canvas.LeftProperty, left);
}
这样
一个控件就设计好了,那么如果使
用这个控件呢?
我们再
添加一个 silverlight Pro
ject 。
@H_883_2404@
我们
在这个项目
添加上先前建的控件库项目的引用。
然后
打开page.xaml
文件对应的
后台文件page.xam
l.cs
文件,在page_loaded事件里
加上如下
代码:
1
double
top
=
100
;
2
3
double
left
=
20
;
4
5
SilverControls.txtBoxControl txtBox
=
new
SilverControls.txtBoxControl();
6
7
txtBox.buttontext
=
"
Hello!
"
;
8
9
txtBox.SETVALue
<
double
>
(Canvas.TopProperty, top);
10
11
txtBox.SETVALue
<
double
>
(Canvas.LeftProperty, left);
12
13
this
.Children.Add(txtBox);
14
然后保存,在浏览器里查看textpage.html页面就可以了。
源代码如下:
/Files/wangergo/silverlightControlSample.rar
www.80back.com版权所有,首发cnblogs.com转载请著名出处。
大佬总结
以上是大佬教程为你收集整理的设计一个silverlight的textbox控件--silverlight(闪光)学习(1)全部内容,希望文章能够帮你解决设计一个silverlight的textbox控件--silverlight(闪光)学习(1)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。