sample controls

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]

Note   There is an alternative way to create a hyperlink that might be more convenient. See the documentation for TextDecorations property of the TextBlock object in the Silverlight SDK.

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]

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