WPF Designer - 在元素内选择元素

Question

我是 WPF 新手，所以我会接受每一条建议。我的问题： 我使用 Designer 以我喜欢的方式放置 UI 的不同组件。这很棒。这种类型的 XAML 结构出现了问题：

<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>

通常当我想在场景中移动某些东西时，我只需选择它并拖动/更改它，因为它比用 XAML 编写要容易得多。但是，使用上面的代码，如果我想从内部 TabControl 中选择一些东西，我就是不能。它会自动选择上面的那个，这使得管理 UI 有点困难。我猜这与 Z-Index 有关，但我不太确定。我知道这可能是一个愚蠢的问题，但它让我很挣扎，所以如果有人向我解释这一点，我将非常感激！

谢谢！

Answer 1

我的猜测是，您的网格相互叠加，捕捉点击并阻止选择下面的元素（就像您提到的 z 顺序）。

注意事项

这并不是设计师所特有的，如果您将 Hit Testable 元素分层放置在每个元素之上，即使它们看起来透明，它们仍然会捕获点击并“窃取”焦点。您可以采取各种措施来防止这种情况发生，一个选项可能是在您希望点击“传递”到其下方元素的元素上设置 IsHitTestVisible=false。另一种选择是将元素的背景设置为 {x:Null}，而不是默认值（透明）。

您可以使用可能位于 VS 窗口（或视图 | 其他窗口 | 文档大纲）左侧的文档大纲面板来导航可视化树......直观地。这将允许您“选择”一个项目，即使它位于其他项目下方。但是，即使它在文档大纲中被选中，它也不会浮动到设计表面的顶部，因此您将无法拖动它来定位它，但您可以抓取重新调整大小处理并访问所选元素的属性窗口。

最终你必须“隐藏”它上面的元素以获得你想要的拖动定位。

Answer 2

我遇到了同样的问题 - 我正忙着在 WPF 设计器中布置我的应用程序，而我之前可以移动的东西是不可选择和不可拖动的，TabControl 总是在窃取焦点。

问题似乎在于 TabItem 被折叠。我发现无法选择 TabItem 中包含 Visibility="Collapsed" 的任何内容。

如果您需要移动东西，请尝试暂时将可见性更改为Visible - 我能够在设计器中移动东西，然后再次将可见性设置回来。

我没有特别彻底地对此进行测试，这有点杂乱无章，但它对我来说已经足够好进行布局了。