Не удается ввести ввод текста в элементе управления TextBox внутри всплывающего окна

Я хочу использовать CommandBar и Flyout для создания чего-то подобного.

выпадающее окно поиска

Пользователь должен нажать кнопку в CommandBar (открывается Flyout), затем ввести текст в TextBox, а затем нажать кнопку справа от TextBox, чтобы начать поисковый запрос. Проблема в том, что когда я нажимаю на TextBox, я не могу ввести текст. Кажется, что он теряет фокус, прежде чем я могу что-то написать. Ниже приведен пример кода. Что случилось?

<Page.Resources>
    <DataTemplate x:Key="Search">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" />
            <AppBarButton Grid.Column="1" Icon="Find" />
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" >
                    <ContentPresenter ContentTemplate="{StaticResource Search}"/>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

c# xaml uwp commandbar flyout
person M.Stack    schedule 23.08.2016    source источник
comment
Я не могу воспроизвести вашу проблему. Все отлично работает с вашим кодом. Вы делаете что-то в коде, блокируя это текстовое поле?   -  person lokusking    schedule 23.08.2016
comment
Будьте осторожны с этим, на устройствах с сенсорным экраном экранная клавиатура может находиться в слое поверх всплывающего меню, эффективно скрывая текстовые поля. Если затем вы захотите скрыть клавиатуру, щелкнув область за пределами всплывающего меню на экране, это также закроет всплывающее меню. Не очень хороший UX   -  person Jasper    schedule 07.08.2018

Ответы (3)


arrow_upward
23
arrow_downward

Установите для свойства AllowFocusOnInteraction значение true в файле AppBarButton.

Решение в XAML (если минимальная целевая версия приложения — 10.0.14393 или выше)

    <AppBarButton x:Name="myAppBarButton"
                  Icon="Find"
                  AllowFocusOnInteraction="True">
        <AppBarButton.Flyout>
            <Flyout Placement="Bottom" >
                <ContentPresenter ContentTemplate="{StaticResource Search}"/>
            </Flyout>
        </AppBarButton.Flyout>
    </AppBarButton>

Если минимальная версия приложения меньше, чем юбилейное обновление 1607 (сборка 10.0.14393) (даже если ваша целевая версия 1607 или выше), вы не можете установить AllowFocusOnInteraction свойство непосредственно в XAML. Вместо этого вы должны сделать это в коде программной части.

Решение в коде программной части C#

// check if the AllowFocusOnInteraction property is available on the platform 
if (Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent("Windows.UI.Xaml.FrameworkElement", "AllowFocusOnInteraction"))
     myAppBarButton.AllowFocusOnInteraction = true;

Вы также можете обернуть его во вложенное свойство, которое можно использовать в XAML даже в старых версиях Windows 10.

Больше информации

Это новая функция в юбилейном обновлении Windows 10 (1607), сборка 14393.

Это улучшение для большинства применений панели приложений, но мешает вам, поэтому вам нужно будет переопределить значение по умолчанию, когда вы измените свою сборку на 14393 вместо 10586.

Вот сообщение в блоге ComboBox во всплывающем меню, прикрепленном к AppBarButton, теряет ввод мыши на 1607. Он также содержит реализацию прикрепленного свойства.

person Artemious    schedule 21.09.2016
comment
Я получаю эту ошибку компиляции, если устанавливаю свойство в xaml. Синтаксическая ошибка XBF «0x09C4»: свойство не найдено. Проверьте, существует ли свойство, которое вы устанавливаете в XAML, в минимальной версии платформы, указанной в проекте (TargetPlatformMinVersion). - person Rahul Sonone; 14.10.2016
comment
Вот так. Как я уже говорил в ответе, вы нацелены на юбилейное обновление Windows 10 (1607) сборки 14393 или выше, но минимальная версия приложения для Windows 10 ниже, вам следует проверить, доступно ли свойство AllowFocusOnInteraction на платформе. Таким образом, вы не можете установить свойство AllowFocusOnInteraction в XAML. Вместо этого сделайте это в коде программной части. - person Artemious; 14.10.2016
comment
Другим решением было бы создать присоединенное свойство, которое инкапсулирует это поведение, и использовать это присоединенное свойство в XAML. - person Artemious; 14.10.2016
comment
Я сделал то же самое прикрепленное свойство @Artemious - person Rahul Sonone; 16.10.2016

arrow_upward
1
arrow_downward

ваш TextBox на самом деле никогда не получает фокуса, каким-то образом всплывающее окно предотвращает это, единственное действие, которое я могу получить от этого TextBox, - это состояние PointerOver, из-за чего оно выглядит так, как будто оно получило фокус, но это не так.

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

<Grid>
    <CommandBar RequestedTheme="Dark">
        <AppBarButton Icon="Find">
            <AppBarButton.Flyout>
                <Flyout Placement="Bottom" Opened="FlyoutBase_OnOpened">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox x:Name="Test"/>
                        <AppBarButton Grid.Column="1" Icon="Find"/>
                    </Grid>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Grid>

а затем код позади:

private void FlyoutBase_OnOpened(object sender, object e)
{
    Test.Focus(FocusState.Programmatic);
}
person RTDev    schedule 23.08.2016
comment
Является ли это ошибкой в ​​​​фреймворке или нормально устанавливать фокус в коде? - person M.Stack; 23.08.2016
comment
Похоже на баг, особенно если правда то, что написал Тот Тибор (что бывает только с юбилейным обновлением). Установка фокуса в коде больше похожа на взлом и определенно не очень хорошее решение (но работает). Microsoft исправит это или нет, в UWP есть много ошибок с другими вещами, которые MS не исправляла целую вечность, поэтому я бы не стал ждать этого. Особенно, если нет места, где кто-то может опубликовать отчет об ошибке. - person RTDev; 24.08.2016

arrow_upward
0
arrow_downward

Я могу воспроизвести проблему. Я думаю, что это ошибка в Anniversary Update (1607) SDK (14393), потому что, если я понизил целевой SDK до 10586, все работает нормально.

PS: я не знаю, как сообщить об этой ошибке в Microsoft.

person Tóth Tibor    schedule 23.08.2016