Scrollviewer 和 SIP 问题 (WP7.5 Mango)

Question

我正在处理一个包含注册表单的应用程序。该表单包含多个文本输入框，因此使用 ScrollViewer 允许它们全部显示在一个页面上。

以下是我正在使用的 XAML 代码的精简示例：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="SCROLLVIEWER TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="registration" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <ScrollViewer Grid.Row="1">
        <StackPanel>
            <TextBlock Text="Hello" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello1" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello2" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello3" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello4" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello5" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello6" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello7" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="Hello8" Margin="12,0,0,0"/>
            <TextBox />
            <TextBlock Text="END" Margin="12,0,0,0"/>
            <TextBox />
        </StackPanel>
    </ScrollViewer>
</Grid>

（请注意，ScrollViewer 位于网格单元格内，这意味着标题面板应始终保持 OnScreen）

滚动效果很好，所以这不是问题。但是，当用户选择文本框输入数据（即软键盘打开）时，系统会将整个页面的内容（包括注册标题面板）推送到周围，这不是预期的行为。 [查看 Windows Phone 上的人脉应用并尝试添加新联系人。这包含类似的结构，但 ScrollViewer 仅通过向上推滚动查看器中的内容来正确运行]

测试用例

• 选择一个在屏幕顶部附近可见的文本框以打开键盘。
• 尝试在打开键盘的情况下滚动到页面底部。
• 页面底部的项目无法访问。

或

• 选择一个在屏幕底部附近可见的文本框。
• 整个页面的内容被上推。
• 尝试在打开键盘的情况下滚动到页面顶部。
• 无法访问页面顶部的项目，并且在关闭键盘之前，标题面板永远不会重新出现。

对于解决此问题的任何帮助将不胜感激。谢谢。

Answer 1

问题是 ScrollViwer 的高度在键盘出现后并没有被修改，所以会被裁剪掉。一种解决方案是修改 scrollviwer 的高度（根据键盘高度），然后重新定位它（这可能会让您有些头疼）。

另一个问题是知道键盘何时出现 - 您可以在所有 TextBox 上注册 GotFocus/LostFocus 事件，但这不是一个很好的解决方案。这可能会对您有所帮助：http://blogs.msdn.com/b/jaimer/archive/2010/11/05/guessing-if-the-sip-is-visible-in-a-windows-phone-application.aspx

希望这会有所帮助:)

Answer 2

我认为你可以从另一个角度来解决这个问题。手机将向上滚动页面，这样 SIP（​​软件键盘）就不会覆盖有焦点的 TextBox。

但是，您可以通过检测 ScrollViewer 中包含的顶部元素上的触摸事件来强制隐藏 SIP，例如：

<ScrollViewer Grid.Row="1">
    <StackPanel ManipulationDelta="OnScrollViewerGridManipulationDelta">`

然后，通过将焦点赋予隐藏按钮（大小为 0x0 像素），这将强制 SIP 关闭。然后您的用户就可以按预期上下滚动滚动查看器...

    private void OnScrollViewerGridManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
    {
        // This will hide the SIP if it is currently showing. 
        // We can't do this directly, but we can force this by taking focus away from any of the TextBoxes that may have it.
        this.hiddenButton.Focus();
    }

Answer 3

我开发的一个应用程序也遇到了同样的问题，我处理它的方法是找出包含输入 textboxs 的面板的自动高度，然后手动设置高度并添加大约400 - 500 像素到底部，使其滚动良好。效果非常流畅，不会让你的 UI 看起来“hackish”恕我直言。

在您的情况下，您必须找出 LayoutRoot Grid 的自动高度，然后在第 1 行的 RowDefinition 上手动设置高度 - 记住添加额外的 400 像素（或任何看起来适合您的情况）。

为了便于输入，然后我处理每个TextBox 的每个OnKeyDown 事件，以便在点击Enter 时将焦点更改为下一个TextBox。在最后一个 TextBox 上，我将焦点设置为 this.focus()，它将焦点设置为页面并隐藏 SIP。

Answer 4

请看看我的小图书馆 - https://siphelper.codeplex.com/

它修改了scrollviewer的高度，内容可以滚动到最顶端/最底端。

如果您有任何建议，请随时与我联系。