Anpassen des Z-Index eines DropShadow (C#)

von Christian Wenz

PDF herunterladen

Das DropShadow-Steuerelement im AJAX Control Toolkit erweitert ein Panel mit einem Schlagschatten. Dieser Schatten ist jedoch manchmal mit anderen Steuerelementen in Konflikt, z. B. das ASP.NET Menüsteuerelement. Wenn ein Menüeintrag eingeblendet wird, wird er hinter dem Schlagschatten angezeigt.

Übersicht

Das DropShadow-Steuerelement im AJAX Control Toolkit erweitert ein Panel mit einem Schlagschatten. Dieser Schatten ist jedoch manchmal mit anderen Steuerelementen in Konflikt, z. B. das ASP.NET Menüsteuerelement. Wenn ein Menüeintrag eingeblendet wird, wird er hinter dem Schlagschatten angezeigt.

Schritte

Der Code beginnt mit dem Panel selbst, das genug Text enthält, sodass der Effekt sichtbar wird.

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

Ein weiteres Panel wird direkt vor dem panelShadow Panel platziert. Es enthält ein Menü mit horizontaler Ausrichtung, sodass Menüeinträge über dem dropShadow Bereich (oder eher: unter) angezeigt werden:

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

Dann wird das DropShadowExtender hinzugefügt, um das panelShadow Panel mit einem Schlagschatteneffekt zu erweitern.

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

Endlich aktiviert das ASP.NET AJAX-Steuerelement ScriptManager das Steuerelement-Toolkit und lässt es funktionieren.

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

Wenn Sie dieses Skript ausführen, erscheinen die Menüeinträge unter dem Panel. Das Menü verwendet jedoch die CSS-Klasse panel , in der Sie nur zwei Dinge definieren müssen, damit Elemente vor dem anderen Bereich angezeigt werden:

• Relative Positionierung
• Ein positiver Z-Index

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

Anschließend steht das DropShadowExtender Steuerelement nicht mehr im Konflikt mit dem Menüsteuerelement.

Der Menüeintrag ist nicht sichtbar (Klicken, um das Bild in voller Größe zu sehen)

Nach dem Erscheinen des Menüeintrags (Klicken, um das Bild in voller Größe anzuzeigen)