C# .Net WPF Custom User Control zIndex issue with similar user control

User control details:

Have created drop down list control (Like as combo box), clicking on down arrow button, it displays a list below the text box

I have set zIndex property of my User control

Issue:

Case 1: When there is another user control (other than my custom user control), and if drop down list is displayed, other user control hides behind my user control. This is perfectly Ok

Case 2: There are 2 Custom User controls, if list is displayed from first user control, second user control appears on the list. This is where i am facing issue

XAML of my control is as below

    <UserControlx:Class="UserControls.AutoCompleteComboBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Panel.ZIndex="1110" LostFocus="UserControl_LostFocus" Height="Auto">

        <Canvas Name="MainCanvas">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" MinWidth="150"></ColumnDefinition>
                    <ColumnDefinition Width="20"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBox Name="autoTextBox" Height="20" MinWidth="150" Width="Auto" MinHeight="20" Style="{DynamicResource AutoCompleteBox}" BorderThickness="2"
                     Margin="0,0,0,0" TextWrapping="NoWrap"  Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
                <Button Cont开发者_Python百科ent="6" FontFamily="Marlett" Grid.Row="0" Grid.Column="1" FontSize="15" Margin="0,0,0,0" Height="20" Width="20" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{StaticResource BackgroudBlueBrush}"  Click="Button_Click" Padding="0" Cursor="Hand"></Button>
                <StackPanel Grid.Row="1" Grid.ColumnSpan="2" >
                    <ListBox Name="suggestionListBox" SelectionChanged="suggestionListBox_SelectionChanged" MouseDown="suggestionListBox_MouseDown"
                     Background="LightYellow" SnapsToDevicePixels="True"
                     Visibility="Collapsed" 
                     MinWidth="150" IsHitTestVisible="True" MinHeight="70" Height="70"
                     VerticalAlignment="Top" LostFocus="suggestionListBox_LostFocus"/>
                </StackPanel>
            </Grid>
        </Canvas>
</UserControl>

Your approach is not the right one to correctly manage the overlap of controls. Perhaps you may create some trick using the ZIndex property, but that won't be the solution.

If you need a drop-down control, the best way is to use a Popup control and play around it. Basically, it creates another borderless window, being child of the yours.

Another approach, maybe simpler but not good as the Popup, is using an Adorner. Maybe this one is the most similar techinique to the yours.

Cheers

Have you tried setting the ZIndex of the StackPanel to 1+ the control's zindex? That should raise the drop down portion above any other instance of your user control.

Canvas.ZIndex can be used on StackPanels.