设计一个silverlight的Button控件silverlight(银光)学习（1）

       在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()
        {
            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 Project 。
 
 我们在这个项目添加上先前建的控件库项目的引用。
 然后打开page.xaml文件对应的后台文件page.xaml.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转载请著名出处。