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