Creating a custom button in XAML

The XAML language has a Button element, but for a Web application you could create your own custom version.

You could also makes use of the <input type="button"> element of HTML, but in this case the application will work only with a browser. To have buttons common to Web applications and desktop software, you have to create yours.

Drawing the shape

One takes again the code of the rectangle with the rounded corners:

<Rectangle
  Canvas.Top="4"
  Canvas.Left="4"
  Height="20"
  Width="80"
  Fill="LightGray"
  Stroke="Black"
  StrokeThickness="1" 
  RadiusX="4"
  RadiusY="4"
/>

One obtains the shape of the button below:


To embellish the button it is necessary to remove the color property and to open tag for a more elaborate design. When one thus transforms the property into tag, the color can be given with the SolidColorBrush tag:

<Rectangle.Fill>
    <SolidColorBrush Color="LightGray" />
</Rectangle.Fill>

The image remains the same one:


Now shaded colors are added with gradients, clear in top left corner, dark to the opposite corner:

<Rectangle.Fill>
    <LinearGradientBrush >
         <GradientStop Color="White" Offset="0.0" />
         <GradientStop Color="LightGray" Offset="0.20" />
         <GradientStop Color="Gray" Offset="0.9" />
         <GradientStop Color="LightGray" Offset="0.20" />
    </LinearGradientBrush>
</Rectangle.Fill>

Adding a text

To add a text, which cannot be made inside a rectangle, one creates an inner Canvas and it is inside this Canvas where one will align the Rectangle and TextBlock.

<Canvas>
    <Canvas>
        <Rectangle Canvas.Top="4" Canvas.Left="4" >
        </Rectangle>
        <TextBlock Canvas.Left="14" Canvas.Top="6">
              Click
        </TextBlock>
     </Canvas>
</Canvas>

The button equipped now with a label:


Defining an interaction

To add a handling of user's actions, one creates JavaScript functions that are associated to the Canvas of our button.
When the mouse:
- is on the button (MouseEnter), a black edge appears,
- and it disappears when it leaves the surface (MouseLeave).
- When one clicks on the button (MouseLeftButtonDown), the button is shifted on the screen, some action is performed, a message is displayed in our example, then the button retrieves its normal aspect.
- When the mouse button is released (MouseLeftButtonUp), or after the execution of the action, the button takes again the normal position.

<Canvas
	MouseLeftButtonDown="buttonDown"
	MouseLeftButtonUp="buttonUp"
	MouseEnter="buttonEnter"
	MouseLeave="buttonLeave"
	>

To shift the button on the page and to simulate a pressed button, the Canvas of the button, which contains both the rectangle and the text, is shifted.
For that, it will be necessary for us to use a new property, RenderTransform, which makes it possible to perform various transformations on an object, but all that interests us here, it is the translation of co-ordinates.
For that we give a name to the tag, "addoffset" which will be used in the JavaScript code.

<Canvas.RenderTransform>
    <TransformGroup>
           <TranslateTransform x:Name="addoffset" X="0" Y="0"/>
    </TransformGroup>
</Canvas.RenderTransform>

You can click on the button below:

Full source code

See also