1. 复习一下WPF的UIElement.Clip#

用了很久很久的WPF，但几乎没有主动用过它的Clip属性，我只记得它很灵活，可以裁剪出多种形状。在官方文档复习了一下，大致用法和效果如下：

Copy
<Image    Source="sampleImages\Waterlilies.jpg"    Width="200" Height="150" HorizontalAlignment="Left">   <Image.Clip>     <EllipseGeometry       RadiusX="100"       RadiusY="75"       Center="100,75"/>   </Image.Clip> </Image>

WPF的Clip是一个Geometry属性，它有多种派生类：

有这么多种Geometry，WPF的UIElement就可以裁剪成各种奇形怪状的形状，过去也有很多示例和文章讲解过如何利用WPF的Clip，这里就割爱了。

2. UWP中的UIElement.ClipWidth="200" Height="150"> <Image.Clip> <RectangleGeometry Rect="100 75 50 50"/> </Image.Clip> </Image> </Canvas>

其实Win2D和CompositionAPI可以做到复杂的裁剪，但用起来也比较复杂啊。也许UWP的理念是将XAML做成一个简单好用的工具，更复杂的内容全部交给Win2D和CompositionAPI实现？

3. 也许用不着Clip？

例如上面这个长阴影的失败例子，我应该裁剪超过边框的元素，如果要用Clip，XAML要这样写：

Copy
<StackPanel Background="#FFE87A69"             x:Name="ShadowBorder">     <StackPanel.Clip>         <RectangleGeometry Rect="0 0 600 160" />     </StackPanel.Clip> … … </StackPanel>

虽然最终实现了我要的想过，但一点都不开心，因为写死的尺寸都不优雅。或者可以绑定到ActualHeight和ActualWidth？反正我没有试过。

在用WPF时我也常常遇到这种问题，但我总是用ScrollViewer解决，ScrollViewer本身就有提供Clip的功能，代码如下：

Copy
<ScrollViewer Padding="0"               BorderThickness="0"               HorizontalScrollBarVisibility="Disabled"               VerticalScrollBarVisibility="Disabled">     <StackPanel Background="#FFE87A69"                 x:Name="ShadowBorder">         ...         ...     </