Scrollviewer & SIP Issue (WP7.5 Mango)

Question

Sto lavorando a un'applicazione che include un modulo di registrazione. Il modulo contiene più caselle di immissione testo, quindi viene utilizzato un ScrollViewer per consentire a tutti di essere visualizzati su un'unica pagina.

Il seguente è un esempio ridotta del codice XAML che sto usando:

<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> 

(Si noti che lo ScrollViewer è all'interno di una cella della griglia, il che significa che il pannello titolo dovrebbe rimanere su schermo in ogni momento)

Lo scorrimento funziona perfettamente, quindi non è un problema. Tuttavia, quando l'utente seleziona un TextBox per immettere dati (ad esempio, la tastiera virtuale si apre), il sistema spinge il contenuto dell'intera pagina (incluso il pannello del titolo di registrazione), il che non è un comportamento previsto. [Vedere l'app Persone su Windows Phone e provare ad aggiungere un nuovo contatto. Questo contiene una struttura simile, ma lo ScrollViewer si comporta correttamente solo spingendo contenuti nel ScrollViewer up]

Test Cases

• Selezionare un TextBox che è visibile nella parte superiore dello schermo, per aprire il tastiera.
• Tenta di scorrere fino alla fine della pagina con la tastiera aperta.
• Gli articoli nella parte inferiore della pagina non sono raggiungibili.

o

• Selezionare un TextBox che è visibile nella parte inferiore dello schermo.
• Il contenuto di tutta la pagina viene inserito.
• Tentativo di scorrere fino all'inizio della pagina con la tastiera aperta.
• Gli elementi nella parte superiore della pagina non sono raggiungibili e il pannello del titolo non torna mai in vista finché la tastiera non viene chiusa.

Qualsiasi aiuto per la risoluzione di questo problema sarebbe apprezzato. Grazie.

Answer 1

Il problema è che l'altezza di ScrollViwer non viene modificata dopo la visualizzazione della tastiera, quindi viene ritagliata. Una soluzione potrebbe essere quella di modificare l'altezza del scrollviwer (in base all'altezza della tastiera) e quindi riposizionarlo (questo potrebbe darti dei mal di testa).

Un altro problema è sapere quando viene visualizzata la tastiera: è possibile registrarsi per gli eventi di GotFocus/LostFocus su tutti i TextBox ma non è un'ottima soluzione. Questo potrebbe aiutare a: http://blogs.msdn.com/b/jaimer/archive/2010/11/05/guessing-if-the-sip-is-visible-in-a-windows-phone-application.aspx

Spero che questo aiuti un po ':)

Answer 2

Penso che si possa risolvere questo venendo il problema da un'altra angolazione. Il telefono scorrerà la pagina in modo che il SIP (tastiera software) non copra mai il TextBox che ha il focus.

Tuttavia è possibile forzare il SIP a nascondersi rilevando gli eventi di tocco sull'elemento superiore contenuto in ScrollViewer, ad es.:

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

Poi, dando il focus su un pulsante nascosto (pixel 0x0 di dimensioni) questo costringerà il SIP per chiudere. Allora sarà possibile per gli utenti di scorrere su e giù per la ScrollViewer come previsto ...

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

che ho avuto lo stesso problema con un app che ho sviluppato e il modo in cui ho affrontato è stato di scopri l'altezza automatica del pannello contenente l'input textbox s, quindi imposta manualmente l'altezza e aggiungi circa 400 - 500 px in basso per farlo scorrere bene. L'effetto è abbastanza fluido e non renderà la tua interfaccia utente un "hackish" IMHO.

Nel tuo caso si dovrà scoprire l'altezza automatica del LayoutRootGrid e poi su RowDefinition di Riga 1 impostare l'altezza manualmente - ricordando di aggiungere un ulteriore 400px (o qualsiasi altra cosa sembra appropriata nella vostra situazione).

Per facilità di ingresso ho poi gestito ogni OnKeyDown caso di ogni TextBox per cambiare la messa a fuoco per la prossima TextBox su di colpire Enter. Sull'ultimo TextBox ho impostato lo stato attivo su this.focus() che imposta lo stato attivo sulla pagina e nasconde il SIP.

Answer 4

Dai un'occhiata alla mia piccola biblioteca prega - https://siphelper.codeplex.com/

Esso modifica l'altezza di ScrollViewer e contenuti è possibile scorrere fino al punto più in alto/in basso.

Se avete qualche suggerimento - non esitate a contattarmi.