none
一个silverlight的Button控件设计 RRS feed

  • 常规讨论

  • 一个silverlight的Button控件设计
    发布于:2008-06-06 11:33:22 作者:williams 来源:www.cnblogs.com 访问:17次 文字:
           在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(00), 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 。

     


      然后保存,在浏览器里查看textpage.html页面就可以了。

      源代码如下:  http://www.cnblogs.com/Files/wangergo/silverlightControlSample.rar


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 7:10
    版主