sample controls

show toc

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

This document contains the following sections.

hyperlink example

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

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

button example

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

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

slider example

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

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