[UWP] UIElement.Clip though crippled, but it can play that game

1. review the WPF's UIElement.Clip

WPF spent long, long time, but almost no initiative used its Clip property, I remember it very flexible and can cut a variety of shapes. In the official documentation brushed up roughly usage and results are as follows:

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

The WPF Clip is a Geometry property, it has a variety of derived classes:

There are so many Geometry, WPF UIElement can be cut into a variety of bizarre shapes, there are many examples in the past and had articles explain how to use the WPF Clip, here afford to spare.

2. UWP in UIElement.Clip

The WPF Clip really do whatever they want, but to the UWP becomes bound hand and foot, because the UWP UIElement.Clip actually a RectangleGeometry property, that is to say UIElement can only accept rectangular clipping region, this is not simple, almost crippled . Almost specific usage:

<Canvas>
    <Image Source="Images/Water_lilies.jpg" Width="200" Height="150">
        <Image.Clip>
            <RectangleGeometry Rect="100 75 50 50"/>
        </Image.Clip>
    </Image>
</Canvas>

In fact Win2D and CompositionAPI complex cutting can be done, but it is also more complicated with ah. Perhaps the idea is to XAML UWP made a simple tool easy to use, more complex content and CompositionAPI Win2D all to achieve?

3. Maybe not need Clip?

If only the rectangular area is simply clipped words, do not need a lot of time Clip, there are other ways to achieve the desired function in XAML.

Examples such as the failure of this long shadows of the above, I should have cut more than a border element, if the use Clip, XAML to write:

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

Although ultimately the thought of what I want, but that is not happy, because the size of the write dead not elegant. Or you can be bound to ActualHeight and ActualWidth? Anyway, I have not tried.

When using WPF I often encounter this problem, but I always use ScrollViewer resolved, ScrollViewer itself provides Clip function, as follows:

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

XAML point fat on the fat point of it, but not how.

But UWP has a magical function, CornerRadiusset to a value greater than 0 content will be outside the scope of the cut, after all, have rounded cutting words will not be difficult to see? So UWP caring to help make this operation? Well regardless of principle, anyway, a pixel rounded corners, you do not say I did not say that no one will see, feel comfortable with so much more convenient than set up their own Clip.

<StackPanel Background="#FFE87A69"  CornerRadius="1">

Look, one pixel rounded corners really hard to find. Recently WinUI revision, its rounded corners made of 2 pixels, that is because the pixel really can not tell.

4. Clip can also play this

The above description of how to use or not use the Clip Drama region clipping range. In addition, since you can specify start and end cropping up, there are still many places playable.

The above understand people understand Pomodoro in two patients the red and blue components of the mentally disabled to use the Clip, simply copy out of two with a text to the middle of the session were cut out of the upper half and lower half, and then were made to both sides of the displacement of Spring animation, so you can make a cut effect:

<Grid Height="1050" Width="1920" x:Name="ContentArea" RenderTransformOrigin="0.5,0.5" >
    <Grid.RenderTransform>
        <CompositeTransform Rotation="-8"/>
    </Grid.RenderTransform>
    <Grid >
        <Grid x:Name="FocusElementTop">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,-1000,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource FocusText}" />
        </Grid>
        <Grid x:Name="FocusElementBottom">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,525,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource FocusText}" />
        </Grid>
        <Grid x:Name="RelaxElementTop">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,-1000,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource RelaxText}"/>
        </Grid>
        <Grid x:Name="RelaxElementBottom">
            <Grid.Clip>
                <RectangleGeometry Rect="-1000,525,3920,1525"/>
            </Grid.Clip>
            <TextBlock Style="{StaticResource RelaxText}"/>
        </Grid>
    </Grid>
</Grid>

UWP applications do not need to feel offended by the performance, the performance of the UWP much better than WPF, and all 2019, and those less memory, do not polite. Understand people understand the above five color distribution, such as Pomodoro unceremoniously overlay and then superimposed, each with a different part of Clip, background and text animations with the Spring at different times, the effect is very interesting. XAML is roughly like this:

<Grid Width="1600"
      HorizontalAlignment="Left">
    <Grid Background="#f8a9a2">
        <UIElement.Clip>
            <RectangleGeometry Rect="000,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="White">
        <UIElement.Clip>
            <RectangleGeometry Rect="320,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="#ed4e5d"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="#974945">
        <UIElement.Clip>
            <RectangleGeometry Rect="640,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="White">
        <UIElement.Clip>
            <RectangleGeometry Rect="960,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="#ef804b"
                                         Header="FOCUS ON JOB"/>
    </Grid>
    <Grid Background="#e74b36">
        <UIElement.Clip>
            <RectangleGeometry Rect="1280,-1000,320,5050" />
        </UIElement.Clip>
        <controls:HeaderedContentControl Foreground="White"
                                         Header="FOCUS ON JOB"/>
    </Grid>
</Grid>

5. Maybe really do not need Clip?

Do not learn how to use the Clip on what place with Clip, sometimes you do not need to use. For example this looks from the outside of the Clip text entry area, but did not actually use the Clip above, but adjusted Canvas.ZIndexto cover the unwanted part of it.

6. Conclusion

UWP in fact, there are several cutting plan, most disability is UIElement.Clip, this is mentioned in this article. The article also explains Win2D the cut. In fact, CompositionAPI also has its cutting plan, the next article will introduce Clip usage of CompositionAPI.

7. References

UIElement.Clip Properties (System.Windows) _ Microsoft Docs

UIElement.Clip Property (Windows.UI.Xaml) - Windows UWP applications _ Microsoft Docs

RectangleGeometry Class (Windows.UI.Xaml.Media) - Windows UWP applications _ Microsoft Docs

8. 源码

OnePomodoro_DoNotDisturbView.xaml at master

OnePomodoro_SplitTo5View.xaml at master

OnePomodoro_KonosubaView.xaml at master