WPF字体输入倒影效果

众所周知WPF是微软新一代图形系统，因此是用来做界面的。利用它可以做出许多漂亮的界面，比如说这个：字体输入倒影效果

我承认，这只是个Demo，因此大家大可以不必太苛刻。

其中用了变换的知识，可以参考这篇文章http://www.cnblogs.com/Wade-/archive/2012/07/03/2575421.html

以往的博客中都要附上代码的，这次则不同，因为它不用任何代码就可以实现这样的效果。

先分解下界面，一个两行的Grid，第一行放置一个TextBox文本输入框，第二行则放置一个Rectangle矩形。

还记得VisualBrush画刷吗？一个简单而又功能强大的画刷，它直接复制目标元素的内容。因此，将Rectangle的Fill属性设置为VisualBrush画刷就可以实现将TextBox的内容“印”到Rectangle中。

<Rectangle.Fill> 

    <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush> 

</Rectangle.Fill> 

 

那如何使它由透明变不透明色呢？如果仅仅实现透明，可以用Opacity；若实现渐变，需要用渐变画刷，并把画刷LinearGradientBrush放在OpacityMask属性中，这样就可以了。

<Rectangle.OpacityMask> 

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

        <GradientStop Offset="0.3" Color="Transparent"></GradientStop> 

        <GradientStop Offset="1" Color="White"></GradientStop> 

    </LinearGradientBrush> 

</Rectangle.OpacityMask> 

 

还差一点没有完善，那就是字倒过来。如何到？这就需要用变换了。若实现这样的效果自然要使用ScaleTransform。把它放在RenderTransform属性中。

<Rectangle.RenderTransform> 

    <ScaleTransform  ScaleY="-1"></ScaleTransform> 

</Rectangle.RenderTransform> 

 

测试一下。咦？怎么无法输入？原来是Rectangle把TextBox盖住了。怎么解决呢？那就需要改变变换的位置，设置 RenderTransformOrigin="0.5,0.5"，这样就OK了。

 

以下是完整xaml：

<Window x:Class="WpfApplication8.MainWindow" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        Title="WPF字体输入倒影效果" Height="350" Width="525"> 

   <Grid Margin="70"> 

        <Grid.RowDefinitions> 

            <RowDefinition></RowDefinition> 

            <RowDefinition></RowDefinition> 

        </Grid.RowDefinitions> 

            <TextBox x:Name="txt" FontSize="60"></TextBox> 

        <Rectangle  Grid.Row="1"  RenderTransformOrigin="0.5,0.5"> 

               <Rectangle.Fill> 

                   <VisualBrush Visual="{Binding ElementName=txt}"></VisualBrush> 

               </Rectangle.Fill> 

                <Rectangle.OpacityMask> 

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

                        <GradientStop Offset="0.3" Color="Transparent"></GradientStop> 

                        <GradientStop Offset="1" Color="White"></GradientStop> 

                    </LinearGradientBrush> 

                </Rectangle.OpacityMask> 

                <Rectangle.RenderTransform> 

                    <ScaleTransform  ScaleY="-1"></ScaleTransform> 

                </Rectangle.RenderTransform> 

            </Rectangle> 

    </Grid>   

</Window> 

 

欢迎大家给我提意见或建议！