Skip to content

WPF Concepts: Implict ZIndex, Explicit ZIndex & Popup

May 24, 2007

I’m going over some API feedback/questions here.

To help illustrate ZIndex & Popup, I wrote a quick sample to illustrate the differences between:
1) implicit zindex based on tree order (green will be on top of red due to this)
2) explicit zindex (any element can pop out of implicit zindex order with Panel.ZIndex)
3) using <Popup /> (popups appear above all elements and can go outside the window)

You can download the sample from http://robrelyea.com/demos/ZIndexPopupExample/ZIndex.zip (this project was created in VS "Orcas" Beta1 targetting .Net 3.0.)

Window1.xaml:

<Window x:Class="ZIndexPopupExample.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
   Title="ZIndex-Implicit by order in tree vs Explicit" Height="300" Width="800"
   PreviewKeyDown="handleKeyDown"
   >
   <Grid>
       <Canvas Margin="10,10,10,100" Background="Blue" Visibility="Hidden" Name="explicitZIndex" Panel.ZIndex="1" />
       <Label IsTabStop="True" Name="Instructions" VerticalAlignment="Bottom" HorizontalAlignment="Center" MinWidth="1in" xml:space="preserve">‘B’, ‘R’, ‘P’ – Show/Hide Blue Rect, Red Rect, or Popup.
‘Esc’ to reset All.
</Label>
       <Canvas Margin="10,10,100,50" Background="Red" Visibility="Hidden" Name="implicitZIndex" />
       <Canvas Height="10" Width="10" Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center" />
       <Popup Name="popup" PopupAnimation="Fade" Placement="Center" Width="1200"><TextBlock Padding="30" Background="Orange">I’m a popup</TextBlock></Popup>
   </Grid>
</
Window>

 

Window1.xaml.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;

namespace ZIndexPopupExample
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            Instructions.Focus();
        }

        void handleKeyDown(object sender, KeyEventArgs e)
        {
            switch (e.Key)
            {
                case Key.B:
                    ToggleVisibility(explicitZIndex);
                    break;
                case Key.R:
                    ToggleVisibility(implicitZIndex);
                    break;
                case Key.P:
                    popup.IsOpen = !popup.IsOpen;
                    break;
                case Key.Escape:
                    explicitZIndex.Visibility = Visibility.Hidden;
                    implicitZIndex.Visibility = Visibility.Hidden;
                    popup.IsOpen = false;
                    break;
            }
        }

        void ToggleVisibility(UIElement element)
        {
            switch (element.Visibility)
            {
                case Visibility.Collapsed: //just put this one in for completeness…
                    element.Visibility = Visibility.Visible;
                    break;
                case Visibility.Hidden:
                    element.Visibility = Visibility.Visible;
                    break;
                case Visibility.Visible:
                    element.Visibility = Visibility.Hidden;
                    break;

            }
        }
    }
}

From → WPF

7 Comments
  1. Danyel permalink

    I love popups, but the fact that their Z order is "above everything else in the world" makes them hard to use for almost any windowing application… is there a way to talk a popup into having a z order on top of this window?

  2. Danyel permalink

    To answer my own question: they\’ll go away on their own if you set StaysOpen to false.

  3. Graham permalink

    I thought I would take a stab at trying to create an Application Button control that is similar to the Application button in Microsoft Office 2007 applications. It occurred to me that the standard ComboBox is similar to the application button. So I thought I would try to style the SimpleComboBox style to get the effect I wanted. All was well until it came to displaying the contents of the Expander when the ToggleButton is clicked. In order to make it appear the the expander was flying out from the toggle button I set the VerticalOffset of the Expander to -20. This is great! Except…. The damn expander is always topmost. I tried wrapping the Expander in a canvas control and then setting the Canvas.ZIndex to be behind everything else so it would draw behind the toggle button. My fundamental problem is:I can\’t set the ZIndex of the Expander and have it actually work. The damn popup always is on top which is not what I want. I am sure I can make this work if I replace the popup with a border of some sort but then I lose all the cool placement and animation functionality of the Expander.Is there any way to set the ZIndex on an expander???

  4. Unknown permalink

    Welcome to enter (wow gold) and (wow power leveling) trading site, (Rolex) are cheap, (World of Warcraft gold) credibility Very good! Quickly into the next single! Key words directly to the website click on transactions! -144541829087273

  5. Unknown permalink

    Amberdigital Branch,Southern Stars Enterprises Co is specializing in the development and manufacturing of ad players, advertisement player and LCD advertisings. Established in 1996, we have explored and developed the international market with professionalism. We have built a widespread marketing network, and set up a capable management team dedicated to provide beyond-expectation services to our customers.

    amberdigital Contact Us
    Southern Stars Enterprises Co (Hong Kong Office)
    Add:3 Fl, No.2, Lane 2, Kam Tsin Tsuen, Sheung Shui, Hong Kong
    Tel:+852 2681 4099
    Fax:+852 2681 4586
    Southern Stars Enterprises Co (Shenzhen Office)
    Add:DE, 16/F, Building 2, Nanguo Tower, Sungang Road, Shenzhen, China
    Tel:+86 755 2592 9100
    Fax:+86 755 2592 7171
    E-mail:sstar@netvigator.com
    website:www.amberdigital.com.hk
    alibaba:amberdigital.en.alibaba.com[aidgbgda

  6. Unknown permalink

    FX  賃貸 アーネスト アルバイト 求人情報   ローン マリッジリング 東京 土地 結婚式  沖縄旅行 ゲーム 専門学校  クレジットカード 現金化  外国為替  引越  副業  為替 競馬予想  出会い系子犬 神奈川 ペットショップ 神奈川パイプカット インテリア 雑貨  歯列矯正  分譲マンション

     

  7. Unknown permalink

    デザイン 専門学校 競馬予想 行政書士 ドロップシッピング 競馬 三井ダイレクト 有料老人ホーム ショッピング枠 現金化  為替   設計事務所    アクサ  アクサダイレクト      現金化  派遣会社 クレジットカード 現金化  ウェディング  結婚式  ウェディング 看護 
     医院開業 覆面調査  マンガ 専門学校

     

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: