2015-03-05 4 views
1

Я создаю простой пример в телефоне Windows 8.1, где у меня проблема, связанная с пользовательским интерфейсом.Предотвращение прокрутки при открытии клавиатуры

У меня есть сетка, которая содержит изображение в заголовке и текстовое поле ниже:

<Grid> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="8*"/> 
    </Grid.RowDefinitions> 

    <Image Source="Assets/topbar.png" /> 

    <TextBox Grid.Row="1" VerticalAlignment="Bottom"/> 

</Grid> 

Проблема заключается в том, что, когда текстовое поле получает фокус, изображение заголовка отображается в верхней части экрана, но Мне нужно, чтобы изображение заголовка оставалось в одном месте, в то время как текстовое поле фокусируется.

Пожалуйста, поделитесь своими идеями для решения этой проблемы.

ответ

0

Вы должны принять схему сетки с 3 рядами для заголовка, тела, нижнего колонтитула. Как это:

<Grid x:Name="LayoutRoot" Grid.Row="1" Margin="12,0,12,0"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="auto" /> 
     <RowDefinition /> 
     <RowDefinition Height="auto" /> 
    </Grid.RowDefinitions> 
    <StackPanel Grid.Row="0" Name="Header" Background="#FF1DA8D1"> 
     <TextBlock Text="Header" HorizontalAlignment="Center" FontSize="40" /> 
    </StackPanel> 

    <ScrollViewer Grid.Row="1" Background="Orange" Name="Body"> 
     <Grid > 
      <Grid.RowDefinitions> 
       <RowDefinition Height="auto" /> 
      </Grid.RowDefinitions> 
      <TextBox Grid.Row="0" Name="txtMessage" 
        TextWrapping="Wrap" 
        AcceptsReturn="True" 
        TextChanged="txtMessage_TextChanged" 
        GotFocus="txtMessage_GotFocus" 
        LostFocus="txtMessage_LostFocus" 
        Tap="txtMessage_Tap" /> 
    </Grid> 
    </ScrollViewer> 

    <Grid Grid.Row="2" Name="FooterPlaceholder" Visibility="Collapsed"/> 
    <StackPanel Name="withoutkeyboardfooter" Grid.Row="2" Background="#FF1DA8D1"> 
     <TextBlock Text="Footer" HorizontalAlignment="Center" FontSize="40" /> 
    </StackPanel> 
</Grid> 

В приведенном выше коде XAML основная часть тела (Grid.Row = 1) содержание, которое оказывает ScrollViewer с TextBox для тестирования purpose.So, что здесь TextBox оказывает следующие события для обработки вопроса клавиатуры ,

TextChanged = "txtMessage_TextChanged"

GotFocus = "txtMessage_GotFocus"

LostFocus = "txtMessage_LostFocus"

Tap = "txtMessage_Tap"

Здесь мы должны использовать эти события для ручного задания позиции прокрутки. Обычно при первом нажатии на заполненное текстовое поле прокрутка до точки, в которой пользователь хочет, чтобы курсор был специально для области, которая будет скрыта после показа клавиатуры, требует некоторых ручных средств для выполнения. Это обрабатывается на событии Tap.

double tapOffset; 
private void txtMessage_Tap(object sender, System.Windows.Input. 
GestureEventArgs e) 

{ 
    tapOffset = e.GetPosition(txtMessage).Y - 80; 
} 

Высота клавиатуры отличается между различными разрешениями, поэтому некоторые проверками требуются, чтобы найти правильную высоту клавиатуры, которая может быть сделана на страницах Loaded события.

void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
var deviceWidth = this.ActualWidth; 

var isHdDevice = (deviceWidth > 500 ? true : false); 

    if (isHdDevice) 

      keyboardHeight = 540; 
     else 
      keyboardHeight = 336; 

//this will be used to offset other controls on the page into the viewable area 
FooterPlaceholder.Height = keyboardHeight; 
} 

И нам нужно сделать, как это в LostFocus Событие:

private void txtMessage_LostFocus(object sender, RoutedEventArgs e) 
    { 
     //hide the keyboard placeholder from screen 
     //allowing the scrollviewer to re-occupy the available area again 
     this.FooterPlaceholder.Visibility = Visibility.Collapsed; 
     withoutkeyboardfooter.Visibility = Visibility.Visible; 
     footerkeyboard.Visibility = Visibility.Collapsed; 

    } 
Смежные вопросы