Wednesday, 27 July 2011

Creating a XAML Rubber Stamp

This post illustrates how to create a rubber stamp to use in WPF applications.  We'll first create a textured background in Inkscape do draw our 'stamp' with.  We'll then save the texture as a PNG and then use that image as an ImageBrush to paint a rectangle border with some wording within.  We'll give the border a bit of rounding and then finish it off with a RotateTransform to make it look genuine.  We'll end up with this:

Prerequisites:
  1. Inkscape
  2. MSPaint
  3. Visual Studio

 First, we'll create the background (you can skip this section and just download StampBrush.png):
  1. Open Inkscape.
  2. Key F4 to select the Rectangle tool and create a rectangle roughly the same size as the document.
  3. Bring up the Fill and Stroke window (Ctrl-Shift-F).
  4. Under the 'Fill' tab, click the 'Flat Color' button and enter a value of 170 for R.
  5. File -> Properties -> Resize page to Content.
  6. Key F1 to select the Selector tool, and select the rectangle drawing.
  7. Ensure the drawing is zoomed to 100% (bottom right corner of screen).
  8. Filters -> Overlays -> Rubber Stamp.
  9. Take a screenshot (Alt-PrntScrn).
  10. Open MSPaint, and paste the screenshot onto the canvas.
  11. Move and crop the image so that only the textured effect is visible on the canvas.
  12. Save the image as StampBrush.png.
Now that we have the background, we'll create the border and text in WPF:
  1. Open Visual Studio and create a new WPF project.
  2. Copy StampBrush.png into your project.
  3. Open MainWindow.xaml, and copy the following attribute into the Window element:
xmlns:system="clr-namespace:System;assembly=mscorlib"
  1. replace the Grid element with the below XAML:
    <Viewbox>
        <Canvas Width="250" Height="320">
            <Canvas.Resources>
                <ImageBrush x:Key="stampBrush" ImageSource="StampBrush.png" Stretch="None" />
                <system:String x:Key="StampText">SAMPLE</system:String>
            </Canvas.Resources>
            <WrapPanel Canvas.Top="0" Canvas.Left="70">
                <WrapPanel.RenderTransform>
                    <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
                </WrapPanel.RenderTransform>
                <Border BorderBrush="{StaticResource stampBrush}" BorderThickness="6" Margin="10" Padding="10,0,10,0" CornerRadius="3">
                    <TextBlock Foreground="{StaticResource ResourceKey=stampBrush}" FontSize="72" FontWeight="Bold" Text="{StaticResource StampText}"></TextBlock>
                </Border>
            </WrapPanel>
        </Canvas>
    </Viewbox>

That's it!  Hit F5 and you'll have a window with a stamp in it.  From here you can copy the Viewbox into a UserControl or make it a resource for use in your apps.

If you wish, you can reduce the size of the bitmap by opening StampBrush.png in MSPaint and cropping it down to the actual size of your stamp.

Of course, you can skip all the above steps and just download the demo project.

No comments:

Post a Comment