WPF字体输入倒影效果

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

image

我承认,这只是个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> 

 

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

posted @ 2012-07-04 09:38  deepwzh  阅读(4787)  评论(2编辑  收藏  举报