Silverlight - CSS
Como o conteúdo do Silverlight sempre é executado dentro de uma página da web, a tag de objeto está sujeita às regras normais de layout CSS. Não há como o plug-in enviar um tamanho preferido de volta ao navegador, portanto, independentemente do tamanho que o conteúdo do Silverlight possa ter, seu tamanho e posição serão totalmente determinados pela página da web que o contém.
O modelo de projeto padrão do Silverlight coloca CSS na página da web que fornece à tag de objeto toda a janela do navegador.
O XAML padrão parece ter um tamanho fixo, mas se você olhar de perto, verá que o modelo define as propriedades de largura e altura de design.
Eles informam ao Visual Studio, ou Blend, o tamanho que a interface do usuário deve parecer no designer, mas permitem que ela seja redimensionada em tempo de execução.
Dentro Solution Explorer você verá {project name}TestPage.html , que é o HTML padrão que você obtém ao criar um novo projeto do Silverlight no Visual Studio, conforme mostrado abaixo.
O CSS no topo aqui, define o estilo do corpo e do HTML como 100%, o que pode parecer um pouco estranho.
Aqui está o arquivo html completo, que contém diferentes configurações.
<!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>Olhando para o silverlightControlHost, precisamos ter certeza de que ele estrela com uma altura fixa, digamos 300 pixels, e uma largura de 400 pixels, que corresponde à largura e altura de design padrão no XAML. Você também pode alterar essas configurações de acordo com os requisitos da sua aplicação.
Conteúdo Sobreposto
Por padrão, os conteúdos Silverlight e HTML não podem compartilhar o mesmo espaço na tela. Se você criar um conteúdo de ambos, de forma que ocupem o mesmo espaço, apenas o conteúdo do Silverlight ficará visível.
Isso ocorre porque, por padrão, o Silverlight solicitará ao navegador sua própria janela privada, renderizando todo o conteúdo nela. É uma janela filha dentro do navegador, por isso parece parte da página da web, mas evita que o conteúdo se sobreponha.
A principal razão para isso é o desempenho. Ao obter sua própria área privada na tela, o Silverlight não precisa coordenar sua renderização com um navegador da web.
No entanto, às vezes é útil ter um conteúdo sobreposto. Há um preço de desempenho a pagar. Você pode descobrir que as animações não funcionam tão bem quando o Silverlight e o HTML compartilham espaço na tela, mas a flexibilidade extra do layout pode valer o preço. Para usar o conteúdo sobreposto, você precisa habilitar o modo sem janela.
No modo sem janela, o plug-in Silverlight é renderizado no mesmo manipulador de janela de destino que o navegador, permitindo que o conteúdo se misture.
O índice Zed ou índice Z é significativo quando o conteúdo se sobrepõe. No que diz respeito ao HTML, o conteúdo do Silverlight é um único elemento HTML, então ele aparece exatamente em um lugar na ordem Z do HTML.
Isso tem um impacto no manuseio do mouse. Se o plug-in Silverlight estiver no topo do pedido HMTL Z, qualquer atividade do mouse em qualquer lugar dentro de sua caixa delimitadora será entregue ao plug-in.
Mesmo se algumas áreas do plug-in forem transparentes e você puder ver o HTML por trás, não será capaz de clicar nele.
No entanto, se você organizar para que o índice Z com algum conteúdo HTML fique no topo, ele continuará a ser interativo mesmo quando se sobrepõe ao conteúdo do Silverlight.
Exemplo
Dê uma olhada no exemplo simples dado abaixo, no qual temos um layout com um contêiner, no qual três divs foram organizados para se sobrepor dentro deste div.
<!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>Essa div está indo para a esquerda e estará atrás da ordem Z, porque vem primeiro.
Então, no meio, temos o conteúdo do Silverlight que vai preencher toda a largura.
Além disso, há uma div à direita contendo o texto This is on top.
A seguir, está o arquivo XAML no qual um retângulo é adicionado com algumas propriedades.
<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>Ao executar este aplicativo, você verá duas colunas, uma dizendo abaixo à esquerda e na parte superior à direita. O plug-in do Silverlight fica na mesma área que os dois e, na ordem Z, o conteúdo do Silverlight está no meio desses dois.
Você pode ver que o preenchimento verde semitransparente aqui tingiu levemente o texto à esquerda porque está no topo, mas não matizou o texto à direita, porque está atrás desse texto.
Você pode selecionar o texto à direita. Se tentar fazer isso com este texto à esquerda, nada acontece, e isso porque, no que diz respeito ao navegador, todo este espaço aqui está ocupado pelo controle do Silverlight. Como está acima do texto na ordem Z, o controle do Silverlight que trata a entrada.