Silverlight文本元素―高级修饰

Silverlight 文本元素―高级修饰

在上篇博文中，我们简单介绍了一下 Silverlight 文本元素的基本修饰。可能我们会感觉那些文本的基本修饰还是不太炫！下面我们来看看稍微炫一点的文本元素修饰方法。

       其实修饰方法有很多个，我们在这篇博文中重点介绍一下常用的文本修饰元素。例如：画刷，变形和裁剪。

       Silverlight 为 Brush 提供了几个派生类： SolidColorBrush ； ImageBrush ； LinearGradientBrush ； RadialGradientBrush ； VideoBrush ；它们表示单色画刷，图片画刷，线性渐变画刷，放射性渐变画刷，视频画刷。下面我们通过代码来说明一下这几个画刷的应用。

       < StackPanel x : Name ="LayoutRoot" Background ="AliceBlue">

        <!― 线性渐变画刷 -->

        < TextBlock FontSize ="20" FontWeight ="Bold">

            线性渐变画刷

            < TextBlock.Foreground >

                 < LinearGradientBrush StartPoint ="0,0" EndPoint ="1,2">

                    < GradientStop Color ="Red" Offset ="0.0"/>

                    < GradientStop Color ="AliceBlue"  Offset="0.4"/>

                    < GradientStop Color ="Yellow"  Offset="0.8"/>

                     < GradientStop Color ="Black"  Offset="1.1"/>

                </ LinearGradientBrush >

            </ TextBlock.Foreground >

        </ TextBlock >

        <!-- 图片画刷 -->

        < TextBlock FontSize ="20" FontWeight ="Bold">

            图片画刷

            < TextBlock.Foreground >

                < ImageBrush ImageSource ="A3.jpg"/>

            </ TextBlock.Foreground >

        </ TextBlock >

        <!-- 放射性画刷 -->

        < TextBlock FontSize ="20" FontWeight ="Bold">

           放射性画刷

            < TextBlock.Foreground >

                < RadialGradientBrush RadiusY ="0.30">

                    < GradientStop Color ="Red" Offset ="0.0"/>

                    < GradientStop Color ="Yellow"  Offset="0.4"/>

                    < GradientStop Color ="AliceBlue"  Offset="0.8"/>

                    < GradientStop Color ="Black"  Offset="1.1"/>

                </ RadialGradientBrush >

            </ TextBlock.Foreground >

        </ TextBlock >

</ StackPanel >

 

演示效果如图：

       说完画刷了，现在来让我们说说文本变性吧！文本的变形可以实现旋转；缩放；倾斜等效果。这些效果是通过 Transform 类的派生类实现的。

       那么我们先来看看有那些派生类和这些派生类能够实现的功能吧！

       1 ） RotateTransform ：旋转变形，可以控制文本的旋转角度；

2 ） ScaleTransform ：缩放变形，可以控制文本的缩放比例；

3 ） SkewTransform ：倾斜变形，自定义元素的斜体效果；

4 ） TranslateTransform ：移动变形，控制文本相对于原始位置的距离；

5 ） TransformGroup ：组合变形，组合多个变形；

6 ） MatrixTransform ：矩形变形，二维空间中任意控制文本或坐标系统。

下面我们还是通过例子来看一下这些派生类所能实现的效果吧！代码如下：

<!-- 普通文本 -->

       <TextBlock Text="Rotate text" FontSize="20"/>

          <!-- 旋转变形文本 -->

          <TextBlock Text="Rotate text" FontSize="20">

            <TextBlock.RenderTransform>

                   <RotateTransform Angle="45" CenterX="30" CenterY="30"/>       

              </TextBlock.RenderTransform>

          </TextBlock>

我们在这里设置 Angle 属性的值表示旋转的角度，运行效果如图：

缩放变形可以从宽度和高度两个方向来控制文本的大小，代码如下：

<!-- 普通文本 -->

       <TextBlock Text="Scaled text" FontSize="20"/>

       <!-- 增大文本宽度 -->

          <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <ScaleTransform ScaleX="3"/> 

              </TextBlock.RenderTransform>

          </TextBlock>

          <!-- 增大文本高度 -->

         <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <ScaleTransform ScaleY="2"/> 

              </TextBlock.RenderTransform>

          </TextBlock>

我们在这里设置 ScaleX 和 ScaleY 的值，表示在文本在宽度和高度上是原来的 N 倍，这个 N 表示我们设置 ScaleX 和 ScaleY 的值，效果如图所示：

 

我们可以通过倾斜变形来设置文本在垂直方向和水平方形的倾斜，代码如下：

<!-- 普通文本 -->

       <TextBlock Text="Scaled text" FontSize="20"/>

       <!-- 文本水平倾斜 -->

          <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <SkewTransform AngleX="45"/>      

              </TextBlock.RenderTransform>

          </TextBlock>

          <!-- 文本垂直倾斜 -->

         <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <SkewTransform AngleY="30"/>       

              </TextBlock.RenderTransform>

          </TextBlock>

我们通过设置 AngleX 和 AngleY 的值来控制文本的倾斜角度，效果如图：

移动变形可以在水平或垂直方向把文本从原始位置移动到新位置。代码如下：

<Canvas x:Name="LayoutRoot" Background="AliceBlue">

       <!-- 文本移动 -->

          <TextBlock Text="Translated text" FontSize="50" Foreground="Gray">

            <TextBlock.RenderTransform>

                   <TranslateTransform X="5" Y="5"/>  

              </TextBlock.RenderTransform>

          </TextBlock>

          <!-- 普通文本 -->

       <TextBlock Text="Translated text" FontSize="50"/>

     </Canvas>

设置 X 和 Y 的值来表示水平和垂直方向上移动的像素。效果如图：

裁剪可以将文本内容裁剪成我们想要的形状，代码如下：

<StackPanel x:Name="LayoutRoot" Background="AliceBlue" Orientation="Horizontal">

          <TextBlock TextWrapping="Wrap" Width="250">

            Nowadays, there usually exists a wide selection of electives for

            college students to choose from. However, students have quite

            different plans for their future so they always end up learning

            courses based on their own ideas.

 

            　　 Some students may choose to learn a certain course in order to

            obtain an extra certificate for their job hunting after graduation.

            Because they assume that some more knowledge could ensure more

            chances of winning in finding a good job. Others may have their

            choice made just for fun. They tend to hold the idea that college

            life could be more colorful if they could widen their knowledge

            through elective courses.

 

            　　 As far as I ’ m concerned, I ’ m inclined to choose electives based on

            both the value of the courses and the interest of my own.

                     <TextBlock.Clip>

                            < EllipseGeometry Center ="100,100" RadiusX="100" RadiusY="100"/>

                     </TextBlock.Clip>

          </TextBlock>

          <!-- 普通文本 -->

      <TextBlock TextWrapping="Wrap" Width="250">

            Nowadays, there usually exists a wide selection of electives for

            college students to choose from. However, students have quite

            different plans for their future so they always end up learning

            courses based on their own ideas.

 

            　　 Some students may choose to learn a certain course in order to

            obtain an extra certificate for their job hunting after graduation.

            Because they assume that some more knowledge could ensure more

            chances of winning in finding a good job. Others may have their

            choice made just for fun. They tend to hold the idea that college

            life could be more colorful if they could widen their knowledge

            through elective courses.

 

            　　 As far as I ’ m concerned, I ’ m inclined to choose electives based on

            both the value of the courses and the interest of my own.

                     <TextBlock.Clip>

                            <PathGeometry>

                                   <PathFigure StartPoint="0,200" IsClosed="True">

                                          <PolyLineSegment Points="100,0"/>

                                          <PolyLineSegment Points="200,200"/>

                                   </PathFigure>

                            </PathGeometry>

                     </TextBlock.Clip>

          </TextBlock>

    </StackPanel>

效果如图：

在这里我们讲文本内容裁剪成一个圆形和一个等腰三角形。