反射,也就是像照鏡子那樣反射效果,這個效果早已經很常見了,在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>