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> 

 

歡迎大家給我提意見或建議！