CODEWITHSUNDEEP
wpfxamlrounded-corners
Ahmed Ghoneim
Ahmed Ghoneim

Reputation: 7067

WPF : Rounded-Corners Images

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="Black">
    <!-- Rounded yellow border -->
    <Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2"
        HorizontalAlignment="Center" VerticalAlignment="Center">
      <Grid>
         <!-- Rounded mask (stretches to fill Grid) -->
         <Border Name="mask" Background="White" CornerRadius="7"/>
         <!-- Main content container -->
         <StackPanel>
             <!-- Use a VisualBrush of 'mask' as the opacity mask -->
             <StackPanel.OpacityMask>
                 <VisualBrush Visual="{Binding ElementName=mask}"/>
             </StackPanel.OpacityMask>
             <!-- Any content -->
             <Image Source="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/>
             <Rectangle Height="50" Fill="Red"/>
             <Rectangle Height="50" Fill="White"/>
             <Rectangle Height="50" Fill="Blue"/>
         </StackPanel>
      </Grid>
    </Border>
</Page>

This XAML is from WPF – Easy rounded corners for anything but it doesn't work form me =(

<Border Canvas.Left="55"
        Canvas.Top="30"
        Width="100"
        Height="Auto"
        Margin="12,12,8,0"
        VerticalAlignment="Top"
        BorderBrush="#FF3B5998"
        BorderThickness=".5"
        CornerRadius="18">
    <Border.Effect>
        <DropShadowEffect BlurRadius="5"
                          Opacity=".5"
                          ShadowDepth="3" />
    </Border.Effect>
    <Border Name="ReceiverColor"
            BorderBrush="#FF96B2E4"
            BorderThickness="6"
            CornerRadius="15">
        <Border Name="Mask"
                BorderBrush="#FF3B5998"
                BorderThickness=".5"
                CornerRadius="13">
                <StackPanel>
                    <StackPanel.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=Mask}" />
                    </StackPanel.OpacityMask>
                    <Image Name="Receiver" />
                </StackPanel>
        </Border>
    </Border>
</Border>

--- EDIT ---
I make borders sizes to auto and change source of image to an image from a link
when window loaded border size becomes as image size but image not shown !!!

Upvotes: 19

Views: 46689

Answers (6)

Ayush Kumar
Ayush Kumar

Reputation: 111

None of the above answers worked for me completely. I was trying to implement rounded corners on image which could be resized and has properties Stretch="UniformToFill" VerticalAlignment="Center" and HorizontalAlignment="Center". The center alignments keeps the middle part cropped as opposed to bottom and right side being cropped, when image is resized. Solutions with image brush were working but I was facing problem in keeping the content at center cropped.

The marked answer has a problem with transparent non rectangular images as the "mask" border will end up showing as white background. Following was the imlementation which worked for me:

<Grid>
    <WrapPanel Name ="container">
        <Image Source="sample_image.png" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="UniformToFill"/>
        <WrapPanel.OpacityMask>
            <VisualBrush >
                <VisualBrush.Visual>
                    <Border Height="{Binding ElementName=container, Path=ActualHeight}" 
                            Width="{Binding ElementName=container, Path=ActualWidth}"
                            Background="White" CornerRadius="15" />
                </VisualBrush.Visual>
            </VisualBrush>
        </WrapPanel.OpacityMask>
    </WrapPanel>
</Grid>

Upvotes: 7

TERIHAX
TERIHAX

Reputation: 255

You can use an ellipse like how Usman Ali has said (I thought this myself and I didn't take it from him)

It's very simple, make an ellipse with the properties you want, then set the fill to an imagebrush with your desired image like this in XAML:

<Ellipse Height="Auto" Width="100">
    <Ellipse.Fill>
        <ImageBrush ImageSource="YOUR IMAGE SOURCE/LINK HERE"/>
    </Ellipse.Fill>
</Ellipse>

In C#, if in any case you want to do in C#:

Ellipse YourEllipseName = new Ellipse
{
    Height = 50,
    Width = 50,
    StrokeThickness = 0,
    Fill = new ImageBrush
    {
        Stretch = Stretch.Uniform,
        ImageSource = new BitmapImage(new Uri("YOUR IMAGE SOURCE HERE"))
    }
};

Upvotes: 2

Sadra M.
Sadra M.

Reputation: 1532

You can define a <Border/> element and set its <Border.Background/> property to an <ImageBrush/> , set the Borders CornerRadius property and you are all set! 

<Border CornerRadius="8,0,8,0">
    <Border.Background>
        <ImageBrush Stretch="Fill" ImageSource="ImageSource"/>
    </Border.Background>
</Border>

Upvotes: 50

Gusts Linkevics
Gusts Linkevics

Reputation: 11

<Grid Background="Black">
<Rectangle RadiusX="20" RadiusY="20"
Width="130"
Height="130">
<Rectangle.Fill>
<ImageBrush x:Name="myImage" ImageSource="C:\Path\Desktop\visual-studio-2010-logo.png"/>
</Rectangle.Fill>
</Rectangle>
</Grid>

Upvotes: 1

Usman Ali
Usman Ali

Reputation: 818

in wpf this one works for me 

    <Ellipse Width="50" Height="50">
        <Ellipse.Fill>
            <ImageBrush ImageSource="http://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg" />
        </Ellipse.Fill>
     </Ellipse>

Upvotes: 13

Emond
Emond

Reputation: 50672

You forgot the Grid that makes the mask and the image siblings and nested the image in the mask. and you forgot to set the background of the mask.

This works:

<Grid>
    <Border Canvas.Left="55"
            Canvas.Top="30"
            Width="100"
            Height="Auto"
            Margin="12,12,8,0"
            VerticalAlignment="Top"
            BorderBrush="#FF3B5998"
            BorderThickness=".5"
            CornerRadius="18">
        <Border.Effect>
            <DropShadowEffect BlurRadius="5"
                              Opacity=".5"
                              ShadowDepth="3" />
        </Border.Effect>
        <Border Name="ReceiverColor"
                BorderBrush="#FF96B2E4"
                BorderThickness="6"
                CornerRadius="15">
            <Grid>
                <Border Name="Mask"
                        Background="White"
                        BorderBrush="#FF3B5998"
                        BorderThickness=".5"
                        CornerRadius="13">
                </Border>
                <StackPanel>
                    <Image Name="Receiver"
                           Source="/Images/test.jpg" />
                    <StackPanel.OpacityMask>
                        <VisualBrush Visual="{Binding ElementName=Mask}" />
                    </StackPanel.OpacityMask>
                </StackPanel>
            </Grid>
        </Border>
    </Border>
</Grid>

Upvotes: 28

Related Questions