Drawing a Button

The XAML language has a Button element, but this one does not seem to belong to Silverlight, in version 1.0 at least, and thus cannot be used for a Web application. One 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, one can as well draw our own buttons.

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:

Complete files:

• XAML Code.
• The Javascript code.