CODEWITHSUNDEEP
win-universal-appwindows-10
Quincy
Quincy

Reputation: 1730

win10 app - Rounded corner images keeping aspect ratio

Simple app that just displays a list of images. The list of images must keep there aspect ratio, but be full window width + a bit of margin. The hard part is making the images additionally have rounded corners.

Ideas?

Only success I have had is with ImageBrush, but any control using that doesn't keep the aspect ratio. For example, here you must set the height and width.

<Rectangle RadiusX="10" RadiusY="10" Stretch="Fill" Width="100" Height="100" >
    <Rectangle.Fill>
         <ImageBrush ImageSource="{Binding}"></ImageBrush>
     </Rectangle.Fill>
</Rectangle>

full source here: http://1drv.ms/1HlZHVe

Upvotes: 3

Views: 1241

Answers (2)

Mostafa Bagheri
Mostafa Bagheri

Reputation: 413

Hi you can use the following code to create a rounded corner image in UWP:

<Ellipse Width="250" Height="250">
    <Ellipse.Fill>
        <ImageBrush ImageSource="ms-appx:///highfive.jpg" />
    </Ellipse.Fill>
</Ellipse>

Upvotes: 0

Adrian K
Adrian K

Reputation: 10227

I got nicely rounded corners on my images (in my UWP app) by using an ImageBrush, however be careful if you do this programmatically - the first time I did I managed to use my memory rather poorly and consumed too much (poor coding).

I was using the ImageBrush much as you seem to be, but I wasn't getting any distortion of the aspect ratio; make sure you're setting properties like Stretch appropriately - e.g. Stretch.UniformToFill.

<Rectangle x:Name="rctCardFace" Margin="0"  RadiusX="20" RadiusY="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Rectangle.Fill>
        <ImageBrush Stretch="UniformToFill"/>
    </Rectangle.Fill>
</Rectangle>

Or in C#

Uri path = new Uri(_ActiveStyle.BackgroundImagePath, UriKind.Absolute);
BitmapImage bitmapImage = new BitmapImage(path);

if (_AppReference.CardManager.TempImgBrush == null)
{
  _AppReference.CardManager.TempImgBrush = new ImageBrush();
}

_AppReference.CardManager.TempImgBrush.ImageSource = bitmapImage;
_AppReference.CardManager.TempImgBrush.Stretch = _ActiveStyle.BackgroundImageStretch;
_AppReference.CardManager.TempImgBrush.AlignmentX = _ActiveStyle.BackgroundImageAlignX;
_AppReference.CardManager.TempImgBrush.AlignmentY = _ActiveStyle.BackgroundImageAlignY;
cfPreview.ImgB = _AppReference.CardManager.TempImgBrush;

Upvotes: 0

Related Questions