|
| 1 | +--- |
| 2 | +title: UIElement Extensions |
| 3 | +author: vgromfeld |
| 4 | +description: UIElementExtensions provides a simple way to extend the UIElement |
| 5 | +keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, UIElement, extensions |
| 6 | +--- |
| 7 | + |
| 8 | +# UIElement Extensions |
| 9 | + |
| 10 | +The [UIElementExtensions](https://docs.microsoft.com/en-us/dotnet/api/microsoft.toolkit.uwp.ui.extensions.uielementextensions) provide helpers for `UIElement`. |
| 11 | + |
| 12 | +## ClipToBounds |
| 13 | + |
| 14 | +The `ClipToBounds` property allows you to indicate whether to clip the content of this element (or content coming from the child elements of this element) to fit into the size of the containing element. |
| 15 | + |
| 16 | +> [!div class="nextstepaction"] |
| 17 | +> [Try it in the sample app](uwpct://Extensions?sample=ClipToBounds) |
| 18 | +
|
| 19 | +### Example |
| 20 | + |
| 21 | +```xaml |
| 22 | +<Grid |
| 23 | + BorderBrush="White" |
| 24 | + BorderThickness="1" |
| 25 | + Width="148" |
| 26 | + Height="148" |
| 27 | + extensions:UIElementExtensions.ClipToBounds="True"> |
| 28 | + <!-- We translate the inner rectangles outside of the bounds of the container. --> |
| 29 | + <Rectangle Fill="Blue" Width="100" Height="100"> |
| 30 | + <Rectangle.RenderTransform> |
| 31 | + <TranslateTransform X="-50" Y="-50" /> |
| 32 | + </Rectangle.RenderTransform> |
| 33 | + </Rectangle> |
| 34 | + <Rectangle Fill="Green" Width="100" Height="100"> |
| 35 | + <Rectangle.RenderTransform> |
| 36 | + <TranslateTransform X="50" Y="50" /> |
| 37 | + </Rectangle.RenderTransform> |
| 38 | + </Rectangle> |
| 39 | +</Grid> |
| 40 | + |
| 41 | +``` |
| 42 | + |
| 43 | +## Requirements (Windows 10 Device Family) |
| 44 | + |
| 45 | +| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.16299.0 or higher | |
| 46 | +| --- | --- | |
| 47 | +| Namespace | Microsoft.Toolkit.Uwp.UI.Extensions | |
| 48 | +| NuGet package | [Microsoft.Toolkit.Uwp.UI](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI/) | |
| 49 | + |
| 50 | +## API |
| 51 | + |
| 52 | +- [UIElementExtensions source code](https://github.com/Microsoft/WindowsCommunityToolkit//blob/master/Microsoft.Toolkit.Uwp.UI/Extensions/UIElement) |
| 53 | + |
| 54 | +## Related Topics |
| 55 | + |
| 56 | +- [UIElement.ClipToBounds Property (WPF)](https://docs.microsoft.com/en-us/dotnet/api/system.windows.uielement.cliptobounds?view=netframework-4.8) |
0 commit comments