WPF Designer - Выбор элемента внутри элемента

Question

Я новичок в WPF, поэтому я приму любой совет. Моя проблема: я использую конструктор, чтобы расположить различные компоненты интерфейса так, как мне нравится. И это здорово. Проблема возникла с этим типом структуры 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, я просто не могу. Он автоматически выбирает приведенный выше, что делает управление пользовательским интерфейсом немного сложнее. Я думаю, это как-то связано с Z-Index, но я не совсем уверен. Я знаю, что это, вероятно, нубистский вопрос, но это заставляет меня бороться, поэтому я буду очень благодарен, если кто-то объяснит мне это!

Спасибо!

Answer 1

Ну, я думаю, у вас есть сетки, наложенные друг на друга, которые фиксируют щелчки и предотвращают выбор элементов ниже (z-порядок, как вы упомянули).

Несколько вещей, на которые стоит обратить внимание

Это не совсем характерно для дизайнера: если у вас есть элементы Hit Testable, наложенные поверх каждого, даже если они выглядят прозрачными, они все равно будут захватывать щелчок и "красть" фокус. Чтобы предотвратить это, вы можете сделать разные вещи, например, установить IsHitTestVisible = false для элементов, которые вы хотите, чтобы клики "проходили" к элементам под ним. Другой вариант - установить для фона элемента значение {x:Null} вместо значения по умолчанию (которое является прозрачным).

Вы можете использовать панель "Структура документа", вероятно, в левой части окна VS (или "Вид" | "Другие окна" | "Структура документа"), чтобы перемещаться по дереву визуалов... визуально. Это позволит вам "выбрать" предмет, даже если он находится под другими предметами. Однако, даже если он выделен в структуре документа, он не будет перемещен в верхнюю часть области дизайна, поэтому вы не сможете перетащить его, чтобы расположить его, но вы сможете получить изменение размера обрабатывает и обращается к окну свойств для выбранного элемента.

В конечном итоге вам нужно "спрятать" элемент, находящийся сверху, чтобы получить желаемое позиционирование.

Answer 2

У меня была та же проблема - я занимался раскладыванием своего приложения в конструкторе WPF, и вещи, которые я мог передвигать раньше, были неисключаемыми и необратимыми, с TabControl всегда крадет фокус.

Проблема, кажется, связана с TabItem будучи свернутым. Я обнаружил, что невозможно выбрать что-либо внутри TabItem, который имел Visibility="Collapsed",

Если вам нужно передвигаться, попробуйте изменить видимость на Visible временно - я смог передвигать вещи в конструкторе, а затем снова установить видимость обратно.

Я не проверил это особенно тщательно, и это немного круто, но это сработало достаточно хорошо для меня, чтобы сделать макет.