ukážkové komponenty

ukážka hyperlink

Nasledujúca ukážka vytára hyperlink z objektov TextBlock a Line.

[skryť 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>

[skryť 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;
}

[skryť] [reštart]

Poznámka   Toto je alternatívna cesta ako vytvoriť hyperlink, ktorý je viac jednoduchý. Pozrite sa v dokumentácii vlastnosť TextDecorations objektu TextBlock v Silverlight SDK.

ukážka button (tlačítko)

Nasledujúca ukážka vytvára tlačítko z dvoch objektov Rectangle a TextBlock.

[skryť 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>

[skryť 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;
    }
}

[skryť] [reštart]

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