Silverlight - CSS
Poiché il contenuto di Silverlight viene sempre eseguito all'interno di una pagina Web, il tag object è soggetto alle normali regole di layout CSS. Non c'è modo per il plug-in di reinserire una dimensione preferita nel browser, quindi indipendentemente dalle dimensioni che il contenuto Silverlight potrebbe desiderare, le sue dimensioni e posizione saranno interamente determinate dalla pagina web che lo contiene.
Il modello di progetto Silverlight predefinito inserisce CSS nella pagina Web che assegna al tag oggetto l'intera finestra del browser.
Il codice XAML predefinito sembra avere una dimensione fissa, ma se guardi da vicino, vedrai che il modello imposta la larghezza del progetto e le proprietà dell'altezza del progetto.
Questi indicano a Visual Studio, o Blend, quanto grande dovrebbe apparire l'interfaccia utente nella finestra di progettazione, ma consentono il ridimensionamento in fase di esecuzione.
In Solution Explorer vedrai {project name}TestPage.html file, che è l'HTML predefinito che ottieni quando crei un nuovo progetto Silverlight in Visual Studio come mostrato di seguito.
Il CSS in alto qui, imposta l'HTML e lo stile del corpo al 100%, il che può sembrare un po 'strano.
Ecco il file html completo, che contiene diverse impostazioni.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<title>FirstExample</title>
<style type = "text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type = "text/javascript" src = "Silverlight.js"></script>
<script type = "text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
} else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<form id = "form1" runat = "server" style = "height:100%">
<div id = "silverlightControlHost">
<object data = "data:application/x-silverlight-2,"
type = "application/xsilverlight-2" width = "100%" height = "100%">
<param name = "source" value = "ClientBin/FirstExample.xap"/>
<param name = "onError" value = "onSilverlightError" />
<param name = "background" value = "white" />
<param name = "minRuntimeVersion" value = "5.0.61118.0" />
<param name = "autoUpgrade" value = "true" />
<a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
style = "textdecoration:none">
<img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
alt = "Get Microsoft Silverlight" style = "border-style:none"/>
</a>
</object>
<iframe id = "_sl_historyFrame" style = "visibility:hidden;height:0px;
width:0px;border:0px"></iframe>
</div>
</form>
</body>
</html>Guardando il file silverlightControlHost, dobbiamo assicurarci che abbia un'altezza fissa, ad esempio 300 pixel e una larghezza di 400 pixel, che corrisponda alla larghezza e all'altezza del design predefinite nel codice XAML. È inoltre possibile modificare queste impostazioni in base ai requisiti dell'applicazione.
Contenuti sovrapposti
Per impostazione predefinita, i contenuti Silverlight e HTML non possono condividere lo stesso spazio sullo schermo. Se crei un contenuto da entrambi, in modo che occupino lo stesso spazio, sarà visibile solo il contenuto di Silverlight.
Questo perché, per impostazione predefinita, Silverlight chiederà al browser la propria finestra privata, eseguendo il rendering di tutto il contenuto in quella. È una finestra figlia all'interno del browser, quindi sembra una parte della pagina web, ma impedisce la sovrapposizione del contenuto.
La ragione principale di ciò è la prestazione. Ottenendo la propria area privata sullo schermo, Silverlight non deve coordinare il suo rendering con un browser web.
Tuttavia, a volte è utile avere un contenuto sovrapposto. C'è un prezzo da pagare per la performance. Potresti scoprire che le animazioni non vengono eseguite in modo uniforme quando Silverlight e HTML condividono lo spazio sullo schermo, ma la flessibilità extra del layout potrebbe valere il prezzo. Per utilizzare il contenuto sovrapposto, è necessario abilitare la modalità senza finestre.
In modalità senza finestre, il plug-in Silverlight esegue il rendering sullo stesso gestore di finestre di destinazione del browser consentendo al contenuto di mescolarsi.
L'indice Zed o l'indice Z è significativo quando i contenuti si sovrappongono. Per quanto riguarda l'HTML, il contenuto di Silverlight è un singolo elemento HTML, quindi appare esattamente in un punto nell'ordine Z dell'HTML.
Ciò ha un impatto sulla gestione del mouse. Se il plug-in Silverlight si trova all'inizio dell'ordine Z HMTL, qualsiasi attività del mouse in qualsiasi punto all'interno del riquadro di delimitazione verrà inviata al plug-in.
Anche se alcune aree del plug-in sono trasparenti e puoi vedere l'HTML dietro, non sarai in grado di fare clic su di esso.
Tuttavia, se si dispone che l'indice Z con alcuni contenuti HTML sia in primo piano, continuerà a essere interattivo anche quando si sovrappone al contenuto Silverlight.
Esempio
Dai un'occhiata al semplice esempio riportato di seguito in cui abbiamo un layout con un contenitore, in cui tre div sono stati tutti disposti in modo da sovrapporsi all'interno di questo div contenente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlOverlap</title>
<style type = "text/css">
#container {
position: relative;
height: 300px;
font-size: small;
text-align:justify;
}
#silverlightControlHost {
position: absolute;
width: 400px;
height: 300px;
}
#underSilverlight {
position: absolute;
left: 4px;
width: 196px;
}
#overSilverlight {
position: relative;
left: 204px;
width: 196px;
}
</style>
<script type = "text/javascript" src = "Silverlight.js"></script>
<script type = "text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
return;
}
var errMsg = "Unhandled Error in Silverlight Application " +
appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
} else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<form id = "form1" runat = "server" style = "height:100%">
<div id = 'container'>
<div id = 'underSilverlight'>
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
This is below. This is below. This is below. This is below. This is below.
</div>
<div id = "silverlightControlHost">
<object data = "data:application/x-silverlight-2,"
type = "application/xsilverlight-2" width = "100%" height = "100%">
<param name = "source" value = "ClientBin/HtmlOverlap.xap"/>
<param name = "onError" value = "onSilverlightError" />
<param name = "background" value = "transparent" />
<param name = "windowless" value = "true" />
<param name = "minRuntimeVersion" value = "4.0.50401.0" />
<param name = "autoUpgrade" value = "true" />
<a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"
style = "text-decoration:none">
<img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
alt = "Get Microsoft Silverlight" style = "border-style:none"/> </a>
</object>
<iframe id = "_sl_historyFrame" style = "visibility:hidden; height:0px;
width:0px; border:0px"> </iframe>
</div>
<div id = 'overSilverlight'>
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
This is on top. This is on top.
This is on top. This is on top. This is on top. This is on top.
</div>
</div>
</form>
</body>
</html>Questo div sta andando a sinistra e sarà in fondo all'ordine Z, perché viene prima.
Quindi nel mezzo, abbiamo il contenuto Silverlight che riempirà l'intera larghezza.
Quindi in cima a questo, c'è un div sulla destra contenente il testo- This is on top.
Di seguito è riportato il file XAML in cui viene aggiunto un rettangolo con alcune proprietà.
<UserControl x:Class = "HtmlOverlap.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot">
<Rectangle Margin = "0,120" Fill = "Aquamarine" />
</Grid>
</UserControl>Quando esegui questa applicazione, vedrai due colonne, una in basso a sinistra e una in alto a destra. Il plug-in Silverlight si trova nella stessa area di entrambi e, nell'ordine Z, il contenuto di Silverlight si trova nel mezzo di questi due.
Puoi vedere che il riempimento verde semitrasparente qui ha leggermente colorato il testo a sinistra perché è sopra, ma non ha colorato il testo a destra, perché è dietro quel testo.
Puoi selezionare il testo a destra. Se lo provi con questo testo a sinistra, non succede nulla, e questo perché, per quanto riguarda il browser, tutto questo spazio qui è occupato dal controllo Silverlight. Poiché si trova sopra il testo nell'ordine Z, il controllo Silverlight che gestisce l'input.