Question

我在Windows手机中滚动有问题。我在页面上有很多元素，所以要添加滚动功能我把它放在ScrollViewer上。 Hovewer，当我在某些文本块上显示并且keyborad显示时，滚动工作但是它会切割页面的顶部和底部，因此用户无法访问它。你的应用程序有类似的问题并知道如何解决这个问题吗？

我真的很感激任何帮助

Link to image when I put screenshot with my problem

图片包含四个屏幕截图：

1）页面顶部

2）页面底部

3）专注于第一个文本框

4）当焦点设置为第一个TextBox

时，页面上可以到达的区域

最后一张图片显示当焦点设置到第一个文本框时可以进行的rached。正如您所看到的，当显示keybord时，我无法访问 Field 7 下面的文本框。

我需要的是能够在显示键盘时滚动和到达所有元素。

你知道如何解决我的问题

这是我的xaml代码：

<phone:PhoneApplicationPage
    x:Class="PhoneApp6.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <ScrollViewer Grid.Row="1" Height="600" Margin="12 0">
            <StackPanel>
                <StackPanel>
                    <TextBlock  Text="Name 1" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 2" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 3" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 4" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 5" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 6" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 7" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 8" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 9" />
                    <TextBox  />
                </StackPanel>

                <StackPanel>
                    <TextBlock  Text="Name 10" />
                    <TextBox  />
                </StackPanel>

                <Button>Submit</Button>
            </StackPanel>
        </ScrollViewer>
    </Grid>

</phone:PhoneApplicationPage>

Answer 1

这是一个已知问题，是由SIP更改屏幕的可视区域引起的。 David Gorden提到的链接确实有帮助，但您实际上需要更改滚动查看器的高度以获得完美的结果。为了使事情变得更复杂，WP不会触发SIP可见的事件！所以你需要挂钩GotFocus / LostFocus事件。

编辑您的滚动查看器，使其看起来像这样：

<ScrollViewer x:Name="_scrollViewer"
                  VerticalAlignment="Top"
                  GotFocus="UIElement_OnGotFocus"
                  LostFocus="UIElement_OnLostFocus" 
                  ... bla bla

现在在codebehind中添加以下内容：

private bool _isHdDevice;
    private int _sipHeight;
    private double _origHeight;

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        // todo - cater for landscape mode or sip scopenames that require extra space (predictive text and cut&paste icon)
        var deviceWidth = this.ActualWidth;
        _isHdDevice = (deviceWidth > 500);
        _sipHeight = _isHdDevice ? 540 : 375;
        _origHeight = _scrollViewer.Height;
    }

    private void UIElement_OnGotFocus(object sender, RoutedEventArgs e)
    {
        double height = this.ActualHeight - _sipHeight - TitlePanel.ActualHeight;
        _scrollViewer.Height = height;
        // the following lines are crucial otherwise a black band could appear above the SIP
        App.Current.RootVisual.RenderTransform = new CompositeTransform();
        this.UpdateLayout();
    }

    private void UIElement_OnLostFocus(object sender, RoutedEventArgs e)
    {
        _scrollViewer.Height = _origHeight;
    }

当sip（键盘）在视图中时，这基本上是调整滚动区域的大小。您需要添加更多代码以满足屏幕旋转，与文本框关联的范围名称以及剪切和粘贴图标（如果在视图中）之类的操作。但是这会让你前进并做到这一点。

如果有助于解决问题，请标记为已回答。

Answer 2

如果我理解正确的话，我在自己的应用程序中遇到了类似的问题，当键盘可见时无法向下滚动到最低的texbox。由于我不是那么聪明，我用以下方式解决了它：键盘启动时出现的间隔符，当键盘不亮时消失。

我的scrollviewer中输入的文本框项目都在wrappanels中，以保持整洁。在最后一个包装面板下面，我添加了另一个空的包装面板，名为＆＃34; spacer＆＃34;高度为120.默认设置为visibility.collapsed。

作为包装面板中每个文本框的gotfocus事件处理程序的一部分，我将spacer设置为visible。这允许在键盘启动时滚动到我的滚动查看器中的最后一个wrappanel / textbox。

作为每个文本框的lostfocus事件处理程序的一部分，spacer的可见性被设置回＆＃34;折叠。＆＃34;这样，当没有键盘时，滚动查看器底部没有一个大而时髦的空白空间。

这可能不是那么优雅，但它很容易，对我来说效果很好。我还没有遇到任何问题，但这并不意味着可能没有我错过的东西。

键盘显示时，滚动受限

2 个答案: