Image & Corner Radius

Bug Reports
1

Hi,

when we put a image in a Rectangle with CornerRadius and ClipToBounds=“true”, we don’t have the expected behavior as the Image doesn’t get that CornerRadius.

Can be reproducted with only this UX :

<App Theme="Basic" Background="#eeeeeeff">
    <DockPanel>
        <Rectangle Fill="#ccc" Height="200" Width="200" CornerRadius="15" ClipToBounds="true">
            <Image File="Assets/background1.png" StretchMode="Scale9" />
        </Rectangle>
    </DockPanel>
</App>

Cheers !

2

Adding an Image to a Rectangle simply adds it as a child. Rectangle is like any other Panel and can have children; it will not clip it’s children.

To get an image with rounded corners you can use ImageFill or the Mask effect.

ImageFill creates a brush that can be used on shapes, such as:

<Rectangle CornerRadius="15">    <ImageFill File="Assets/background1.png" StretchMode="UniformToFill"/>
</Rectangle>

Unfortunately not all StretchMode options are supported on ImageFill -- in particular Scale9 does not work.

The other option is to create a rounded rectangle mask image:

<Image File="Assets/background1.png" StretchMode="Scale9">
    <Mask File="Assets/rounded_rect.png" Mode="Alpha"/>
</Image>

Using an image can be limiting in some cases, but it works now. We have some other pending feature requests that would make arbitrary masking a bit easier (such as using a Rectangle as a mask instead of an image).

3

thanks @edA-qa mort-ora-y