Layouten mit Silverlight

Da es momentan nur den Canvas als Layout-Container für Silverlight gibt, muss sich selber Gedanken über das Anordnen von Element in Silverlight machen. Das ist relativ einfach.

Die kleine Beispielanwendung (Blaues Rechteck) passt die Größe des Silverlight-Controls automatisch an die Größe des Browserfensters an. Das innere schwarze Rechteck wiederum wird automatisch unten angeordnet, egal wie groß gerade das Fenster ist.

Der Javascript-Code dazu ist recht einfach:

 _0_Base.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        
        // Sample button event hookup: Find the button and then attach event handlers
        this.text = rootElement.children.getItem(0);    
        
        plugIn.content.onResize = onResized;        
    }
}

function onResized (sender, eventArgs)
{
    updateLayout(sender);
}

function updateLayout(sender)
{
    var plugIn = sender.getHost();
    var offset = 20;
    
    var MainContainer = plugIn.content.findName("MainContainer");
    var SmallContainer = plugIn.content.findName("SmallContainer");
    
    MainContainer.Width = plugIn.content.actualWidth;
    MainContainer.Height = plugIn.content.actualHeight;
    
    SmallContainer.Width = MainContainer.Width - 2*offset;
    SmallContainer.setValue("Canvas.Top", MainContainer.Height - SmallContainer.Height - offset);
    
}

Die gesamte Beispielanwendung gibt es hier.