现在的位置: 首页 > 综合 > 正文

漂亮的反射效果

2013年06月11日 ⁄ 综合 ⁄ 共 1539字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.