WPF: images with rounded corners

Question

<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 WPF XAML is Lightweight rounded corners for anything , but it doesn't work. 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 border sizes automatic and change image source to image from link
when the size of the loaded border of the window becomes the size of the image, but the image is not displayed !!!

Answer 1

You forgot the grid, which forces the mask and images of brothers and nested images into the mask. and you forgot to set the mask background.

It 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> 

Answer 2

in wpf it 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> 

Answer 3

 <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> 

Answer 4

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

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