Month / October 2008

by Chris Cavanagh

ASP.NET Routing revisited (again)

I’ve updated my ASP.NET 3.5 + System.Web.Routing sample based on some great feedback and questions.  It’s much simpler and gives a better example of how routes can be configured.  It now uses Phil Haack’s excellent WebFormRouteHandler class, which is much more versatile than my unnecessarily generic one 🙂

You can run the sample here and grab the source code here and on CodePlex (I love the fact it supports SVN now).

The sample pages derive from a custom ‘RoutablePage’ class, but that’s not mandatory.  For simple routing, you can just derive from Page as usual.

If you’d like to use RequestContext’s GetVirtualPath method (to automatically build URLs based on defined routes) your page can implement IRoutablePage (or derive from RoutablePage which includes some useful helper methods).

by Chris Cavanagh

WPF – Easy rounded corners for anything

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="https://chriscavanagh.wordpress.com/wp-content/uploads/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