键盘存在时Windows Phone App滚动问题

时间:2013-08-15 09:22:55

标签: windows xaml windows-phone-8 scroll scrollviewer

我有一个由几个UI元素组成的屏幕,主要是TextBoxes。当TextBox聚焦时,整个页面会向上推,将标题移到屏幕外。我希望标题位于固定位置,其余内容将在ScrollViewer中向上推。理想情况下,我希望将偏移按预期放置并显示/隐藏键盘,并正确聚焦UI元素。正确的滚动行为的一个很好的例子是本机警报应用程序。 任何帮助表示赞赏。干杯!

as here as here as here

2 个答案:

答案 0 :(得分:1)

呈现SIP键盘时,PhoneApplicationFrame.TranslateTransform.Y设置为特定值。要更新布局,我们只需将上边距设置为指定值(-s),然后Silverlight布局系统将解决问题。

这里是XAML部分:

<Grid x:Name="LayoutRoot" >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="WINDOWS PHONE" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="developer's ?" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    <Grid Grid.Row="1" Margin="12,0,12,0"></Grid>
    <TextBox Grid.Row="2" LostFocus="TextBox_OnLostFocus" />
</Grid>

C#部分

public partial class MainPage : PhoneApplicationPage
{
    private static double newValue = 0.0;
    public static readonly DependencyProperty TranslateYProperty = DependencyProperty.Register("TranslateY", typeof(double), typeof(MainPage), new PropertyMetadata(0d, OnRenderXPropertyChanged));

    public MainPage()
    {
        InitializeComponent();
        this.Loaded += BindToKeyboardFocus;
    }

    private void BindToKeyboardFocus(object sender, RoutedEventArgs e)
    {
        PhoneApplicationFrame frame = Application.Current.RootVisual as PhoneApplicationFrame;
        if (frame != null)
        {
            var group = frame.RenderTransform as TransformGroup;
            if (group != null)
            {
                var translate = group.Children[0] as TranslateTransform;
                var translateYBinding = new Binding("Y");
                translateYBinding.Source = translate;
                SetBinding(TranslateYProperty, translateYBinding);
            }
        }
    }

    public double TranslateY
    {
        get { return (double)GetValue(TranslateYProperty); }
        set { SetValue(TranslateYProperty, value); }
    }

    private static void OnRenderXPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if ((double)e.NewValue <= newValue)
            ((MainPage)d).UpdateTopMargin((double)e.NewValue);
        newValue = (double)e.NewValue;
    }

    private void UpdateTopMargin(double translateY)
    {
        LayoutRoot.Margin = new Thickness(0, -translateY, 0, 0);
    }

    private void TextBox_OnLostFocus(object sender, RoutedEventArgs e)
    { 
        LayoutRoot.Margin = new Thickness();
    }
}

我认为这会有所帮助。 这是我的GitHub链接 - https://github.com/rezacse/fixedHeaderOnTextBoxFocus

答案 1 :(得分:0)

我有同样的问题。但最后我解决了它,我只是使用了Height属性来做到这一点。请执行以下步骤

  • 首先创建一个ScrollViewer
  • 让ScrollViewer创建一个容器(例如:Grid / StackPanel / Border等...)并将每个控件放入其中。
  • 为ScrollViewer和Container设置固定高度(注意:容器的高度应该大于ScrollViewer的高度)

请参阅以下代码

<ScrollViewer Height="500">
        <Grid Name="Container" Height="700">
            <TextBox/>
            <TextBox/>
            <TextBox/>
        </Grid>
</ScrollViewer>

现在您可以滚动容器Grid甚至显示的KeyBoard,甚至可以将焦点放在TextBox上。你可以对任何文本框进行聚焦,而ScrollViewer也不会向后滚动。