WPF Designer - Selecting element inside element

Question

I am new to WPF so I would accept every piece of advice. My problem: I use the Designer to put different components of the UI the way I like. And it's great. The problem came with this type of XAML structure:

<Window>
<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        /* Couple of buttons */
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="223*"/>
            <RowDefinition Height="99*"/>
        </Grid.RowDefinitions>
        <TabControl Margin="85,0,0,0" Padding="0,-5,0,0" Grid.RowSpan="2">
            <TabItem Visibility="Collapsed">
                <Grid>
        /* textboxes and labels */
                </Grid>
            </TabItem>
            <TabItem Visibility="Collapsed">
                <Grid>
                    <Border Visibility="Hidden" Margin="136,66,76,66" Panel.ZIndex="10" BorderThickness="1" Width="320" Height="180">
                        <Grid Background="White">
                            <Grid.Effect>
                                <DropShadowEffect BlurRadius="10" RenderingBias="Quality" Direction="270" ShadowDepth="3" Opacity="0.1"/>
                            </Grid.Effect>
                            /* labels, textboxes and buttons */
                        </Grid>
                    </Border>
                    <TabControl Margin="0,0,0,38">
                        <TabItem>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                /* other elements */
                            </Grid>
                        </TabItem>
                        <TabItem>
                            <Grid> 
                                <Grid>
                                    /* checkboxes */
                                </Grid>
                                <Grid>
                                    /* checkboxes */
                                </Grid>
                                /* labels */
                            </Grid>
                        </TabItem>
                        <TabItem>
                            <Grid>
                            </Grid>
                        </TabItem>
                    </TabControl>
                    /* buttons and labels */
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Grid>

Usually when I want to move something on the scene I just select it and drag / change it since it's a lot easier than just writing it in XAML. However, using the code above, if I want to select something from the inner TabControl I just can't. It automatically selects the one above which makes it a bit harder to manage the UI. My guess it's something to do with the Z-Index but I'm not really sure. I know it is probably a noobish question but it makes me struggle so I will be very thankful if someone explains this to me!

Thanks!

Answer 1

Well my guess is you have grids layered on top of each other that are capturing the clicks and preventing the selection of the elements below (z-order like you mention).

A few things to note

This isn't really specific to the designer, if you have Hit Testable elements layered on top of each, even if they look transparent, they will still capture the click and "steal" focus. You can do various things to prevent this, one option might be setting IsHitTestVisible=false on elements that you want clicks to "pass through" to elements below it. Another option is to set the Background of an element to {x:Null}, instead of the default (which is Transparent).

You can use the Document Outline panel probably on the left hand side of your VS window (or View | Other Windows | Document Outline) to navigate the Visual Tree...visually. This would allow you to "select" an item even it is underneath other items. However, even once it is selected in the document outline it won't be floated to the top of the design surface, so you won't be able to drag it around to position it, but you will be able to grab re-size handles and access the properties window for the selected element.

Ultimately you have to "hide" the element that is on top of it to get the drag positioning you want.

Answer 2

I had the same issue - I was busy laying out my app in the WPF designer, and things that I could move around before were unselectable and undraggable, with the TabControl always stealing focus.

The issue seems to be with the TabItem being Collapsed. I found it impossible to select anything inside a TabItem that had Visibility="Collapsed".

If you need to move things around try changing the visibility to Visible temporarily - I was able to move things around in the designer and then later set the visibility back again.

I haven't tested this particularly thoroughly and it's a bit of a kludge, but it worked well enough for me to do the layout.