Click here to Skip to main content
12,831,378 members (30,614 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


14 bookmarked
Posted 16 May 2009

Silverlight ClipToBounds - Can I Clip It?, Yes You Can!

, 17 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
This technical blog posts shows how to add a new property ClipToBounds to clip your UI Elements.

With Silverlight, Panels do not clip their contents by default. See the following example:


Where we have a Grid containing another Grid which itself contains an ellipse, and a Canvas which contains an ellipse:

<Grid x:Name="LayoutRoot" Background="White">
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    <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"/>
    <Canvas Grid.Column="1"  Background="Aqua" Margin="20" >
        <Ellipse Fill="Red" Canvas.Top="-10" 
		Canvas.Left="-10" Width="130" Height="130"/>

Often this is not the desired effect (although it is actually quite a useful feature of Canvas; You can simply add a Canvas to your visual tree without explicitly or implicitly setting its Size and use it as a mechanism for absolute positioning its children).

Fortunately Silverlight provides a Clip property on UIElement, allowing you to provide the clipping geometry for the element:

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

The above example creates a clipping geometry which matches the rectangular geometry of the Grid itself. Clearly more funky clipping geometries can be created, allowing for really cool effects, however most of the time I simply want my Panel clipped so that its children cannot escape!

The above example has a few problems. Firstly, it is a bit long-winded having to explicitly create the geometry each time I want to clip; Secondly, if my Grid’s size is calculated from its parent’s layout, how can I define the clip geometry in my XAML? Finally, if my Grid’s geometry changes, its clipped geometry does not change.

In order to solve this problem, I created a simple little attached behaviour, which allows you to define the clipping using the attached property Clip.ToBounds as illustrated below:

<UserControl x:Class="SilverlightClipToBounds.Page"
    xmlns:util="clr-namespace:Util" Width="300" Height="200">
    <Grid x:Name="LayoutRoot" Background="White">
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        <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"/>
        <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"/>

The result can be seen below:


And here is the code for the attached behaviour itself:

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);
    /// <span class="code-SummaryComment"><summary>

When the ToBounds property is associated with an element, ClipToBounds is invoked to create a rectangular clip geometry. We also add event handlers for Loaded, which is a very useful event which is fired when an element has been laid out and rendered, in other words it’s size will have been computed, and SizeChanged. In the event handlers for both, we simply update the clipping geometry.

This can be seen in action here, where clicking on the Grids or Canvas increases their size, with the clipping geometry growing accordingly:

[CodeProject does not support Silverlight applets, see it in action on my blog]

You can download a demo project here:

Can I Clip It?, Yes, You Can!

Regards, Colin E.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Colin Eberhardt
Architect Scott Logic
United Kingdom United Kingdom
I am CTO at ShinobiControls, a team of iOS developers who are carefully crafting iOS charts, grids and controls for making your applications awesome.

I am a Technical Architect for Visiblox which have developed the world's fastest WPF / Silverlight and WP7 charts.

I am also a Technical Evangelist at Scott Logic, a provider of bespoke financial software and consultancy for the retail and investment banking, stockbroking, asset management and hedge fund communities.

Visit my blog - Colin Eberhardt's Adventures in .NET.

Follow me on Twitter - @ColinEberhardt


You may also be interested in...


Comments and Discussions

Generalnice Pin
devYang757-Jun-15 23:43
memberdevYang757-Jun-15 23:43 
GeneralMy vote of 5 Pin
Kashif_Imran21-Aug-13 10:22
memberKashif_Imran21-Aug-13 10:22 
GeneralWithout code behind Pin
Sorin Dolha10-May-13 5:01
memberSorin Dolha10-May-13 5:01 
GeneralMy vote of 5 Pin
hari111r27-Jan-13 5:55
memberhari111r27-Jan-13 5:55 
GeneralMy vote of 5 Pin
Martin Lottering27-May-12 6:56
memberMartin Lottering27-May-12 6:56 
GeneralMy vote of 5 Pin
RonSau20-Mar-12 10:57
memberRonSau20-Mar-12 10:57 
QuestionAwesome! Pin
Lynx468515-Dec-11 5:01
memberLynx468515-Dec-11 5:01 
GeneralExactly what I needed Pin
Marc Schluper29-Nov-10 7:23
memberMarc Schluper29-Nov-10 7:23 
QuestionHow does one set this in code Pin
KenJohnson30-Jul-10 0:18
memberKenJohnson30-Jul-10 0:18 
QuestionHow do i clip a canvas against polygon. Pin
mayurparmar0216-Mar-10 21:27
membermayurparmar0216-Mar-10 21:27 
AnswerRe: How do i clip a canvas against polygon. Pin
Colin Eberhardt17-Mar-10 5:44
memberColin Eberhardt17-Mar-10 5:44 
GeneralSee it in use! Pin
Helen Warn18-Jul-09 16:21
memberHelen Warn18-Jul-09 16:21 
GeneralI works ! Pin
Benjamin Mayrargue10-Jun-09 10:50
memberBenjamin Mayrargue10-Jun-09 10:50 
Generalnice ! Pin
Benjamin Mayrargue10-Jun-09 10:42
memberBenjamin Mayrargue10-Jun-09 10:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170326.1 | Last Updated 18 May 2009
Article Copyright 2009 by Colin Eberhardt
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid