Skip to content

Commit a4bc01a

Browse files
michael-hawkermichael-hawker
authored
Merge pull request #3193 from vgromfeld/clipToBounds
UIElement.ClipToBounds property
2 parents 7df2ca5 + ce5f40d commit a4bc01a

File tree

6 files changed

+125
-0
lines changed

6 files changed

+125
-0
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,9 @@
512512
<Compile Include="SamplePages\Eyedropper\EyedropperPage.xaml.cs">
513513
<DependentUpon>EyedropperPage.xaml</DependentUpon>
514514
</Compile>
515+
<Compile Include="SamplePages\ClipToBounds\ClipToBoundsPage.xaml.cs">
516+
<DependentUpon>ClipToBoundsPage.xaml</DependentUpon>
517+
</Compile>
515518
<Compile Include="SamplePages\ImageEx\ImageExLazyLoadingControl.xaml.cs">
516519
<DependentUpon>ImageExLazyLoadingControl.xaml</DependentUpon>
517520
</Compile>
@@ -925,6 +928,13 @@
925928
<SubType>Designer</SubType>
926929
<Generator>MSBuild:Compile</Generator>
927930
</Page>
931+
<Content Include="SamplePages\ClipToBounds\ClipToBoundsCode.bind">
932+
<SubType>Designer</SubType>
933+
</Content>
934+
<Page Include="SamplePages\ClipToBounds\ClipToBoundsPage.xaml">
935+
<SubType>Designer</SubType>
936+
<Generator>MSBuild:Compile</Generator>
937+
</Page>
928938
<Page Include="SamplePages\ImageEx\ImageExLazyLoadingControl.xaml">
929939
<SubType>Designer</SubType>
930940
<Generator>MSBuild:Compile</Generator>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ClipToBounds/ClipToBoundsCode.bind

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<Page
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
6+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
7+
mc:Ignorable="d">
8+
9+
<Grid Padding="120">
10+
<Grid
11+
BorderBrush="White"
12+
BorderThickness="1"
13+
Width="148"
14+
Height="148"
15+
extensions:UIElementExtensions.ClipToBounds="@[Clip to Bounds:Bool:True]">
16+
<!-- We translate the inner rectangles outside of the bounds of the container. -->
17+
<Rectangle Fill="Blue" Width="100" Height="100">
18+
<Rectangle.RenderTransform>
19+
<TranslateTransform X="-50" Y="-50" />
20+
</Rectangle.RenderTransform>
21+
</Rectangle>
22+
<Rectangle Fill="Green" Width="100" Height="100">
23+
<Rectangle.RenderTransform>
24+
<TranslateTransform X="50" Y="50" />
25+
</Rectangle.RenderTransform>
26+
</Rectangle>
27+
</Grid>
28+
</Grid>
29+
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ClipToBounds/ClipToBoundsPage.xaml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Page
2+
x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.ClipToBoundsPage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
mc:Ignorable="d">
9+
10+
<Grid x:Name="TargetObject"
11+
extensions:UIElementExtensions.ClipToBounds="True"/>
12+
13+
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/ClipToBounds/ClipToBoundsPage.xaml.cs

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using Windows.UI.Xaml.Controls;
6+
7+
namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
8+
{
9+
/// <summary>
10+
/// A page that shows how to use the ClipToBounds extension.
11+
/// </summary>
12+
public sealed partial class ClipToBoundsPage : Page
13+
{
14+
public ClipToBoundsPage() => InitializeComponent();
15+
}
16+
}

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1069,6 +1069,15 @@
10691069
"Icon": "/Assets/Helpers.png",
10701070
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/FrameworkElementExtensions.md"
10711071
},
1072+
{
1073+
"Name": "ClipToBounds",
1074+
"Type": "ClipToBoundsPage",
1075+
"About": "Extension to clip the UIElement inner controls inside its bounds.",
1076+
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/UIElement",
1077+
"XamlCodeFile": "ClipToBoundsCode.bind",
1078+
"Icon": "/Assets/Helpers.png",
1079+
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/extensions/UIElementExtensions.md"
1080+
},
10721081
{
10731082
"Name": "StringExtensions",
10741083
"Type": "StringExtensionsPage",

‎Microsoft.Toolkit.Uwp.UI/Extensions/UIElement/UIElementExtensions.cs

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using Windows.UI.Xaml;
6+
using Windows.UI.Xaml.Hosting;
7+
8+
namespace Microsoft.Toolkit.Uwp.UI.Extensions
9+
{
10+
/// <summary>
11+
/// Provides attached dependency properties for the <see cref="Windows.UI.Xaml.UIElement"/>
12+
/// </summary>
13+
public static class UIElementExtensions
14+
{
15+
/// <summary>
16+
/// Attached <see cref="DependencyProperty"/> that indicates whether or not the contents of the target <see cref="UIElement"/> should always be clipped to their parent's bounds.
17+
/// </summary>
18+
public static readonly DependencyProperty ClipToBoundsProperty = DependencyProperty.RegisterAttached(
19+
"ClipToBounds",
20+
typeof(bool),
21+
typeof(UIElementExtensions),
22+
new PropertyMetadata(DependencyProperty.UnsetValue, OnClipToBoundsPropertyChanged));
23+
24+
/// <summary>
25+
/// Gets the value of <see cref="ClipToBoundsProperty"/>
26+
/// </summary>
27+
/// <param name="element">The <see cref="UIElement"/> to read the property value from</param>
28+
/// <returns>The <see cref="bool"/> associated with the <see cref="FrameworkElement"/></returns>.
29+
public static bool GetClipToBounds(UIElement element) => (bool)element.GetValue(ClipToBoundsProperty);
30+
31+
/// <summary>
32+
/// Sets the value of <see cref="ClipToBoundsProperty"/>
33+
/// </summary>
34+
/// <param name="element">The <see cref="UIElement"/> to set the property to</param>
35+
/// <param name="value">The new value of the attached property</param>
36+
public static void SetClipToBounds(UIElement element, bool value) => element.SetValue(ClipToBoundsProperty, value);
37+
38+
private static void OnClipToBoundsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
39+
{
40+
if (d is UIElement element)
41+
{
42+
var clipToBounds = (bool)e.NewValue;
43+
var visual = ElementCompositionPreview.GetElementVisual(element);
44+
visual.Clip = clipToBounds ? visual.Compositor.CreateInsetClip() : null;
45+
}
46+
}
47+
}
48+
}

0 commit comments

Comments
 (0)