Создать кнопку с помощью XAML

Простой пример создания графического компонента для расширения языка XAML.

В языке XAML есть элемент Button, но этот, кажется, не является частью Silverlight, по крайней мере, в версии 1.0, и поэтому не может использоваться для веб-приложения. На самом деле можно было бы использовать элемент HTML <input type = «button»>, но в этом случае приложение будет работать только с браузером.
Чтобы иметь кнопки, общие для веб-приложений и локальных приложений, можно также нарисовать собственные кнопки.

Drawinger кнопка

Возвращаем код прямоугольника к скругленным краям:

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

Получается рамка кнопки ниже:



Чтобы украсить кнопку, необходимо удалить свойство цвета и открыть более сложный тег. При преобразовании свойства в тег цвет можно задать с помощью тега SolidColorBrush:

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

Картина остается прежней:


Теперь добавляем цветовой градиент, светлый в верхнем левом углу, темный в противоположном углу:

<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>

Добавить текст

Чтобы добавить текст, который нельзя сделать в прямоугольнике, мы создадим внутренний Canvas, и именно в этом Canvas мы выровняем Rectangle и TextBlock.

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

Кнопка с меткой:


Определение взаимодействия

Для добавления управления действиями пользователя создаются функции JavaScript, связанные с Canvas нашей кнопки.
Когда мышь :
- переключается на кнопку (MouseEnter), появляется черная рамка,
- и исчезает при выходе из поверхности (MouseLeave).
- При нажатии кнопки (MouseLeftButtonDown) кнопка на экране смещается, выполняется действие, в данном случае в нашем примере появляется сообщение, после чего кнопка снова становится нормальной.
- при отпускании кнопки мыши (MouseLeftButtonUp) или после выполнения действия кнопка возвращается в нормальное положение.

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

Чтобы сдвинуть кнопку на страницу и имитировать нажатую кнопку, Canvas кнопки, которая содержит и прямоугольник, и текст, смещается.
Для этого нам придется использовать новое свойство RenderTransform, позволяющее выполнять различные преобразования на объекте, но здесь все, что нас интересует, - это перемещение координат.
Для этого мы даем тегу имя, «addoffset», которое будет использоваться в коде JavaScript.

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

Вы можете нажать кнопку ниже:

Полные файлы