ScrollViewer 通过点击选择 NumberBox 到空白 space

ScrollViewer selects NumberBox by click to blank space

我有一个带有 ScrollViewer 和 NumberBox 的简单 UWP 项目。 当用户单击空白 space 时,ScrollViewer select 是 xaml 文件中的第一个 NumberBox。

...
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
...

<ScrollViewer>
   <TextBlock Text="Some text" />
   <muxc:NumberBox/>
</ScrollViewer>

但是如果添加一些像上面的 Combobox 这样的项目,那么 ScrollViewer 不会 select NumberBox

<ScrollViewer>
   <TextBlock Text="Some text" />
   <ComboBox />
   <muxc:NumberBox/>
</ScrollViewer>

如果我删除 ScrollViewer,NumberBox 将不会 select 当用户点击 blunk space。

<TextBlock Text="Some text" />
<muxc:NumberBox/>

如何解决这个问题?

在ScrollViewer中,焦点会传递给内容中第一个可聚焦的控件,所以当ScrollViewer只有TextBlock和NumberBox时,NumberBox会自动获得焦点。当您在 NumberBox 前面添加 ComboBox 时,ComboBox 默认获得焦点。另外,如果删除了ScrollViewer,由于Grid面板不是从Control派生出来的,所以它不是“可聚焦的”。单击空白处时,NumberBox 不会获得焦点。

如果想select NumberBox点击空白处,可以尝试使用Control.Focus()方法将焦点设置在NumberBox上。例如:

.xaml:

<ScrollViewer PointerPressed="ScrollViewer_PointerPressed"  Tapped="ScrollViewer_Tapped">
    <StackPanel>
        <TextBlock Text="Some text" />
        <ComboBox></ComboBox>
        <muxc:NumberBox x:Name="MyNumberBox"/>
    </StackPanel>
</ScrollViewer>

.cs:

private void ScrollViewer_Tapped(object sender, TappedRoutedEventArgs e)
{
    if(IsClicked)
        MyNumberBox.Focus(FocusState.Programmatic);
    IsClicked = false;
}

private bool IsClicked { get; set; }

private void ScrollViewer_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    IsClicked = true;
}

单击空白时禁用 select 第一项 space

<ScrollViewer IsTabStop="True">