What panels and containers allow Overlapping of UI elements

Question

What are the panels and containers that allow overlapping with varying z-index ? (escluding Canvas)

--Since I was asked for details this is part of the code:

 <DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
                               VerticalAlignment="Top">
                        <Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
                                   RadiusX="4"
                                   Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
                                   MouseLeftButtonUp="TargetColorClick"
                                   ToolTip="{Binding (extensions:PaletteColor.Name)}" />

All of them, if you allow negative margins. Why are you asking? — Clemens, Apr 11 '18 at 18:14
I want a numeric Texblock over a Rectangle Element and be perfectly centered above it, it's a counter over a Rounded Rectangle element. Rectangle element and a group of other elements are inside a DockPanel, now I have to add just this new element exactly above the Rectangle and centered above it. — Relok, Apr 11 '18 at 18:30
Putting two elements in the same column and row of a Grid would of course also work. — Clemens, Apr 11 '18 at 18:44

Relok · Answer 1 · 2018-04-11T18:57:19.857

Ok I was able to do this with Clemens support:

<TextBlock TextWrapping="Wrap" Text="16"
                                   Margin="-32,0,0,0" Height="16"
                                   HorizontalAlignment="Center" />

--Answering to another question my XAML for whole control looks like this:

<ItemsControl ItemsSource="{Binding (local:MainWindow.CurrentPaletteSet)}" Width="400" Margin="665,67,14,-67">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DockPanel HorizontalAlignment="Left" Height="32" LastChildFill="False" Margin="10,0,0,10"
                               VerticalAlignment="Top">
                        <Rectangle Fill="{Binding (extensions:PaletteColor.FillBrush)}" Height="32" RadiusY="4"
                                   RadiusX="4"
                                   Stroke="#FF000000" Width="32" HorizontalAlignment="Left" VerticalAlignment="Top"
                                   MouseLeftButtonUp="TargetColorClick"
                                   ToolTip="{Binding (extensions:PaletteColor.Name)}" />
                        <TextBlock TextWrapping="Wrap" Text="16"
                                   Margin="-32,0,0,0" Height="16"
                                   HorizontalAlignment="Center" />
                        <TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullRgbString)}"
                                   Margin="5,0,0,0" Height="16"
                                   HorizontalAlignment="Left" DockPanel.Dock="Top" />
                        <TextBlock TextWrapping="Wrap" Text="{Binding (extensions:PaletteColor.FullHslString)}"
                                   Margin="5,0,0,0"
                                   Height="16" HorizontalAlignment="Left" DockPanel.Dock="Top" MinWidth="121" />
                    </DockPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel></ItemsControl>

You realise there are some severe limitations to that positioning you're doing there? — Andy, Apr 11 '18 at 18:46
Yes, for istance that the margin depends on the size of previous rectangle, and so I should bind to that size, is one thing I want to try to fix, If I don't declare x:Name (which maybe is not a good idea since those are multiple rectangles from a collection inside the DataTemplate of an ItemsControl element) for previous Rectangle control I've not yet found the correct expression to bind to previous declared item inside that DockPanel, can you suggest how to do that with only XAML ? — Relok, Apr 11 '18 at 18:51
Why are you using a dockpanel? I think a grid would be my inclination. Then put rectangle and textblock in same "cell" and use alignment. — Andy, Apr 11 '18 at 19:28

What panels and containers allow Overlapping of UI elements

1 Answers1