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">
<Rectangle Fill="#ccc" Height="200" Width="200" CornerRadius="15" ClipToBounds="true">
<Image File="Assets/background1.png" StretchMode="Scale9" />
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
ImageFill creates a brush that can be used on shapes, such as:
<Rectangle CornerRadius="15"> <ImageFill File="Assets/background1.png" StretchMode="UniformToFill"/>
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"/>
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).
thanks @edA-qa mort-ora-y