How to make content of rectangle ClipToBounds?

How-to Discussions
1

Fuse version 1.7.3 (build 15528)

  • I’ve specified ClipToBounds="true" for <Rectangle> but still I see content outside of it’s rounded corners.
  • Is it possible to fix this?

file
xuNDMwojZa8r-image-1521186045983.png397×688 

<!--suppress ALL -->
<App>
    <Rectangle ux:Class="CardPage" CornerRadius="50" Color="#f23" ClipToBounds="true">
    </Rectangle>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="80%">
            <ScrollView>
                <StackPanel>
                    <Text Value="I'm a text"/>
                    <Image File="img/location-image.jpg"/>
                    <Text Value="I'm a text"/>
                </StackPanel>
            </ScrollView>
        </CardPage>
    </DockPanel>
</App>
2

Rectangle is not a clipping mask. If you want to get an image with rounded corners, you can use ImageFill brush to fill a shape, instead of putting an Image right inside of one.

3

Bent Stamnes wrote:

Rectangle is not a clipping mask. If you want to get an image with rounded corners, you can use ImageFill brush to fill a shape, instead of putting an Image right inside of one.

Yes I know I can make an image with rounded corners, but I want text to clip also. The idea is to have scroll view within rectangle (or some other type of container) with rounder corners which should be clipped properly.

4

I’ve read more on forums and found out about Mask

Here are my results:

<!--suppress ALL -->
<App>
    <Rectangle ux:Class="CardPage" Color="#fff" CornerRadius="15">
        <DropShadow Color="#333" Distance="-3"/>
        <Mask Mode="Alpha" File="img/card-mask.png" />
    </Rectangle>

    <StackPanel ux:Class="Content">
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Image File="img/location-image.jpg"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
    </StackPanel>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="100%">
            <ScrollView>
                <StackPanel>
                    <Each Count="10">
                        <Content/>
                    </Each>
                </StackPanel>
            </ScrollView>
        </CardPage>
    </DockPanel>
</App>

Mask:

file
rxpsqAsAIQSR-image-1521200029705.png375×545

Text is clipped properly:

file
zeNyLV3RBiVS-image-1521200109343.png806×362

Image is clipped properly but it affects the DropShadow:

file
b1it1buIHPxo-image-1521200141670.png794×240

YouTube Video:

  • Is that possible to fix drop shadow issue?
5

Pavel, you have correctly found that you can use Mask for what you wanted to achieve. However, I have to point out that what you’re doing is highly inefficient.

The use of DropShadow in particular has been discouraged for a long time now, since it’s very performance intensive, and a faster Shadow is the recommended approach. Of course, Shadow does not do “rounded corners” as DropShadow does, but that’s the whole point.

As for the shadow-challenge you have. If you don’t mind making a super slow app, I guess you could have 2 instances of that Mask, one just with the DropShadow applied, and another on top of it for the clipping. Not that I think you should do this.

6

SOLVED

  • The idea is to drop shadow from Underlay layer.
  • And having clipping mask in another internal Rectangle
  • Another question: Is that possible to specify clipping mask using some curves? Or I’m limited to raster mask only? PNG clipping mask works great, I event tried mask with higher resolution but still I’d like to have better clipping quality on rounded edges.

file
lH1EiN9ipBrB-image-1521202411419.png804×790 

<!--suppress ALL -->
<App>
    <DockPanel ux:Class="CardPage" >
        <Rectangle Layer="Underlay" Color="#fff" CornerRadius="20">
            <DropShadow Color="#555" Distance="-3" Spread="0" Size="4"/>
        </Rectangle>
        <Rectangle>
            <Mask Mode="Alpha" File="img/card-mask.png" />
            <ScrollContent />
        </Rectangle>
    </DockPanel>

    <StackPanel ux:Class="Content">
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Image File="img/location-image.jpg"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
        <Text Value="I'm a text"/>
    </StackPanel>

    <ScrollView ux:Class="ScrollContent">
        <StackPanel>
            <Each Count="10">
                <Content/>
            </Each>
        </StackPanel>
    </ScrollView>

    <DockPanel>
        <CardPage Y="50" Height="100%" Width="100%">

        </CardPage>
    </DockPanel>
</App>
7

poul.kg@gmail.com wrote:

  • Another question: Is that possible to specify clipping mask using some curves?

No, shapes in Fuse are not clipping masks. All you have is Mask.

And, still, what you’ve done is neither effective nor recommended.

8

Uldis

thanks for you notes about impact on performance