Silverlight - CSS
Étant donné que le contenu Silverlight s'exécute toujours à l'intérieur d'une page Web, la balise d'objet est soumise aux règles de disposition CSS normales. Il n'y a aucun moyen pour le plug-in de pousser une taille préférée vers le navigateur, donc quelle que soit la taille du contenu Silverlight peut vouloir être, sa taille et sa position seront entièrement déterminées par la page Web contenant.
Le modèle de projet Silverlight par défaut place le CSS dans la page Web qui donne à la balise d'objet l'ensemble de la fenêtre du navigateur.
Le XAML par défaut semble avoir une taille fixe, mais si vous regardez de près, vous verrez que le modèle définit les propriétés de largeur et de hauteur de conception.
Ceux-ci indiquent à Visual Studio, ou Blend, la taille de l'interface utilisateur dans le concepteur, mais ils lui permettent de se redimensionner au moment de l'exécution.
Dans Solution Explorer tu verras {project name}TestPage.html fichier, qui est le code HTML par défaut que vous obtenez lorsque vous créez un nouveau projet Silverlight dans Visual Studio, comme indiqué ci-dessous.
Le CSS en haut ici définit le style HTML et corps à 100%, ce qui peut sembler un peu étrange.
Voici le fichier html complet, qui contient différents paramètres.
<!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>En regardant le silverlightControlHost, nous devons nous assurer qu'il a une hauteur fixe, disons 300 pixels, et une largeur de 400 pixels, ce qui correspond à la largeur et à la hauteur de conception par défaut dans le XAML. Vous pouvez également modifier ces paramètres en fonction des exigences de votre application.
Contenu superposé
Par défaut, les contenus Silverlight et HTML ne peuvent pas partager le même espace à l'écran. Si vous créez un contenu à partir des deux, de sorte qu'ils occupent le même espace, seul le contenu Silverlight sera visible.
C'est parce que, par défaut, Silverlight demandera au navigateur sa propre fenêtre privée, restituant tout le contenu dans celle-ci. Il s'agit d'une fenêtre enfant à l'intérieur du navigateur, elle ressemble donc à une partie de la page Web, mais elle empêche le contenu de se chevaucher.
La principale raison en est la performance. En obtenant sa propre zone privée à l'écran, Silverlight n'a pas à coordonner son rendu avec un navigateur Web.
Cependant, il est parfois utile d'avoir un contenu qui se chevauche. Il y a un prix de performance à payer. Vous constaterez peut-être que les animations ne fonctionnent pas aussi bien lorsque Silverlight et HTML partagent l'espace à l'écran, mais la flexibilité de mise en page supplémentaire peut valoir le prix. Pour utiliser le contenu qui se chevauche, vous devez activer le mode sans fenêtre.
En mode sans fenêtre, le plug-in Silverlight effectue le rendu dans le même gestionnaire de fenêtre cible que le navigateur, ce qui permet au contenu de se mélanger.
L'index Zed ou l'index Z est significatif lorsque le contenu se chevauche. En ce qui concerne le HTML, le contenu Silverlight est un élément HTML unique, il apparaît donc exactement à un endroit dans l'ordre HTML Z.
Cela a un impact sur la manipulation de la souris. Si le plug-in Silverlight est en haut de la commande HMTL Z, toute activité de la souris n'importe où dans sa zone de délimitation sera transmise au plug-in.
Même si certaines zones du plug-in sont transparentes et que vous pouvez voir le code HTML derrière, vous ne pourrez pas cliquer dessus.
Cependant, si vous faites en sorte que l'index Z avec du contenu HTML soit au-dessus, il continuera à être interactif même s'il chevauche le contenu Silverlight.
Exemple
Jetez un œil à l'exemple simple donné ci-dessous dans lequel nous avons une disposition avec un conteneur, dans lequel trois divs ont tous été disposés pour se chevaucher à l'intérieur de ce div contenant.
<!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>Ce div va vers la gauche, et il sera à l'arrière de l'ordre Z, car il vient en premier.
Ensuite, au milieu, nous avons le contenu Silverlight qui va remplir toute la largeur.
Ensuite, en plus de cela, il y a un div sur la droite contenant le texte- This is on top.
Vous trouverez ci-dessous le fichier XAML dans lequel un rectangle est ajouté avec certaines propriétés.
<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>Lorsque vous exécutez cette application, vous verrez deux colonnes, l'une indiquant ci-dessous à gauche et en haut à droite. Le plug-in Silverlight se trouve dans la même zone que les deux, et dans l'ordre Z, le contenu Silverlight est au milieu de ces deux.
Vous pouvez voir que le remplissage vert semi-transparent ici a légèrement teinté le texte à gauche parce qu'il est au-dessus de cela, mais il n'a pas teinté le texte à droite, car il est derrière ce texte.
Vous pouvez sélectionner le texte sur la droite. Si vous essayez cela avec ce texte à gauche, rien ne se passe, et c'est parce que, en ce qui concerne le navigateur, tout cet espace est occupé par le contrôle Silverlight. Puisqu'il est au-dessus du texte dans l'ordre Z, le contrôle Silverlight qui gère l'entrée.