Silverlight ClipToBounds - 可以剪切吗？是的，你可以！

• 下载演示项目

在 Silverlight 中，Panel 默认情况下不会剪切其内容。请参阅以下示例

其中我们有一个包含另一个 Grid 的 Grid，后者本身包含一个椭圆，以及一个包含椭圆的 Canvas

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
 
    <Grid Grid.Column="0" Background="Blue" Margin="20">                        
        <Grid Background="Yellow" Margin="20,40,-20,20">
            <Ellipse Fill="LightGreen" Width="80" 
		Height="80" Margin="-40, -40, 0, 0"/>
        </Grid>
    </Grid>
 
    <Canvas Grid.Column="1"  Background="Aqua" Margin="20" >
        <Ellipse Fill="Red" Canvas.Top="-10" 
		Canvas.Left="-10" Width="130" Height="130"/>
    </Canvas>
</Grid>

通常这不是期望的效果（尽管实际上这是 Canvas 的一个非常实用的特性；你可以简单地将一个 Canvas 添加到你的视觉树中，而无需显式或隐式设置其 Size，并将其用作绝对定位其子元素的机制）。

幸运的是，Silverlight 在 UIElement 上提供了一个 Clip 属性，允许你提供元素的剪切几何图形

<Grid Width="200" Height="100">       
    <Grid.Clip>
        <RectangleGeometry Rect="0, 0, 200, 100"/>
    </Grid.Clip>
</Grid>

上面的示例创建了一个与 Grid 本身矩形几何图形匹配的剪切几何图形。 显然可以创建更多花哨的剪切几何图形，从而实现非常酷的效果，但是大多数时候我只想剪切我的 Panel，使其子元素无法逸出！

上面的示例存在一些问题。 首先，每次我想剪切时，都必须显式创建几何图形，这有点冗长； 其次，如果我的 Grid 的大小是从其父级的布局计算得出的，那么如何在 XAML 中定义剪切几何图形？ 最后，如果我的 Grid 的几何图形发生变化，其剪切几何图形也不会发生变化。

为了解决这个问题，我创建了一个简单的 附加行为，它允许你使用附加属性 Clip.ToBounds 定义剪切，如下所示

<UserControl x:Class="SilverlightClipToBounds.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:util="clr-namespace:Util" Width="300" Height="200">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
 
        <Grid Grid.Column="0" Background="Blue" 
        Margin="20" util:Clip.ToBounds="true">
            <Grid Background="Yellow" 
            Margin="20,40,-20,20" util:Clip.ToBounds="true">
                <Ellipse Fill="LightGreen" Width="80" 
		Height="80" Margin="-40, -40, 0, 0"/>
            </Grid>
        </Grid>
 
        <Canvas Grid.Column="1"  Background="Aqua" 
        Margin="20" util:Clip.ToBounds="true">
            <Ellipse Fill="Red" Canvas.Top="-10" 
		Canvas.Left="-10" Width="130" Height="130"/>
        </Canvas>
    </Grid>
</UserControl>

结果如下所示

这是附加行为本身的代码

public class Clip
{
    public static bool GetToBounds(DependencyObject depObj)
    {
        return (bool)depObj.GetValue(ToBoundsProperty);
    }
 
    public static void SetToBounds(DependencyObject depObj, bool clipToBounds)
    {
        depObj.SetValue(ToBoundsProperty, clipToBounds);
    }
 
    /// <summary>
    /// Identifies the ToBounds Dependency Property.
    /// <summary>
    public static readonly DependencyProperty ToBoundsProperty =
        DependencyProperty.RegisterAttached("ToBounds", typeof(bool),
        typeof(Clip), new PropertyMetadata(false, OnToBoundsPropertyChanged)); 
 
    private static void OnToBoundsPropertyChanged(DependencyObject d,
        DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement fe = d as FrameworkElement;
        if (fe != null)
        {
            ClipToBounds(fe);
 
            // whenever the element which this property is attached to is loaded
            // or re-sizes, we need to update its clipping geometry
            fe.Loaded += new RoutedEventHandler(fe_Loaded);
            fe.SizeChanged += new SizeChangedEventHandler(fe_SizeChanged); 
        }
    }
 
    /// <summary>
    /// Creates a rectangular clipping geometry which matches the geometry of the
    /// passed element
    /// </summary>
    private static void ClipToBounds(FrameworkElement fe)
    {
        if (GetToBounds(fe))
        {
            fe.Clip = new RectangleGeometry()
            {
                Rect = new Rect(0, 0, fe.ActualWidth, fe.ActualHeight)
            };
        }
        else
        {
            fe.Clip = null;
        }
    }
 
    static void fe_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        ClipToBounds(sender as FrameworkElement);
    }
 
    static void fe_Loaded(object sender, RoutedEventArgs e)
    {
        ClipToBounds(sender as FrameworkElement);
    }    
}

当 ToBounds 属性与一个元素关联时，会调用 ClipToBounds 来创建一个矩形剪切几何图形。 我们还为 Loaded 添加事件处理程序，这是一个非常有用的事件，当一个元素已被布局和渲染时触发，换句话说，其大小将被计算出来，以及 SizeChanged。 在两个事件的处理程序中，我们只需更新剪切几何图形。

这可以在这里看到，单击 Grid 或 Canvas 会增加它们的大小，剪切几何图形也会相应地增长

[CodeProject 不支持 Silverlight applet，请在我的博客上查看其运行效果。]

你可以从 这里 下载演示项目。

可以剪切吗？是的，你可以！

此致，
Colin E.