Regolazione dello Z-Index di un DropShadow (C#)

di Christian Wenz

Scaricare il PDF

Il controllo DropShadow nel toolkit dei controlli AJAX estende un pannello con un'ombreggiatura. Tuttavia, questa ombreggiatura talvolta è in conflitto con altri controlli, ad esempio il controllo menu ASP.NET. Quando viene visualizzata una voce di menu, viene visualizzata dietro l'ombreggiatura.

Informazioni generali

Il controllo DropShadow nel toolkit dei controlli AJAX estende un pannello con un'ombreggiatura. Tuttavia, questa ombreggiatura talvolta è in conflitto con altri controlli, ad esempio il controllo menu ASP.NET. Quando viene visualizzata una voce di menu, viene visualizzata dietro l'ombreggiatura.

Gradi

Il codice inizia con il Pannello stesso, contenente testo sufficiente in modo che il pannello contenga testo sufficiente per rendere visibile l'effetto:

<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

Un altro pannello viene posizionato direttamente prima del panelShadow pannello. Contiene un menu con orientamento orizzontale in modo che le voci di menu vengano visualizzate sopra (o meglio: sotto) il dropShadow pannello):

<asp:Panel ID="panelMenu" runat="server" CssClass="ForegroundStyle">
 <asp:Menu ID="menu1" runat="server" ForeColor="Red" Orientation="Horizontal">
 <Items>
 <asp:MenuItem Text="One">
 <asp:MenuItem Text="1.1" />
 <asp:MenuItem Text="1.2" />
 </asp:MenuItem>
 <asp:MenuItem Text="Two" />
 <asp:MenuItem Text="Three" />
 </Items>
 </asp:Menu><br />
</asp:Panel>

Quindi, il DropShadowExtender viene aggiunto per estendere il pannello panelShadow con un effetto ombra.

<ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
 TargetControlID="panelShadow"
 Opacity="0.5" Rounded="true" />

Infine, il controllo ASP.NET AJAX ScriptManager consente il funzionamento di Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

Quando si esegue questo script, le voci di menu vengono visualizzate sotto il pannello. Tuttavia, il menu usa la classe panel CSS in cui è sufficiente definire due elementi per rendere gli elementi visualizzati davanti all'altro pannello:

• Posizionamento relativo
• Indice z positivo

<style type="text/css">
 .ForegroundStyle {z-index: 123; position: relative;}
 .panel {background-color: navy;}
</style>

Quindi, il DropShadowExtender controllo non è più in conflitto con il controllo Menu.

Prima: la voce di menu non è visibile (fare clic per visualizzare l'immagine a dimensione intera)

Dopo: viene visualizzata la voce di menu (fare clic per visualizzare l'immagine a dimensione intera)