键盘重叠文本框 [英] Keyboard overlaps textbox

问题描述

我使用文本框的列表在WP8应用一个注册文件。

文本框的数目是相当大的，所以用户必须在它们之间滚动。
。要一个字段之间的导航到另一个，我添加了两个applicationbarIcons，下一个和以前。下压在将改变的焦点从列表中的下一文本，以及与文本框的高度（本例中50）滚动的滚动观看者的内容。

不过，有时候，切换焦点元素波纹管的时候，键盘覆盖文本框。 （内容不向上滚动）。

有没有办法迫使文本框移到键盘上方，即使它是在一个滚动视图？

 <的ScrollViewer X：名称=的ContentPanelGrid.Row =1保证金=12,0,12， 0> 
<&StackPanel的GT; 
< TextBlock的文本={绑定源= {StaticResource的LocalizedStrings}，路径= LocalizedResources.STRING_CONTACT}保证金=10,5粗细=SemiBold前景=＃878780>< / TextBlock的> ; 
< StackPanel的保证金=10,5HEIGHT =190背景=＃F4F3F4> 
<文本框引发LostFocus =firstNameTxt_LostFocus_1的GotFocus =firstNameTxt_GotFocus_1保证金=0 -7字号=23X：NAME =firstNameTxt了borderThickness =0背景=透明InputScope = PersonalFullName><&文本框GT; 
<文本框引发LostFocus =firstNameTxt_LostFocus_1的GotFocus =firstNameTxt_GotFocus_1保证金=0 -7字号=23X：NAME =lastNameTxt了borderThickness =0背景=透明InputScope = PersonalFullName>< /我：DefaultTextBox> 
<文本框引发LostFocus =firstNameTxt_LostFocus_1的GotFocus =firstNameTxt_GotFocus_1保证金=0 -7字号=23X：NAME =MobileTxt了borderThickness =0InputScope =号码的背景=透明>< /文本框> 
<文本框引发LostFocus =firstNameTxt_LostFocus_1的GotFocus =firstNameTxt_GotFocus_1保证金=0 -7字号=23X：NAME =EmailTxt了borderThickness =0背景=透明> 
< / StackPanel的> 
< /&的ScrollViewer GT; 
  

后面的代码：

 无效left_Click（对象发件人，EventArgs五）
 {
 INT指数= this.controls.IndexOf（currentControl） -  1; 
如果（指数== -1）
 {
 this.Focus（）; 
的回报; 
} 
 
 currentControl = this.controls [指数] 
 ContentPanel.ScrollToVerticalOffset（ContentPanel.VerticalOffset  -  50）; 
 currentControl.Focus（）; 
 
 
} 
  

解决方案

这是对WP8一个常见的​​问题。当一个文本框的重点是，它会转化应用的 RootVisu​​al 来使其视图。这并不在某些情况下很好地工作（当剪贴板上，或在您的情况）。一种解决方法是手动翻译 RootVisu​​al 到所需的垂直于的GotFocus 偏移和引发LostFocus 文本框的事件。

 私人无效TranslateRootVisu​​alY（INT yNew）
 {
 VAR rootFrame = Application.Current.RootVisu​​al为PhoneApplicationFrame; 
 rootFrame.RenderTransform =新CompositeTransform（）{TranslateY = yNew}; 
} 
  

在你的情况，你可以消除自动翻译，使的ScrollViewer 滚动到的GotFocus 事件：

 私人无效firstNameTxt_GotFocus_1（对象发件人，RoutedEventArgs E）
 {
 TranslateRootVisu​​alY（0）; 
 Dispatcher.BeginInvoke（（）=> {
双destOffset; 
 //...calculate目的地偏移
 ContentPanel.ScrollToVerticalOffset（destOffset）; 
}） ; 
} 
  





destOffset 可从发送者和其他函数计算像 GetRectFromCharacterIndex

I'm using a list of textboxes for a registering document in a WP8 app.

The number of textboxes is quite large, so the user has to scroll between them. To navigate between one field to another, I added two applicationbarIcons, next and previous. Pressing on next will change the focus to the next textbox from list, and scroll the content of the scroll viewer with the height of the textbox (in this case 50).

However, sometimes, when switching the focus to the element bellow, the keyboard covers the text box. (the content doesn't scroll up).

Is there a way to force the textbox to move above the keyboard, even if it is in a scroll view?

<ScrollViewer x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock Text="{Binding Source={StaticResource LocalizedStrings}, Path=LocalizedResources.STRING_CONTACT}" Margin="10,5" FontWeight="SemiBold" Foreground="#878780"></TextBlock>
            <StackPanel Margin="10,5" Height="190" Background="#F4F3F4">
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="firstNameTxt"   BorderThickness="0" Background="Transparent" InputScope="PersonalFullName"><TextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="lastNameTxt"    BorderThickness="0" Background="Transparent" InputScope="PersonalFullName"></my:DefaultTextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="MobileTxt"  BorderThickness="0" InputScope="Number" Background="Transparent" ></TextBox>
                <TextBox LostFocus="firstNameTxt_LostFocus_1" GotFocus="firstNameTxt_GotFocus_1" Margin="0,-7" FontSize="23" x:Name="EmailTxt" BorderThickness="0" Background="Transparent">
        </StackPanel>
</ScrollViewer>

Code behind:

void left_Click(object sender, EventArgs e)
    {
        int index = this.controls.IndexOf(currentControl) - 1;
        if (index == -1)
        {
            this.Focus();
            return;
        }

        currentControl = this.controls[index];
        ContentPanel.ScrollToVerticalOffset(ContentPanel.VerticalOffset - 50);
        currentControl.Focus();


    }

解决方案

This is a common issue on WP8. When a textbox is focused, it will translate Application 's RootVisual to bring it into view. This doesn't work well in some cases (when clipboard is on, or in your case). A workaround is manually translating RootVisual to a desired vertical offset on GotFocus and LostFocus events of TextBox.

private void TranslateRootVisualY(int yNew)
{      
  var rootFrame = Application.Current.RootVisual as PhoneApplicationFrame;
  rootFrame.RenderTransform = new CompositeTransform() {TranslateY = yNew};
}

In your case, you can eliminate the automatic translation and make ScrollViewer scroll to desired offset in GotFocus event:

private void firstNameTxt_GotFocus_1(object sender, RoutedEventArgs e)
{
   TranslateRootVisualY(0);
   Dispatcher.BeginInvoke(() =>{
      double destOffset;
      //...calculate destination offset
      ContentPanel.ScrollToVerticalOffset(destOffset);
   });
}

destOffset can be calculated from sender and other function like GetRectFromCharacterIndex

这篇关于键盘重叠文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！