Databases
StackOverflow2013
Postsdbo
POSetting Z-Index in DataBound items on a Canvas
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting Z-Index in DataBound items on a Canvas
    primarykey
    data
    text
    <p>I am trying to bind a list of items to an <code>ItemsControl</code>, using a <code>Canvas</code> layout, where the item has multiple "levels". This is easiest to explain using an image:</p> <p><img src="https://i.stack.imgur.com/wOFzA.png" alt="Problem"></p> <p>My lower level is a drop-shadow in this case. Because I assumed the drop shadow would be attached to the main element (a <code>Button</code>), I created another visual element, a Border, which sits behind the Button and has the shadow attached. What I would like is for all of my shadow elements to be at the same overall <code>ZIndex</code>, and all of the Button elements to be above them.</p> <p>In practice, it appears that WPF renders the contents of my template as a single UI element, essentially flattening the <code>ZIndex</code>es within it. Is there any way I can make it so that the <code>ZIndex</code> values are not flattened?</p> <p>I have created a sample below which shows the problem:</p> <pre><code>&lt;Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="250" Width="600" Background="White"&gt; &lt;Window.Resources&gt; &lt;DropShadowEffect Color="Blue" BlurRadius="75" x:Key="ActionDropShadow" /&gt; &lt;XmlDataProvider x:Key="myData" XPath="Data/Items"&gt; &lt;x:XData&gt; &lt;Data xmlns=""&gt; &lt;Items&gt; &lt;Item X="50" Title="AAA" /&gt; &lt;Item X="100" Title="BBB" /&gt; &lt;Item X="150" Title="CCC" /&gt; &lt;/Items&gt; &lt;/Data&gt; &lt;/x:XData&gt; &lt;/XmlDataProvider&gt; &lt;DataTemplate x:Key="BoxTemplate"&gt; &lt;Grid&gt; &lt;Border Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /&gt; &lt;Button Background="White" BorderThickness="1"&gt; &lt;TextBlock Text="{Binding XPath=@Title}" /&gt; &lt;/Button&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/Window.Resources&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="*" /&gt; &lt;RowDefinition Height="Auto" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;ItemsControl Grid.Column="0" x:Name="list" ItemTemplate="{StaticResource BoxTemplate}" ItemsSource="{Binding Source={StaticResource myData},XPath=*}"&gt; &lt;ItemsControl.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;Canvas /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/ItemsControl.ItemsPanel&gt; &lt;ItemsControl.ItemContainerStyle&gt; &lt;Style TargetType="ContentPresenter"&gt; &lt;Setter Property="Canvas.Left" Value="{Binding XPath=@X}" /&gt; &lt;Setter Property="Canvas.Top" Value="50" /&gt; &lt;Setter Property="Width" Value="50" /&gt; &lt;Setter Property="Height" Value="80" /&gt; &lt;/Style&gt; &lt;/ItemsControl.ItemContainerStyle&gt; &lt;/ItemsControl&gt; &lt;Canvas Grid.Column="1"&gt; &lt;Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /&gt; &lt;Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="White" BorderThickness="1"&gt; &lt;TextBlock Text="AAA" /&gt; &lt;/Button&gt; &lt;Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /&gt; &lt;Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="White" BorderThickness="1"&gt; &lt;TextBlock Text="BBB" /&gt; &lt;/Button&gt; &lt;Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" /&gt; &lt;Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="White" BorderThickness="1"&gt; &lt;TextBlock Text="CCC" /&gt; &lt;/Button&gt; &lt;/Canvas&gt; &lt;TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"&gt;Databinding Version&lt;/TextBlock&gt; &lt;TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"&gt;What it should look like&lt;/TextBlock&gt; &lt;/Grid&gt; &lt;/Window&gt; </code></pre> <p>Thanks in advance for any ideas you can offer!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDave Clemmer
    1. USRichard
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSetting Z-Index in DataBound items on a Canvas
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload