Question

I’m developing a small visual designer and I need to implement a function of indexing elements. All elements have their own level of visibility depend on each other. I’m not using ZIndex for main elements so they are displayed as they are in visual tree. But all elements when they are in set index mode have a region with an index number. The problem is that these regions inherit zindex of their parents. I tried to set up for these regions zindex = 1000, but it didn’t help.

<ControlTemplate x:Key="IndexRegion" TargetType="ContentControl">
        <Border>
            <StackPanel Orientation="Horizontal">
                <!--<TextBlock Text="Индекс: "></TextBlock>-->
                <TextBlock Text="{Binding TabIndex}"></TextBlock>
            </StackPanel>
        </Border>
    </ControlTemplate>
<Style x:Key="IndexRegionStyle" TargetType="ContentControl">
        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        <Setter Property="Margin" Value="1 -15 0 0"></Setter>
        <Setter Property="Visibility" Value="{Binding IsTabIndexVisible, Mode=OneWay, Converter={StaticResource VisibilityOfBool}}"></Setter>
        <Setter Property="Panel.ZIndex" Value="1000"></Setter>
    </Style>


<DataTemplate DataType="{x:Type viewModel:WizardFormTextFieldViewModel}">
  <wfSurface:DesignSurfaceItemContainer Width="{Binding Width}" Height="{Binding Height}" ClipToBounds="False">
    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

      <ContentControl Style="{StaticResource IndexRegionStyle}" Template="{StaticResource IndexRegion}">
      </ContentControl> --- this is an index region

      <Border Style="{StaticResource WrongElement}">
        <Border Style="{StaticResource TextFieldStyle}">                        
        </Border>
      </Border>
    </Grid>
  </wfSurface:DesignSurfaceItemContainer>           
</DataTemplate>

How can I make all regions to be above all main elements?

Thank you!

Answer 1

The ZIndex is an index to organize the z-order of siblings (child controls of the same container)

If you want elements to be on top of ‘everything’ you need to add a new container that is on top of everything. You cannot specify this from a lower level such as this Template. The UI remains a hierarchy, you can’t break that as far as I know.