漂亮的反射效果


  反射,也就是像照鏡子那樣反射效果,這個效果早已經很常見了,在WPF中一般是什么實現的呢?

直接上圖了:

圖片中textBox的反射是用一個Rectangle綁定它的VisualBrush的Visual屬性來實現了。

1             <Rectangle.Fill>
2                 <VisualBrush Visual="{Binding ElementName=txtBox}"></VisualBrush>
3             </Rectangle.Fill>

然后在用變換去縮放Rectangle,

1             <Rectangle.LayoutTransform>
2                 <ScaleTransform ScaleY="-0.75"></ScaleTransform>
3             </Rectangle.LayoutTransform>

最后在漸變一下,否則倒影是不會像圖片那么漂亮的

1             <Rectangle.OpacityMask>
2                 <LinearGradientBrush EndPoint="0,1">
3                     <GradientStop Offset="0" Color="Transparent"></GradientStop>
4                     <GradientStop Offset="1" Color="#77000000"></GradientStop>
5                 </LinearGradientBrush>
6             </Rectangle.OpacityMask>

哦,對了,還有Rectangle的高和寬也不是隨便設置的哦,同樣的通過綁定來實現的,總的xaml代碼如下:

 1 <Window x:Class="Wpf.reflex"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="reflex" Height="200" Width="500" Background="DarkGreen">
 5     <StackPanel Margin="40">
 6         <TextBox x:Name="txtBox" FontSize="30" Text="This is a better reflection!"></TextBox>
 7         <Rectangle Height="{Binding ElementName=txtBox,Path=ActualHeight}" Width="{Binding ElementName=txtBox,Path=ActualWidth}">
 8             <Rectangle.Fill>
 9                 <VisualBrush Visual="{Binding ElementName=txtBox}"></VisualBrush>
10             </Rectangle.Fill>
11             <Rectangle.LayoutTransform>
12                 <ScaleTransform ScaleY="-0.75"></ScaleTransform>
13             </Rectangle.LayoutTransform>
14             <Rectangle.OpacityMask>
15                 <LinearGradientBrush EndPoint="0,1">
16                     <GradientStop Offset="0" Color="Transparent"></GradientStop>
17                     <GradientStop Offset="1" Color="#77000000"></GradientStop>
18                 </LinearGradientBrush>
19             </Rectangle.OpacityMask>
20         </Rectangle>
21     </StackPanel>
22 </Window>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM