CODEWITHSUNDEEP
c#windows-phone-8.1
Paweł Miczka
Paweł Miczka

Reputation: 145

Image with rounded corner

I want to ask you what should I do to round a corner of 'Image' control. I tried but it's not working. Here's code:

EllipseGeometry elipse = new EllipseGeometry();
elipse.Center = new Point(16, 16);
elipse.RadiusX = 32;
elipse.RadiusY = 32;
//
//
//
firstSpellImage.Clip = elipse;

where firstSpellImage is instance of Image class. This Image has 32x32 size.

Upvotes: 1

Views: 2726

Answers (1)

Muhammad Saifullah
Muhammad Saifullah

Reputation: 4292

You need to add image brush in border background, and round any of the corner of the border control. Here is how.

  <Border HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="100"  Height="100" BorderBrush="White" BorderThickness="1"
                               CacheMode="BitmapCache" CornerRadius="40,0,30,0"><!-- left-top and bottom-right round corners. -->
        <Border.Background>
            <ImageBrush ImageSource="https://bushrasbrilliantblog.files.wordpress.com/2014/10/placid_nature.jpg"  Stretch="Fill"></ImageBrush>
        </Border.Background>
    </Border>

Hope this helps

Edit Round corner image in widows phone win-RT in C#

Here you need to use imagebrush instead of image

Border border = new Border();
border.Width = 200d;
border.Height = 200d;
border.CornerRadius = new CornerRadius(0, 100, 0, 100);
border.BorderBrush = new SolidColorBrush(Windows.UI.Colors.Green);
border.BorderThickness = new Thickness(2.5d);

ImageBrush img = new ImageBrush();
img.ImageSource = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("https://bushrasbrilliantblog.files.wordpress.com/2014/10/placid_nature.jpg", UriKind.RelativeOrAbsolute));
img.Stretch = Stretch.Fill;
border.Background = img;

LayoutRoot.Children.Add(border);

Upvotes: 1

Related Questions