WPF 經過透明度遮罩和變換製做倒影效果

 

倒影效果

代碼

<Canvas 
  xmlns=「http://schemas.microsoft.com/client/2007「
  xmlns:x=「http://schemas.microsoft.com/winfx/2006/xaml「>

  <!– The object to reflect. –>
  <Image Source=「gear_large.png「
    Canvas.Left=「75「 Canvas.Top=「20「>
  </Image>

  <!– The reflection. –>
  <Image Source=「gear_large.png」 
    Canvas.Left=「75「 Canvas.Top=「228」
    Opacity=「0.75」>
    <Image.RenderTransform> 
      <ScaleTransform ScaleY=「-0.75「 /> 
    </Image.RenderTransform> 
    <Image.OpacityMask>
      <LinearGradientBrush StartPoint=「0.5,0.0「 EndPoint=「0.5,1.0「> 
        <GradientStop Offset=「0.0「 Color=「#00000000「 /> 
        <GradientStop Offset=「1.0「 Color=「#FF000000「 /> 
      </LinearGradientBrush> 
    </Image.OpacityMask> 
  </Image> 

</Canvas>

 

更加複雜的應用

參考

https://blogs.msdn.microsoft.com/wpfedevcon/2007/01/05/use-transforms-and-opacity-masks-to-create-a-reflection-in-wpfe/

Opacity Masks Overview