UPDATE: Silverlight 3 joins in the fun!
After my enormously successful WPF – Easy rounded corners for anything post(really!), I’ve had some questions about cropping corners of an image with its own transparency.
Since we’re using an OpacityMask, you can do far more than define basic on/off geometry. There’s nothing stopping you using an image as part of the mask too…
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock FontSize="128" HorizontalAlignment="Center" VerticalAlignment="Center">hello world!</TextBlock> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Border Name="mask" CornerRadius="20" Background="White"> <Border.OpacityMask> <ImageBrush ImageSource="SampleAlpha.png" Stretch="UniformToFill"/> </Border.OpacityMask> </Border> <Image Source="e:\Scribble\temp\SampleAlpha.png"> <Image.OpacityMask> <VisualBrush Visual="{Binding ElementName=mask}"/> </Image.OpacityMask> </Image> </Grid> </Grid> </Page>
Here’s the result:
Click here or the image above to try it out. Notice as you resize the window the clipped corners maintain the same radius…
[…] October 3, 2008 · 14 Comments UPDATES: > You can see another simple example here. > Why stop at simple geometry masks? Howabout images with holes? […]
[…] WPF Rounded Corners – and holes! (Chris Cavanagh) […]