Silverlight - CSS
Dado que el contenido de Silverlight siempre se ejecuta dentro de una página web, la etiqueta del objeto está sujeta a las reglas de diseño CSS normales. No hay forma de que el complemento devuelva un tamaño preferido al navegador, por lo que, independientemente del tamaño que desee tener el contenido de Silverlight, su tamaño y posición estarán totalmente determinados por la página web que lo contenga.
La plantilla de proyecto de Silverlight predeterminada coloca CSS en la página web que le da a la etiqueta de objeto toda la ventana del navegador.
El XAML predeterminado parece tener un tamaño fijo, pero si observa detenidamente, verá que la plantilla establece las propiedades de ancho y alto del diseño.
Estos le dicen a Visual Studio, o Blend, qué tan grande debe ser la interfaz de usuario en el diseñador, pero le permiten cambiar de tamaño en tiempo de ejecución.
En Solution Explorer ya verás {project name}TestPage.html archivo, que es el HTML predeterminado que obtiene cuando crea un nuevo proyecto de Silverlight en Visual Studio como se muestra a continuación.
El CSS en la parte superior aquí, establece el HTML y el estilo del cuerpo al 100%, lo que puede parecer un poco extraño.
Aquí está el archivo html completo, que contiene diferentes configuraciones.
<!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>Mirando a la silverlightControlHost, debemos asegurarnos de que esté protagonizado por una altura fija, digamos 300 píxeles, y un ancho de 400 píxeles, que coincide con el ancho y alto del diseño predeterminado en el XAML. También puede cambiar esta configuración de acuerdo con los requisitos de su aplicación.
Contenido superpuesto
De forma predeterminada, los contenidos de Silverlight y HTML no pueden compartir el mismo espacio en la pantalla. Si crea un contenido a partir de ambos, de modo que ocupen el mismo espacio, solo será visible el contenido de Silverlight.
Esto se debe a que, de forma predeterminada, Silverlight le pedirá al navegador su propia ventana privada, convirtiendo todo el contenido en ella. Es una ventana secundaria dentro del navegador, por lo que parece una parte de la página web, pero evita que el contenido se superponga.
La principal razón de esto es el rendimiento. Al tener su propia área privada en la pantalla, Silverlight no tiene que coordinar su renderizado con un navegador web.
Sin embargo, a veces es útil tener un contenido superpuesto. Hay que pagar un precio de rendimiento. Puede encontrar que las animaciones no se ejecutan tan bien cuando Silverlight y HTML comparten espacio en la pantalla, pero la flexibilidad de diseño adicional puede valer el precio. Para utilizar el contenido superpuesto, debe habilitar el modo sin ventanas.
En el modo sin ventanas, el complemento Silverlight se procesa en el mismo controlador de ventana de destino que el navegador, lo que permite que el contenido se mezcle.
El índice Zed, o índice Z, es significativo cuando los contenidos se superponen. En lo que respecta a HTML, el contenido de Silverlight es un solo elemento HTML, por lo que aparece exactamente en un lugar en el orden HTML Z.
Esto tiene un impacto en el manejo del mouse. Si el complemento Silverlight está en la parte superior del pedido de HMTL Z, cualquier actividad del mouse en cualquier lugar dentro de su cuadro delimitador se enviará al complemento.
Incluso si algunas áreas del complemento son transparentes y puede ver el HTML detrás, no podrá hacer clic en él.
Sin embargo, si hace arreglos para que el índice Z con algún contenido HTML esté en la parte superior, continuará siendo interactivo incluso cuando se superponga con el contenido de Silverlight.
Ejemplo
Eche un vistazo al ejemplo simple que se da a continuación en el que tenemos un diseño con un contenedor, en el que se han dispuesto tres divs para superponerse dentro de este div contenedor.
<!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>Este div va a la izquierda y estará al final del orden Z, porque es lo primero.
Luego, en el medio, tenemos el contenido de Silverlight que ocupará todo el ancho.
Luego, además de esto, hay un div a la derecha que contiene el texto: This is on top.
A continuación se muestra el archivo XAML en el que se agrega un rectángulo con algunas propiedades.
<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>Cuando ejecute esta aplicación, verá dos columnas, una que dice abajo a la izquierda y arriba a la derecha. El complemento Silverlight se encuentra en la misma área que ambos, y en el orden Z, el contenido de Silverlight está en el medio de esos dos.
Puede ver que el relleno verde semitransparente aquí ha teñido ligeramente el texto de la izquierda porque está encima de eso, pero no ha teñido el texto de la derecha, porque está detrás de ese texto.
Puede seleccionar el texto de la derecha. Si lo intentas con este texto a la izquierda, no pasa nada, y es porque, en lo que respecta al navegador, todo este espacio aquí está ocupado por el control Silverlight. Dado que está encima del texto en el orden Z, el control Silverlight se encarga de manejar la entrada.