Create button using XAML

A simple example of creating a graphical component to extend the XAML language.

XAML has a Button element, but this one does not seem to be part of Silverlight, at least in version 1.0, and therefore cannot be used for a web application. In fact, you could use the HTML element <input type = "button">, but in this case the application will only work with the browser.
To have buttons that are common to Web applications and local applications, you can also draw your own buttons.

Drawinger button

Return the rectangle code to the rounded edges:

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

The resulting button frame is below:



To decorate the button, you need to remove the color property and open a more complex tag. When you convert a property to a tag, you can set the color using the SolidColorBrush tag:

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

The picture remains the same:


Now add a color gradient, light in the upper left corner, dark in 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>

Add text

To add text that cannot be made in a rectangle, we will create an internal Canvas, and it is in this Canvas that we will align Rectangle and TextBlock.

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

Labeled button:


Definition of interaction

To add control over user actions, JavaScript functions are created that are associated with the Canvas of our button.
When the mouse:
- switches to the button (MouseEnter), a black frame appears,
-And disappears when you exit the surface (MouseLeave ).
- When the button (MouseLeftButtonDown) is pressed, the button on the screen is shifted, an action is performed, in this case, a message appears in our example, after which the button becomes normal again.
- When the mouse button (MouseLeftButtonUp) is released or the action is performed, the button returns to its normal position.

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

To slide a button onto a page and simulate a pressed button, the Canvas of the button, which contains both rectangle and text, is shifted.
To do this, we will have to use the new RenderTransform property, which allows us to perform various transformations on the object, but here all we are interested in is moving the coordinates.
To do this, we give the tag a name, "addoffset," which will be used in JavaScript code.

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

You can click the button below:

Complete files