Ajustement de l’index-Z d’un DropShadow (C#)

par Christian Wenz

Télécharger le PDF

Le contrôle DropShadow dans ajax Control Toolkit étend un panneau avec une ombre portée. Toutefois, cette ombre est parfois en conflit avec d’autres contrôles, pour instance le contrôle Menu ASP.NET. Lorsqu’une entrée de menu s’affiche, elle apparaît derrière l’ombre portée.

Vue d’ensemble

Le contrôle DropShadow dans ajax Control Toolkit étend un panneau avec une ombre portée. Toutefois, cette ombre est parfois en conflit avec d’autres contrôles, pour instance le contrôle Menu ASP.NET. Lorsqu’une entrée de menu s’affiche, elle apparaît derrière l’ombre portée.

Étapes

Le code commence par le panneau lui-même, contenant suffisamment de texte pour que le panneau contienne suffisamment de texte pour que l’effet soit visible :

<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 autre panneau est placé directement devant le panelShadow panneau. Il contient un menu avec une orientation horizontale de sorte que les entrées de menu s’affichent sur (ou plutôt : sous) le dropShadow panneau) :

<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>

Ensuite, le DropShadowExtender est ajouté pour étendre le panelShadow panneau avec un effet d’ombre portée :

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

Enfin, le contrôle AJAX ScriptManager ASP.NET permet au Kit de ressources de contrôle de fonctionner :

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

Lorsque vous exécutez ce script, les entrées de menu s’affichent sous le panneau. Toutefois, le menu utilise la classe panel CSS où il vous suffit de définir deux éléments pour que les éléments apparaissent devant l’autre panneau :

• Positionnement relatif
• Z-index positif

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

Ensuite, le DropShadowExtender contrôle n’entre plus en conflit avec le contrôle Menu.

Avant : l’entrée de menu n’est pas visible (cliquez pour afficher l’image en taille réelle)

Après : l’entrée de menu s’affiche (Cliquez pour afficher l’image en taille réelle)

Next