L’AdControl contiene una WebView che si ruba il focus

Ok ok, il titolo di questo post è un po’ assurdo. Se siete sviluppatori di app Windows 8, probabilmente vi è già capitato. Oppure no. Nel qual caso, prendete appunti. Immaginate una pagina di un’app Windows 8 strutturata – in soldoni – da una Grid con tre righe, il cui contenuto è:

• prima riga: intestazione, logo, quello che volete, nulla di importante
• seconda riga: ScrollViewer a scorrimento orizzontale, che contiene UI più complessa, che rappresenta il contenuto vero e proprio dell’app
• terza riga: controllo AdControl per mostrare un po’ di pubblicità

Ora, ieri sera mi è accaduta una cosa strana. Dal punto di vista utente, voglio che i miei utenti possano utilizzare la rotella del mouse per scorrere lo ScrollViewer indicato prima. Ricordiamocelo: le app Windows 8 non sono solamente touch, ma devono funzionare anche con tastiera & mouse. Appena l’app viene avviata, l’utente deve fin da subito poter rotellare usare la rotella del mouse per scorrere avanti ed indietro i contenuti. A me questo meccanismo non funzionava, sebbene avessi impostato nello XAML le proprietà IsTabStop=”true” e TabIndex=”"0” sullo ScrollViewer. Se invece andavo cliccare manualmente all’interno dello ScrollViewer, ecco che la rotella aveva effetto.

Vi riassumo in due righe circa 2 ore di litigate col codice per capire il problema. Sgrunt.

In pratica ho scoperto che il controllo AdControl per l’advertising contiene al suo interno un controllo WebView che – guarda caso – si appropriava del focus. Quindi all’avvio dell’app lo ScrollViewer perdeva automaticamente il focus, e la rotella smetteva di funzionare.

Come ho risolto? Così:

<adv:AdControl IsEnabled="False"
ApplicationId="xyz"
AdUnitId="xyz" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Impostando la proprietà IsEnabled a false, l’AdControl, e la WebView al suo interno, non si prendono più il focus e tutto funziona egregiamente. Sulla UI non c’è alcuna differenza: il banner appare come deve apparire, è cliccabile, per cui non cambia nulla: ma essendo disabilitato non può prendersi il focus.

Ultima nota: non so se questo comportamento accade sempre o magari nel mio caso avevo una situazione più complessa o fuorviante. Ho risolto nel modo descritto: se dovesse capitare anche a voi, sapete quale potrebbe essere una possibile causa.