sample controls

This document contains several examples that show how to use Silverlight to create interactive controls.

This document contains the following sections.

hyperlink example
button example
slider example

hyperlink example

The following example creates a hyperlink from a TextBlock and a Line.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <!-- Hyperlink -->
  <Canvas Width="90" Height="30" Canvas.Left="20" Canvas.Top="20"
     Background="transparent"
     Cursor="Hand"
     MouseEnter="hyperlink_MouseEnter"
     MouseLeave="hyperlink_MouseLeave"
     MouseLeftButtonDown="hyperlink_MouseLeftButtonDown">
    <TextBlock Text="hyperlink" Foreground="Blue"/>
    <Line Stroke="blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
       x:Name="hyperlink_line" Opacity="0"/>
  </Canvas>
</Canvas>

[hide JavaScript]

function hyperlink_MouseLeftButtonDown(sender, args) {
    window.location = "about-frames.html";
}

function hyperlink_MouseEnter(sender,args)
{
    sender.findName("hyperlink_line").opacity = 1;
}

function hyperlink_MouseLeave(sender,args)
{
    sender.findName("hyperlink_line").opacity = 0;
}

[hide] [restart]

button example

The following example creates a button from two Rectangle elements and a TextBlock.

[hide XAML]

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <!-- Button -->
  <Canvas
      x:Name="button"
      Canvas.Top="10" Canvas.Left="20"
      MouseLeftButtonDown="button_MouseLeftButtonDown"
      MouseLeftButtonUp="button_MouseLeftButtonUp"
      MouseEnter="button_MouseEnter"
      MouseLeave="button_MouseLeave">
    <Canvas.RenderTransform>
      <TransformGroup>
        <TranslateTransform x:Name="button_transform" X="0" Y="0"/>
      </TransformGroup>
    </Canvas.RenderTransform>
    <Rectangle Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474"
        Width="128.8" Height="56" x:Name="button_rectangle"/>
    <Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966" StrokeThickness="5"
        Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
        Opacity="0"
        x:Name="button_highlight"/>
    <TextBlock Text="Press me!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>
  </Canvas>
</Canvas>

[hide JavaScript]

var mouseOver = false;
var pressed = false;

function button_MouseLeftButtonDown(sender,args) {
    sender.captureMouse();
    mouseOver = true;
    pressed = true;
    updateVisuals(sender);
}

function button_MouseLeftButtonUp(sender,args) {
    sender.releaseMouseCapture();
    pressed = false;
    
    updateVisuals(sender);
    
    if (mouseOver) {
        alert("you pressed the button!");
    }
}

function button_MouseEnter(sender,args) {
    mouseOver = true;
    updateVisuals(sender);
}

function button_MouseLeave(sender,args) {
    mouseOver = false;
    updateVisuals(sender);
}

function updateVisuals(sender) {
    //background
    if (pressed && mouseOver) {
        sender.findName("button_rectangle").fill = "sc#1, 0.548430264, 0.5354195, 0.5354195";
        var transform = sender.findName("button_transform");
        transform.x = 2;
        transform.y = 2;
    } else {
        sender.findName("button_rectangle").fill = "sc#1, 0.8123474, 0.8123474, 0.8123474";
        var transform = sender.findName("button_transform");
        transform.x = 0;
        transform.y = 0;
    }
    
    // highlight
    if (mouseOver || pressed) {
        sender.findName("button_highlight").opacity = 1;
    } else {
        sender.findName("button_highlight").opacity = 0;
    }
}

[hide] [restart]

slider example

The following example creates a slider from a Line and a Path.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="slider_Loaded">
  <!-- Slider -->
  <Canvas x:Name="slider" 
     Canvas.Top="50" Canvas.Left="20" Width="200" Height="45"
     Background="transparent">
      
    <Line x:Name="slider_line" 
       Stroke="black" StrokeThickness="1" 
       X1="0" Y1="25" X2="200" Y2="25" />

    <Rectangle 
       Fill="Transparent" 
       Width="200" Height="45" 
       MouseLeftButtonDown="slider_MouseLeftButtonDown" />        
        
    <Path x:Name="slider_thumb"  Stroke="#FF000000" 
       Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
       Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
  </Canvas>
</Canvas>

[hide JavaScript]

var mouseDownPosition = 0;
var mouseDownValue = -1;
var thumbCenter = 5.75;

function slider_Loaded(sender, args) {
    slider_SetValue(sender, 0);
}

function slider_MouseLeftButtonDown(sender, args) {
    
    var coordinate = args.getPosition(null).x;
    var slider = sender.findName("slider");
    coordinate -= slider["Canvas.Left"];
    slider_SetValue(slider, coordinate - thumbCenter);  
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
    var slider = sender.findName("slider");
    sender.captureMouse();
    mouseDownValue = slider_GetValue(slider);
    mouseDownPosition = args.getPosition(null).x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
    var slider = sender.findName("slider");
    slider.releaseMouseCapture();
    mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
    var slider = sender.findName("slider");
    if (mouseDownValue != -1) {
        var newValue = mouseDownValue + (args.getPosition(null).x - mouseDownPosition);    
        slider_SetValue(slider, newValue);
    }   
}

function slider_GetValue(sender) {
    var thumb = sender.findName("slider_thumb");
    return thumb["Canvas.Left"]; 
}

function slider_SetValue(sender, newValue) {
    
    if (newValue > sender.width ) {
        newValue = sender.width;
        mouseDownValue = -1;
    }
    if (newValue < - thumbCenter) {
        newValue = - thumbCenter;
        mouseDownValue = -1;
    }
    var thumb = sender.findName("slider_thumb");
    
    thumb["Canvas.Left"] = newValue;
}

[hide] [restart]