漂亮的反射效果

　　反射，也就是像照镜子那样反射效果，这个效果早已经很常见了，在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>