?
Solved

Silverlight4 how to make Canvas ZIndex top-most when inside a StackPanel

Posted on 2010-11-20
6
Medium Priority
?
1,117 Views
Last Modified: 2013-11-12
Problem: Need to fly a message above all other elements on screen, where the obvious solution of using a Canvas messes up the use of a list-wrapping display.

Background: I have a Silverlight4 application that is working great, correctly displaying a ListBox with a WrapPanel item template where it must be configured to use up all remaining space on the screen, after allowing for a heading area on top.  All of this is coordinated through a StackPanel to lay out the overall screen.

I need to be able to display messages on top of all of this without disturbing the layout. A Canvas tucked inside the heading area is working great, and I can position messages with the canvas exactly where I want.

The only problem is the message is always behind the other items on screen regardless of the ZIndex. This makes sense from the perspective that the other items are not inside the canvas but rather the canvas is inside the other items, rendering the ZIndex moot.

When I try to enclose the entire screen layout in a Canvas it looses desired WrapPanel behavior, which is essential to the design.

Question: Is there a way to fly an element above all others without basing the entire layout on a Canvas?  My only idea is a ChildWindow without a border but that seems overkill for what I need to do.

0
Comment
Question by:CraigYellick
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 14

Expert Comment

by:Binuth
ID: 34187421
can you post sample code/app ?
0
 
LVL 11

Author Comment

by:CraigYellick
ID: 34218831
This first snippet shows how using a Canvas as the root layout element allows me to display the error message on top of all other content, which is the goal. However, note that the WrapPanel no longer functions and the ListBox of 24 items runs off-screen instead of wrapping.  The 24 items are added via the code below.

  Public Sub New()
    InitializeComponent()
    For i As Integer = 1 To 24
      Dim item As New ListBoxItem()
      item.Content = String.Format("Item {0:00}.", i)
      item.FontSize = 36
      ListBox1.Items.Add(item)
    Next
  End Sub

 
<UserControl x:Class="CanvasProblem.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  
  >
  <Canvas>
    <Border x:Name="ErrorMessageBorder" Width="500" Canvas.Top="50" Canvas.Left="150" Canvas.ZIndex="999"
                            Background="Red" BorderThickness="5" CornerRadius="10">
      <TextBlock x:Name="ErrorMessageTextBlock"
                     Text="This is an Error Message and should be displayed on top of all other content."  
                     Padding="6" Margin="6"
                     FontSize="18" FontWeight="Bold" FontStyle="Italic" TextWrapping="Wrap">
      </TextBlock>
    </Border>
  
    <Grid Canvas.Top="0" Canvas.Left="0"  >
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="70"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>

      <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
        <HyperlinkButton Content="Link1" FontSize="14" Margin="2,0" />
        <HyperlinkButton Content="Link2" FontSize="14" Margin="2,0" />
        <HyperlinkButton Content="Link3" FontSize="14" Margin="2,0" />
       </StackPanel>

      <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical" >
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="SUB HEADING" Margin="5,0,0,0" FontSize="32" FontStyle="Italic" FontWeight="ExtraBold" VerticalAlignment="Bottom" />
          <StackPanel Orientation="Vertical" Margin="10,0,0,0">
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="More Information" FontSize="14" VerticalAlignment="Center" />
              <TextBlock  Text="(Message)" Margin="6,0,0,0" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Sort by:" FontSize="14" VerticalAlignment="Center" />
              <RadioButton Content="Aaaa" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
              <RadioButton Content="Bbbb" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
            </StackPanel>
          </StackPanel>
        </StackPanel>
      </StackPanel>

      <StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"  Orientation="Vertical" HorizontalAlignment="Right">
        <TextBlock Text="MAIN HEADING" FontWeight="Bold" FontSize="38" Padding="0,0,15,0" />
        <TextBlock Text="Additional Information" FontSize="18" />
      </StackPanel>

      <ListBox x:Name="ListBox1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
        <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Vertical" />
          </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.Template>
          <ControlTemplate>
            <Grid>
              <ItemsPresenter />
            </Grid>
          </ControlTemplate>
        </ListBox.Template>
      </ListBox>
    </Grid>
  </Canvas>
</UserControl>

Open in new window

0
 
LVL 11

Author Comment

by:CraigYellick
ID: 34218850
This version allows the WrapPanel to function correctly, and shows all 24 items wrapped as desired. However, becase the Canvas is embedded inside the Grid/StackPanel the ZIndex has no effect and the error message text appears below the other content.

(Use the same ListBox filling code from previous.)

 
<UserControl x:Class="CanvasProblem.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  
  >
  <Grid >
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="30"/>
      <RowDefinition Height="70"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
      <HyperlinkButton HorizontalAlignment="Left" Content="Link1" FontSize="14" Margin="2,0" />
      <HyperlinkButton HorizontalAlignment="Left" Content="Link2" FontSize="14" Margin="2,0" />
      <HyperlinkButton HorizontalAlignment="Left" Content="Link3" FontSize="14" Margin="2,0" />
     </StackPanel>

    <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical" >
      <Canvas x:Name="ErrorMessageCanvas">
        <Border  x:Name="ErrorMessageBorder" Width="500" Canvas.Top="50" Canvas.Left="150"
                            Background="Red" BorderThickness="5" CornerRadius="10">
          <TextBlock x:Name="ErrorMessageTextBlock"
                     Text="This is an Error Message and should be displayed on top of all other content."   
                     Padding="6" Margin="6"
                     FontSize="18" FontWeight="Bold" FontStyle="Italic" TextWrapping="Wrap">
          </TextBlock>
        </Border>
      </Canvas>
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="SUB HEADING" Margin="5,0,0,0" FontSize="32" FontStyle="Italic" FontWeight="ExtraBold" VerticalAlignment="Bottom" />
        <StackPanel Orientation="Vertical" Margin="10,0,0,0">
          <StackPanel Orientation="Horizontal">
            <TextBlock Text="More Information" FontSize="14" VerticalAlignment="Center" />
            <TextBlock  Text="(Message)" Margin="6,0,0,0" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
          </StackPanel>
          <StackPanel Orientation="Horizontal">
            <TextBlock Text="Sort by:" FontSize="14" VerticalAlignment="Center" />
            <RadioButton Content="Aaaa" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
            <RadioButton Content="Bbbb" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
          </StackPanel>
        </StackPanel>
      </StackPanel>
    </StackPanel>

    <StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"  Orientation="Vertical" HorizontalAlignment="Right">
      <TextBlock Text="MAIN HEADING" FontWeight="Bold" FontSize="38" Padding="0,0,15,0" />
      <TextBlock Text="Additional Information" FontSize="18" />
    </StackPanel>

    <ListBox x:Name="ListBox1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <toolkit:WrapPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
      <ListBox.Template>
        <ControlTemplate>
          <Grid>
            <ItemsPresenter />
          </Grid>
        </ControlTemplate>
      </ListBox.Template>
    </ListBox>
  </Grid>
</UserControl>

Open in new window

0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 7

Accepted Solution

by:
vbigham earned 2000 total points
ID: 34249952
I have been able to use the Canvas.ZIndex property without ever using a canvas on the page.  

What I have done in the past is add the message control to the root grid, or the desired container.  Then set the Grid.ColumnSpan and Grid.RowSpan(if necessary), and either set the ZIndex, or put it at the very bottom of the XAML (the most recent additions to a grids children seem to show up on top).  Then you  should be able to just switch the visibility.  

Something like the following.
<navigation:Page x:Class="SilverlightSampleNavigation.About" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                 xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
           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"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="About" 
           Style="{StaticResource PageStyle}">

  <Grid x:Name="LayoutRoot">
        <UserControl>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="70"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
                    <HyperlinkButton HorizontalAlignment="Left" Content="Link1" FontSize="14" Margin="2,0" />
                    <HyperlinkButton HorizontalAlignment="Left" Content="Link2" FontSize="14" Margin="2,0" />
                    <HyperlinkButton HorizontalAlignment="Left" Content="Link3" FontSize="14" Margin="2,0" />
                </StackPanel>

                <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Vertical" >                    
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="SUB HEADING" Margin="5,0,0,0" FontSize="32" FontStyle="Italic" FontWeight="ExtraBold" VerticalAlignment="Bottom" />
                        <StackPanel Orientation="Vertical" Margin="10,0,0,0">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="More Information" FontSize="14" VerticalAlignment="Center" />
                                <TextBlock  Text="(Message)" Margin="6,0,0,0" VerticalAlignment="Center" FontSize="14" FontWeight="Bold"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Sort by:" FontSize="14" VerticalAlignment="Center" />
                                <RadioButton Content="Aaaa" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
                                <RadioButton Content="Bbbb" FontSize="14" Margin="10,0,0,0" VerticalAlignment="Center" />
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                </StackPanel>

                <StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"  Orientation="Vertical" HorizontalAlignment="Right">
                    <TextBlock Text="MAIN HEADING" FontWeight="Bold" FontSize="38" Padding="0,0,15,0" />
                    <TextBlock Text="Additional Information" FontSize="18" />
                </StackPanel>

                <ListBox x:Name="ListBox1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.Template>
                        <ControlTemplate>
                            <Grid>
                                <ItemsPresenter />
                            </Grid>
                        </ControlTemplate>
                    </ListBox.Template>
                </ListBox>

                <Grid Grid.ColumnSpan="999" Grid.RowSpan="999" x:Name="ErrorMessageGrid" Background="#86000000">
                    <Border  x:Name="ErrorMessageBorder" Width="500" Canvas.Top="50" Canvas.Left="150"  
                            Background="Red" BorderThickness="5" CornerRadius="10" Height="200">
                        <TextBlock x:Name="ErrorMessageTextBlock"  
                     Text="This is an Error Message and should be displayed on top of all other content."     
                     Padding="6" Margin="6"  
                     FontSize="18" FontWeight="Bold" FontStyle="Italic" TextWrapping="Wrap">
                        </TextBlock>
                    </Border>
                </Grid>
            </Grid>
        </UserControl>

    </Grid>

</navigation:Page>

Open in new window

0
 
LVL 11

Author Closing Comment

by:CraigYellick
ID: 34250026
Outstanding! Thank you. Works perfectly.
0
 
LVL 11

Author Comment

by:CraigYellick
ID: 34250032
Outstanding solution. Easy to understand and works exactly as desired. Thanks!
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What my article will show is if you ever had to do processing to a listbox without being able to just select all the items in it. My software Visual Studio 2008 crystal report v11 My issue was I wanted to add crystal report to a form and show…
For most people, the WrapPanel seems like a magic when they switch from WinForms to WPF. Most of us will think that the code that is used to write a control like that would be difficult. However, most of the work is done by the WPF engine, and the W…
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question