Linguaggio: HTML | XAML

Risposta alle interazioni tramite mouse (XAML)

Applies to Windows and Windows Phone

Puoi rispondere agli input mouse nelle app gestendo gli stessi eventi relativi al puntatore usati per input di tipo tocco e penna.

Questi eventi UIElement comuni ti permettono di implementare funzionalità di input di base senza dovere scrivere codice per ogni dispositivo di input. Puoi comunque sfruttare le speciali funzionalità di ogni dispositivo, ad esempio gli eventi della rotellina del mouse, se necessario. Sono disponibili tre diversi tipi di eventi: puntatore, gesti e manipolazione.

Suggerimento  Le informazioni in questo argomento sono specifiche per lo sviluppo di app in C++, C# o Visual Basic.

Per informazioni sulle app che usano JavaScript, vedi Risposta alle interazioni con mouse (HTML).

Per informazioni sulle app che usano DirectX in C++, vedi Sviluppo di controlli per il mouse (DirectX e C++).

Prerequisiti:  Se non hai familiarità con lo sviluppo di app di in C++, C# o Visual Basic, ti consigliamo di leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.

Creare la prima app di Windows Store in C# o Visual Basic

Creare la prima app di Windows Store in C++

Roadmap per app di Windows Runtime in C# o Visual Basic

Roadmap per app di Windows Store in C++

Per informazioni aggiuntive sugli eventi, vedi Panoramica degli eventi e degli eventi indirizzati

Funzionalità delle app dall'inizio alla fine:  Per conoscere meglio questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app dall'inizio alla fine

Interazioni con l'utente, dall'inizio alla fine (XAML)

Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (XAML)

Linee guida per l'esperienza utente:  

Le raccolte di controlli della piattaforma (HTML e XAML) forniscono l'esperienza di interazione utente completa, oltre a interazioni standard, effetti fisici animati e feedback visivo. Se non hai l'esigenza di supportare interazioni personalizzate, usa questi controlli predefiniti.

Se i controlli della piattaforma non sono sufficienti, queste linee guida ti aiuteranno a offrire un'esperienza di interazione coinvolgente e Immersive coerente tra le diverse modalità di input. Queste linee guida sono incentrate principalmente sull'input tocco, ma sono rilevanti anche per input di tipo tocco, mouse, tastiera e stilo.

Esempi:  Per esaminare questa funzionalità in azione, vedi gli esempi di app.

Input: Esempio delle funzionalità del dispositivo

Esempio di input

Input: Gesti e manipolazioni con GestureRecognizer

Consigli per il supporto delle interazioni con mouse

Ecco alcune linee guida per il supporto delle interazioni con mouse.

Linguaggio del mouse

L'applicazione coerente di questo linguaggio del mouse ti permette di realizzare un'app che risulti familiare agli utenti. L'app sarà quindi più facile da imparare e usare, con maggiore soddisfazione degli utenti.

TermineDescrizione

Informazioni al passaggio del mouse

Passare con il mouse su un elemento per visualizzare informazioni più dettagliate o elementi visivi a scopo didattico, ad esempio una descrizione comando, senza dover necessariamente eseguire un'azione. Per altre informazioni sulle descrizioni comando, vedi Aggiunta di descrizioni comando.

Clic con il pulsante sinistro del mouse per l'azione principale

Fare clic con il pulsante sinistro del mouse su un elemento per richiamare l'azione principale, ad esempio avviare un'applicazione o eseguire un comando.

Scorrimento per cambiare visualizzazione

Visualizzare le barre di scorrimento per spostarsi verso l'alto, verso il basso, a destra o a sinistra all'interno di un'area di contenuto. Gli utenti possono scorrere il contenuto facendo clic sulle barre di scorrimento o ruotando la rotellina del mouse. Le barre di scorrimento possono indicare la posizione della visualizzazione corrente nell'area del contenuto (eseguendo la panoramica tramite tocco viene visualizzata un'interfaccia utente simile).

Clic con il pulsante destro del mouse per selezionare ed eseguire comandi

Fare clic con il pulsante destro del mouse per visualizzare le barre dell'app con i comandi globali. Fai clic con il pulsante destro del mouse su un elemento per selezionarlo e visualizzare la barra dell'app con i comandi contestuali per l'elemento selezionato.

Nota  Fare clic con il pulsante destro del mouse per visualizzare un menu contestuale nei casi in cui i comportamenti di selezione o visualizzazione dei comandi della barra dell'app non sono appropriati. Ti consigliamo vivamente, tuttavia, di usare la barra dell'app per tutti i comportamenti relativi ai comandi.

Comandi dell'interfaccia utente per lo zoom

Visualizzare comandi dell'interfaccia utente nella barra dell'app (ad esempio + e -) o premere CTRL e ruotare la rotellina del mouse per emulare i movimenti di avvicinamento e allontanamento delle dita usati per lo zoom.

Comandi dell'interfaccia utente per la rotazione

Visualizzare comandi dell'interfaccia utente nella barra dell'app o premere CTRL+MAIUSC e ruotare la rotellina del mouse per emulare il gesto di rotazione. Ruotare il dispositivo per far ruotare l'intero schermo.

Clic con il pulsante sinistro del mouse e trascinamento per riorganizzare i contenuti

Fare clic con il pulsante sinistro del mouse su un elemento e trascinarlo per spostarlo.

Clic con il pulsante sinistro del mouse e trascinamento per selezionare testo

Fare clic con il pulsante sinistro del mouse all'interno di testo selezionabile e trascinare per selezionarlo. Fare doppio clic per selezionare una parola.

Angoli e bordi per visualizzare i comandi di sistema

Sposta il mouse nell'angolo superiore destro o inferiore destro nei layout da sinistra a destra (oppure nell'angolo sinistro nei layout da destra a sinistra) per visualizzare gli accessi contenenti i comandi di sistema.

Sposta il mouse nell'angolo superiore sinistro nei layout da sinistra a destra (o superiore destro nei layout da destra a sinistra) per visualizzare l'anteprima delle app usate di recente. Fai clic con il pulsante sinistro del mouse o fai clic e trascina per scorrere le anteprime e passare alle app in esecuzione oppure trascina per ancorare l'app (se l'operazione è supportata alla risoluzione corrente dello schermo).

Sposta il mouse nell'angolo inferiore sinistro nei layout da sinistra a destra (o inferiore destro nei layout da destra a sinistra) per visualizzare l'anteprima della schermata Start.

Fai clic con il pulsante sinistro del mouse e trascinare dal bordo superiore a quello inferiore dello schermo per chiudere l'app corrente.

Fai clic con il pulsante sinistro del mouse e trascina dal bordo superiore a quello inferiore, destro o sinistro per ancorare l'app corrente a quel bordo dello schermo.

 

Hardware

Esegui una query sulle funzionalità del dispositivo mouse (MouseCapabilities) per individuare gli aspetti dell'interfaccia utente della tua app direttamente accessibili mediante l'hardware del mouse. Per altre informazioni sull'esecuzione di query relative alle funzionalità dei dispositivi, vedi Guida introduttiva: Identificazione dei dispositivi di puntamento.

Alcuni mouse sono dotati di 5 pulsanti. Il quarto e il quinto, denominati pulsanti X, in genere consentono di spostarsi in avanti e all'indietro nei Web browser come Windows Internet Explorer. Associali correttamente agli elementi dell'interfaccia utente della tua app (pulsanti Indietro e Avanti).

Per i mouse dotati di rotellina, associa la rotazione in avanti o all'indietro allo scorrimento verticale (su e giù) nell'area del contenuto. Se l'area del contenuto non prevede lo scorrimento verticale, attiva lo scorrimento orizzontale (sinistra e destra). Se la rotellina presenta anche la funzionalità di inclinazione, essa dovrebbe attivare solo lo scorrimento orizzontale.

La rotellina del mouse dovrebbe attivare lo zoom (se la funzionalità è esposta) quando l'utente preme il tasto di modifica CTRL.

  • Applies to Windows

Windows: Feedback visivo

  • Quando viene rilevato un mouse tramite eventi di spostamento o di passaggio, visualizza l'interfaccia utente specifica del mouse per indicare la funzionalità esposta dall'elemento. Se il mouse non viene spostato per un determinato intervallo di tempo, o se l'utente avvia un'interazione tramite tocco, imposta la dissolvenza graduale degli elementi di interfaccia utente del mouse. In questo modo manterrai pulita e sgombra l'interfaccia utente.
  • Non usare il cursore per la risposta al passaggio del mouse, poiché quella fornita dall'elemento in questione è sufficiente (vedi la prossima sezione Cursori).
  • Se un elemento non supporta l'interazione, come nel caso del testo statico, non fornire feedback visivo.
  • Non usare i rettangoli di selezione per le interazioni tramite mouse, ma riservali alle interazioni tramite tastiera.
  • Implementa feedback visivo simultaneo per tutti gli elementi che rappresentano la stessa destinazione dell'input.
  • Implementa pulsanti (ad esempio + e -) per emulare le manipolazioni basate sul tocco, come panoramica, rotazione, zoom e così via.

Per altre informazioni generali sul feedback visivo, vedi Linee guida per il feedback visivo.

  • Applies to Windows

Windows: Cursori

È disponibile un set di cursori standard da usare come puntatori del mouse. per indicare l'azione principale di un elemento.

A ogni cursore standard è associata un'immagine predefinita. Le immagini predefinite associate ai cursori standard possono essere sostituite in qualsiasi momento dall'utente o dall'app. Le app di Windows Store specificano un'immagine cursore mediante la funzione PointerCursor.

Se vuoi personalizzare il cursore del mouse:

  • Usa sempre il cursore freccia (Cursore freccia) per gli elementi su cui è possibile fare clic. Non usare il cursore con la mano che indica (Cursore a forma di mano puntato) per i link o altri elementi interattivi. Usa invece gli effetti al passaggio del mouse descritti in precedenza.
  • Usa il cursore testo (Cursore testo) per il testo selezionabile.
  • Usa il cursore di spostamento (Cursore di spostamento) quando lo spostamento è l'azione principale, ad esempio nel caso del trascinamento o del ritaglio. Non usare il cursore di spostamento per elementi la cui azione principale è l'esplorazione, ad esempio per i riquadri della schermata Start.
  • Usa i cursori di ridimensionamento orizzontale, verticale e diagonale (Cursore di ridimensionamento verticale, Cursore di ridimensionamento orizzontale, Cursore di ridimensionamento diagonale (da in basso a destra a in alto a sinistra), Cursore di ridimensionamento diagonale (da in alto a sinistra a in basso a destra)) quando un oggetto è ridimensionabile.
  • Usa i cursori con la mano che afferra (Cursore con la mano che afferra (aperta), Cursore con la mano che afferra (chiusa)) per la panoramica di contenuti all'interno di un canvas fisso, come nel caso di una mappa.
  • Applies to Windows

Windows: Attivazione

Un clic con il pulsante destro del mouse deve attivare la barra dell'app. Evita le zone morte nell'interfaccia utente dell'app, ossia quelle che non rispondono al clic con il pulsante destro del mouse. Per altre informazioni sulle barre dell'app, vedi Aggiunta di barre dell'app.

Argomenti correlati

Risposta alle interazioni degli utenti

 

 

Mostra:
© 2014 Microsoft