Hola, amigos me reporto en el blog.

En esta entrada quiero veamos un tema que no es muy cómo a la hora de embeber un plug-in en las páginas ASPX.

Supongamos que en una página de asp.net, tenemos algún tipo de Menu muy sencillo, el cuál debe sobreponerse a todo el contenido de la página (html resultante de la ejecución de una página web aspx), este trabajo se logra con CSS básico, a través de la propiedad z-index, la cual permite sobreponer objetos html unos sobre otros, pero cuando se trabaja con un objeto de Silverlight el problema toma otra proporción.

Lo primero es crear un proyecto de Silverlight en Visual Studio 2010

Veamos, tengo el siguiente código de un Menu de ASP.NET con su respectivo CSS


<style type="text/css">
  #logo
        {
            float: left;
            width: 10.5em;
            background: #CCCCCC;
            padding: 0.5em 0.5em 0.5em 1em;
            margin: 0;
        }
        .primaryStaticMenu
        {
            background-color: transparent;
            float: right;
        }
        .primaryStaticMenuItem
        {
            width: 10em;
            background-color: #f7f2ea;
            border-width: 1px;
            border-color: #efefef #aaab9c #ccc #efefef;
            border-style: solid;
            color: #777777;
            padding: 0.5em 0 0.5em 1em;
        }
        .primaryStaticHover
        {
            color: #800000;
            background: #f0e7d7;
        }
        
        .primaryDynamicMenu
        {
            background-color: #f7f2ea;
            border-bottom: solid 1px #ccc;
        }
        .primaryDynamicMenuItem
        {
            width: 10em;
            background-color: #f7f2ea;
            color: #777;
            padding: 0.5em 0 0.5em 1em;
            border-width: 1px;
            border-color: #f7f2ea #aaab9c #f7f2ea #efefef;
            border-style: solid;
        }
        .primaryDynamicHover
        {
            color: #800000;
            background: #f0e7d7;
        }
        
        .secondaryLevelOne
        {
            background-color: transparent;
            background-repeat: repeat-x;
            margin: 1.5em 0 0 0;
            padding: 5px 0 0 5px;
            width: 12em;
            height: 35px;
        }
        .secondaryLevelTwo
        {
            background: #FAFBFB;
            padding: 5px 0 5px 5px;
        }
        .secondaryStaticHover
        {
            color: #800000;
        }
</style>

<div id="container">
        <asp:Menu ID="menuPrimary" runat="server" DataSourceID="siteSource1" Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="false" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1">
            <StaticMenuStyle CssClass="primaryStaticMenu" />
            <StaticMenuItemStyle CssClass="primaryStaticMenuItem" />
            <StaticHoverStyle CssClass="primaryStaticHover" />
            <DynamicMenuStyle CssClass="primaryDynamicMenu" />
            <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem" />
            <DynamicHoverStyle CssClass="primaryDynamicHover" />
        </asp:Menu>
    </div>
    <asp:SiteMapDataSource ID="siteSource1" runat="server" ShowStartingNode="false" />

Control de Silverlight

<UserControl x:Class="ZInexProblem.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="50" d:DesignWidth="200" HorizontalAlignment="Left"  >

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox Foreground="Red" Background="Yellow" TextWrapping="Wrap" HorizontalContentAlignment="Center" FontSize="20" FontFamily="Comic Sans MS" Text="TextBox Especial"></TextBox>
    </Grid>
</UserControl>

Así creamos un control TextBox de Silverlight muy sencillo para hacer las pruebas.

De esta forma el problema consiste en que el plug-in de Silvelright por defecto se va a sobreponer a cualquier tipo de contenido que se cree en la página ASPX, es decir, en este caso el control menu va a quedar solapado bajo la película de silverlight, lo cual nos indicaría un bug(El cual no existe :).

Para solucionar esto debemos hacer lo siguiente:

Como ya algunos sabemos un plug-in de silverlight se carga y referencia a través de un tag object de html.

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
            <param name="source" value="ClientBin/ZInexProblem.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40818.0" />

            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.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>

Bien la primer impresión que nos llevamos luego de ejecutar la aplicación es la siguiente:

Para solucionar este inconveniente, es necesario agregar al tag object de html el atributo.

<param name="windowless" value="true" />

Esto permite que de cierta forma el plug-in se integre con el DOM de html, y así podamos a través del manejo de las propiedades zindex indicar que capa asumira la película respecto al div contendor del objeto menu.

Veamos el código completo de la página ASPX:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!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 runat="server">
    <title>ZInexProblem</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            overflow: auto;
        }
        body
        {
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost
        {
            text-align: left;
            z-index: 0;
        }
        #logo
        {
            float: left;
            width: 10.5em;
            background: #CCCCCC;
            padding: 0.5em 0.5em 0.5em 1em;
            margin: 0;
        }
        .primaryStaticMenu
        {
            background-color: transparent;
            float: right;
        }
        .primaryStaticMenuItem
        {
            width: 10em;
            background-color: #f7f2ea;
            border-width: 1px;
            border-color: #efefef #aaab9c #ccc #efefef;
            border-style: solid;
            color: #777777;
            padding: 0.5em 0 0.5em 1em;
        }
        .primaryStaticHover
        {
            color: #800000;
            background: #f0e7d7;
        }
        
        .primaryDynamicMenu
        {
            background-color: #f7f2ea;
            border-bottom: solid 1px #ccc;
        }
        .primaryDynamicMenuItem
        {
            width: 10em;
            background-color: #f7f2ea;
            color: #777;
            padding: 0.5em 0 0.5em 1em;
            border-width: 1px;
            border-color: #f7f2ea #aaab9c #f7f2ea #efefef;
            border-style: solid;
        }
        .primaryDynamicHover
        {
            color: #800000;
            background: #f0e7d7;
        }
        
        .secondaryLevelOne
        {
            background-color: transparent;
            background-repeat: repeat-x;
            margin: 1.5em 0 0 0;
            padding: 5px 0 0 5px;
            width: 12em;
            height: 35px;
        }
        .secondaryLevelTwo
        {
            background: #FAFBFB;
            padding: 5px 0 5px 5px;
        }
        .secondaryStaticHover
        {
            color: #800000;
        }
    </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">
        <asp:Menu ID="menuPrimary" runat="server" DataSourceID="siteSource1" Orientation="Horizontal"
            StaticEnableDefaultPopOutImage="false" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1">
            <StaticMenuStyle CssClass="primaryStaticMenu" />
            <StaticMenuItemStyle CssClass="primaryStaticMenuItem" />
            <StaticHoverStyle CssClass="primaryStaticHover" />
            <DynamicMenuStyle CssClass="primaryDynamicMenu" />
            <DynamicMenuItemStyle CssClass="primaryDynamicMenuItem" />
            <DynamicHoverStyle CssClass="primaryDynamicHover" />
        </asp:Menu>
    </div>
    <asp:SiteMapDataSource ID="siteSource1" runat="server" ShowStartingNode="false" />
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
            <param name="source" value="ClientBin/ZInexProblem.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40818.0" />
            <param name="windowless" value="true" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.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>
    </form>
</body>
</html>

Archivo XML web.sitemap para la fuente de los items del menú.

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode title="Home" description="Home Page" url="Default.aspx">
    <siteMapNode title="News" description="The Latest News" url="News.aspx">
      <siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
      <siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
      <siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
      <siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
    </siteMapNode>
    <siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
  </siteMapNode>
</siteMap>

El resultado final es:

Codigo Link Código

Anuncios