UPDATES:
> You can see another simple example here.
> Why stop at simple geometry masks?  Howabout images with holes? :)
> Why stop at WPF?  Here’s a Silverlight 3 version!

WPF’s Border element allows you to specify a different radius for each corner.  Unfortunately it doesn’t clip content to fit inside the boundary (example here and below):

image

While there are other solutions, this one is my favorite so far:

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

All it does is include a ‘mask’ Border element as a sibling of the content you want to clip.  In the content it uses a VisualBrush bound to that mask.  The mask will be automatically sized to your content, so it’s a nice "set and forget" solution :)

The downside is it won’t work in Silverlight because ElementName binding isn’t supported (yet). No doubt it’s possible to assign the VisualBrush in code-behind though! (let me know if you try it). (oops, neither is VisualBrush!).  There’s now a Silverlight version here!

Hope this helps (and please let me know of any better / cleaner solutions).

kick it
About these ads