Uso del tocco in Hilo (app di Windows Store in C++ e XAML)

Applies to Windows only

Da: Sviluppo di un'app di Windows Store end-to-end con C++ e XAML: Hilo

Logo Patterns & Practices

Pagina precedente | Pagina successiva

In Hilo sono forniti esempi di gesti tocco, scorrimento, scorrimento rapido, avvicinamento e allontanamento delle dita e rotazione. Abbiamo usato l'associazione dati XAML per associare i controlli Windows standard che usano i gesti tocco al modello di visualizzazione che implementa tali gesti. Spiegheremo brevemente in che modo abbiamo applicato il linguaggio di tocco di Windows 8 a Hilo per offrire un'esperienza ottimale su qualsiasi dispositivo.

Download

Download dell'esempio Hilo
Download guida (PDF)

Dopo aver scaricato il codice, per le istruzioni vedi Introduzione a Hilo.

In questo articolo verranno illustrati gli argomenti seguenti

  • Come è stato usato il linguaggio di tocco di Windows 8 in Hilo.
  • In che modo Windows Runtime supporta i dispositivi non abilitati per il tocco.

Si applica a

  • Windows Runtime per Windows 8
  • Estensioni del componente di Visual C++ (C++/CX)
  • XAML

Offrire un'esperienza utente ottimale significa che l'app deve essere accessibile e garantire un uso intuitivo sia da un computer desktop tradizionale che da un tablet di piccole dimensioni. Per Hilo, abbiamo messo il tocco al centro della pianificazione dell'esperienza utente, in quanto abbiamo ritenuto che il tocco fosse l'aspetto fondamentale per offrire un'interazione coinvolgente tra l'utente e l'app.

Come descritto in Progettazione dell'esperienza utente di Hilo, il tocco è più che un'alternativa all'uso del mouse. Abbiamo considerato il tocco come la parte centrale dell'app in quanto il tocco è in grado di aggiungere un legame personale tra l'utente e l'app. Il tocco è inoltre un modo molto naturale per consentire agli utenti di ritagliare e ruotare le foto. Ci siamo anche accorti che lo zoom semantico avrebbe potuto rappresentare una soluzione perfetta per consentire agli utenti di esplorare insiemi di immagini di grandi dimensioni in una sola visualizzazione. Quando l'utente usa il gesto di avvicinamento delle dita nella pagina di esplorazione, l'app passa a una visualizzazione basata su calendario per permettere all'utente di esplorare le foto con maggiore rapidità.

Hilo usa lo stesso linguaggio di tocco di Windows 8. Abbiamo usato i gesti tocco standard forniti da Windows per i motivi seguenti:

  • Windows Runtime fornisce un modo facile per usarli.
  • Non volevamo confondere gli utenti creando interazioni personalizzate.
  • Desideravamo che gli utenti usassero i gesti che già conoscono per esplorare l'app senza obbligarli a imparare nuovi gesti..

Nota  

L'uso del modello di progettazione Model View ViewModel (MVVM) gioca un ruolo importante nella definizione dell'interazione utente. Abbiamo usato le visualizzazioni per implementare l'interfaccia utente, i modelli e i modelli visualizzazione dell'app per incapsulare lo stato e le azioni dell'app. Per altre informazioni sul modello MVVM, vedi Uso del modello di progettazione MVVM.

Nel documento Progettazione delle interazioni tramite tocco (app di Windows Store) è spiegato il linguaggio di tocco di Windows 8. Nelle sezioni seguenti viene descritto il modo in cui abbiamo applicato il linguaggio di tocco di Windows 8 a Hilo.

[Torna all'inizio]

Pressione prolungata per imparare

Questa interazione tramite tocco ti consente di visualizzare una descrizione comando, un menu di scelta rapida o un elemento simile senza che l'utente debba svolgere un'azione. Abbiamo usato la pressione prolungata sulla pagina di visualizzazione dell'immagine per consentire all'utente di visualizzare altre informazioni su una foto, ad esempio nome file, dimensione e data in cui è stata scattata.

Pressione prolungata per visualizzare le proprietà delle foto

Abbiamo usato il controllo Popup per implementare l'interazione di pressione prolungata. Il relativo menu popup contiene un elemento Grid associato ai dati della foto. Non abbiamo dovuto impostare alcuna proprietà per nascondere inizialmente il popup in quanto per impostazione predefinita i popup non vengono visualizzati.

Ecco il codice XAML aggiornato per Popup.

ImageView.xaml


<Popup x:Name="ImageViewFileInformationPopup"
       AutomationProperties.AutomationId="ImageViewFileInformationPopup">
    <Popup.Child>
        <Border Background="{StaticResource GreySplashScreenColor}"
                BorderBrush="{StaticResource HiloBorderBrush}"
                BorderThickness="3">
            <Grid Margin="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Path=CurrentPhotoImage.Thumbnail}" 
                       Height="105" 
                       Width="105" 
                       Stretch="UniformToFill" />
                <StackPanel Grid.Column="1" 
                            Margin="10,0,10,0">
                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                               FontWeight="Bold"
                               Text="{Binding Path=CurrentPhotoImage.Name}" 
                               TextWrapping="Wrap"/>
                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                               Text="{Binding Path=CurrentPhotoImage.DisplayType}"/>
                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                               Text="{Binding Path=CurrentPhotoImage.Resolution}" />
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                                   Text="{Binding Path=CurrentPhotoImage.FormattedDateTaken}" />
                        <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                   Margin="4,0,0,0"
                                   Text="{Binding Path=CurrentPhotoImage.FormattedTimeTaken}" />
                    </StackPanel>
                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}" 
                               Text="{Binding Path=CurrentPhotoImage.FileSize, Converter={StaticResource FileSizeConverter}}" />
                    <TextBlock Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                               Margin="0,20,0,0"
                               Text="{Binding Path=CurrentPhotoImage.FormattedPath}" />
                </StackPanel>
            </Grid>
        </Border>
    </Popup.Child>
</Popup>


I metodi OnImagePointerPressed, OnImagePointerReleased e OnImagePointerMoved gestiscono rispettivamente gli eventi PointerPressed, PointerReleased e PointerMoved. Il metodo OnImagePointerPressed imposta un flag per indicare che il puntatore è premuto. Se viene premuto il pulsante sinistro (il metodo IsLeftButtonPressed restituisce sempre true per l'input tramite tocco), il menu popup viene posizionato a 200 pixel in alto a sinistra dal punto di tocco corrente.

ImageView.xaml.cpp


void Hilo::ImageView::OnImagePointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    m_pointerPressed = true;
    PointerPoint^ point = e->GetCurrentPoint(PhotoGrid);
    m_pointer = point->Position;
    if (point->Properties->IsLeftButtonPressed)
    {
        ImageViewFileInformationPopup->HorizontalOffset = point->Position.X - 200;
        ImageViewFileInformationPopup->VerticalOffset = point->Position.Y - 200;
        ImageViewFileInformationPopup->IsOpen = true;
    }
}


Nota  Il popup viene posizionato a sinistra del puntatore in quanto la maggior parte delle persone è destra. Se l'utente sta toccando con il dito indice, la mano destra potrebbe bloccare gli eventuali popup visualizzati a destra del puntatore.

Il metodo OnImagePointerReleased chiude il popup. Viene chiamato quando l'utente rilascia il puntatore.

ImageView.xaml.cpp


void Hilo::ImageView::OnImagePointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    if (m_pointerPressed)
    {
        ImageViewFileInformationPopup->IsOpen = false;
        m_pointerPressed = false;
    }
}


Anche il metodo OnImagePointerMoved chiude il popup. Il metodo OnImagePointerPressed imposta un flag e salva la posizione del puntatore corrente in quanto viene chiamato anche OnImagePointerMoved quando viene inizialmente premuto il puntatore. Dobbiamo pertanto confrontare la posizione corrente con la posizione salvata e chiudere il popup solo se la posizione è cambiata.

ImageView.xaml.cpp


void Hilo::ImageView::OnImagePointerMoved(Object^ sender, PointerRoutedEventArgs^ e)
{
    if (m_pointerPressed)
    {
        PointerPoint^ point = e->GetCurrentPoint(PhotoGrid);
        if (point->Position != m_pointer)
        {
            OnImagePointerReleased(sender, e);
        }
    }
}


Anche Popup definisce un oggetto Converter che esegue la conversione da byte a kilobyte o megabyte per rendere la dimensione dell'immagine sul disco più leggibile. I convertitori sono un modo pratico per associare i dati che desideriamo visualizzare in modo diversi. Per altre informazioni sui convertitori, vedi Convertitori di dati in questa guida

Perché non abbiamo usato l'evento Holding?   Abbiamo valutato l'uso dell'evento UIElement::Holding, Tuttavia, questo evento è riservato alle app che rispondono solo all'input tramite tocco e non ad altri input del puntatore, ad esempio il mouse. Abbiamo anche preso in considerazione l'evento GestureRegognizer::Holding. L'evento GestureRecognizer non è tuttavia consigliato per le app di Windows Store scritte in XAML in quanto i controlli XAML forniscono funzionalità di riconoscimento del gesto.

[Torna all'inizio]

Tocco per l'azione principale

Toccare un elemento ne richiama la relativa azione principale. In modalità di ritaglio, ad esempio, tocchi l'area di ritaglio per ritagliare l'immagine.

Modalità di ritaglio in Hilo

Per implementare il ritaglio, abbiamo posizionato un elemento Grid nella parte superiore del controllo di ritaglio e implementato l'evento Tapped. Abbiamo usato un controllo Grid in modo che gli eventi di tocco possano essere ricevuti dall'intera area di ritaglio e non semplicemente dal controllo che definisce il rettangolo di ritaglio.

Ecco il codice XAML aggiornato per Grid.

CropImageView.xaml


<Grid Background="Transparent"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      Tapped="OnCropRectangleTapped">
</Grid>


La visualizzazione per la pagina dell'immagine di ritaglio gestisce l'evento Tapped mediante l'inoltro dell'operazione al modello visualizzazione.

CropImageView.xaml.cpp


void CropImageView::OnCropRectangleTapped(Object^ sender, TappedRoutedEventArgs^ e)
{
    if (!m_cropImageViewModel->InProgress)
    {
        m_cropImageViewModel->CropImageAsync(Photo->ActualWidth);
    }
}


Il modello visualizzazione per la pagina dell'immagine di ritaglio ritaglia l'immagine e quindi chiama il metodo BindableBase::OnPropertyChanged di Hilo per comunicare alla visualizzazione che l'operazione è stata completata. In questa guida, nell'argomento Uso del modello di progettazione MVVM viene spiegato il modo in cui Hilo usa le notifiche di proprietà modificata per comunicare le modifiche di stato.

CropImageViewModel.cpp


task<void> CropImageViewModel::CropImageAsync(float64 actualWidth)
{
    assert(IsMainThread());
    ChangeInProgress(true);

    // Calculate crop values
    float64 scaleFactor = m_image->PixelWidth / actualWidth;
    unsigned int xOffset = safe_cast<unsigned int>((m_cropOverlayLeft - m_left) * scaleFactor);
    unsigned int yOffset = safe_cast<unsigned int>((m_cropOverlayTop - m_top) * scaleFactor);
    unsigned int newWidth = safe_cast<unsigned int>(m_cropOverlayWidth * scaleFactor); 
    unsigned int newHeight = safe_cast<unsigned int>(m_cropOverlayHeight * scaleFactor);

    if (newHeight < MINIMUMBMPSIZE || newWidth < MINIMUMBMPSIZE)
    {
        ChangeInProgress(false);
        m_isCropOverlayVisible = false;
        OnPropertyChanged("IsCropOverlayVisible");
        return create_empty_task();
    }

    m_cropX += xOffset;
    m_cropY += yOffset;

    // Create destination bitmap
    WriteableBitmap^ destImage = ref new WriteableBitmap(newWidth, newHeight);

    // Get pointers to the source and destination pixel data
    byte* pSrcPixels = GetPointerToPixelData(m_image->PixelBuffer, nullptr);
    byte* pDestPixels = GetPointerToPixelData(destImage->PixelBuffer, nullptr);
    auto oldWidth = m_image->PixelWidth;

    return create_task([this, xOffset, yOffset, newHeight, newWidth, oldWidth, pSrcPixels, pDestPixels] () {
        assert(IsBackgroundThread());
        DoCrop(xOffset, yOffset, newHeight, newWidth, oldWidth, pSrcPixels, pDestPixels);
    }).then([this, destImage](){
        assert(IsMainThread());

        // Update image on screen
        m_image = destImage;
        OnPropertyChanged("Image");
        ChangeInProgress(false);
    }, task_continuation_context::use_current()).then(ObserveException<void>(m_exceptionPolicy));
}


[Torna all'inizio]

Scorrimento di un dito per eseguire una panoramica

Hilo usa il gesto di scorrimento per passare tra le immagini di una raccolta. Ad esempio, quando selezioni un'immagine puoi usare il gesto di scorrimento per passare all'immagine precedente o all'immagine successiva nella raccolta.

Quando visualizzi un'immagine, puoi inoltre eseguire rapidamente la panoramica di qualsiasi immagine nella raccolta corrente mediante la sequenza visualizzata quando attivi la barra dell'app. Abbiamo usato il controllo GridView per implementare la sequenza.

Sequenza visualizzata nella barra superiore dell'app

Ecco il codice XAML aggiornato per GridView.

ImageView.xaml


<GridView x:Name="PhotosFilmStripGridView"
          Grid.Column="1"
          AutomationProperties.AutomationId="PhotosFilmStripGridView"
          IsItemClickEnabled="False"
          ItemContainerStyle="{StaticResource FilmStripGridViewItemStyle}"
          ItemsSource="{Binding Photos}"
          SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}"
          SelectionMode="Single"
          VerticalAlignment="Center">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Height="138" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border>
                <Image Source="{Binding Path=Thumbnail}" 
                       Height="138" 
                       Width="200" 
                       Stretch="UniformToFill" />
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>


Uno dei vantaggi offerti dal controllo GridView è che dispone di funzionalità di tocco incorporate e quindi evita di dover aggiungere altro codice o logica.

[Torna all'inizio]

Scorrimento rapido di un dito per eseguire selezioni, comandi e spostamenti

Con il gesto di scorrimento, fai scorrere il dito perpendicolarmente alla direzione della panoramica per selezionare gli oggetti. In Hilo quando una pagina contiene più immagini, puoi usare questo gesto per selezionarne una. Quando visualizzi la barra dell'app, i comandi visualizzati si applicano all'immagine selezionata. ListView, GridView e altri controlli forniscono il supporto incorporato per la selezione. Puoi usare la proprietà SelectedItem per recuperare e impostare l'elemento selezionato.

Barra dell'app in cui sono visualizzati i comandi per la foto selezionata

[Torna all'inizio]

Avvicinare le dita e allontanarle per operazioni di zoom

I gesti di avvicinamento e allontanamento delle dita non servono solo ingrandire o eseguire lo zoom ottico. Hilo usa lo zoom semantico per semplificare l'esplorazione degli insiemi di immagini di grandi dimensioni. Lo zoom semantico ti consente di eseguire lo zoom alternando due diverse visualizzazioni dello stesso contenuto. In genere è presente una visualizzazione principale del contenuto e una visualizzazione secondaria che consente agli utenti di esplorarlo rapidamente. Per altre informazioni sullo zoom semantico, vedi Aggiunta di controlli SemanticZoom.

Nella pagina del browser dell'immagine, quando fai zoom indietro la visualizzazione passa a una visualizzazione basata su calendario. La visualizzazione basata su calendario evidenzia i mesi che contengono foto. Puoi quindi eseguire lo zoom avanti per tornare alla visualizzazione per mese basata sulle immagini.

Visualizzazione immagini basata su calendario

Per implementare lo zoom semantico, abbiamo usato il controllo SemanticZoom. Devi fornire le sezioni ZoomedInView e ZoomedOutView nell'XAML per definire rispettivamente i comportamenti visualizzazione ingrandita e ridotta.

Per la visualizzazione ingrandita, abbiamo visualizzato un elemento GridView associato alle anteprime delle foto raggruppate per mese. La visualizzazione griglia visualizza anche un titolo (mese e anno) per ogni gruppo. La proprietà ImageBrowserViewModel::MonthGroups e la classe MonthGroup di Hilo definiscono le foto che vengono visualizzate nella griglia. Anche la classe MonthGroup definisce il titolo del gruppo.

Ecco il codice XAML aggiornato per ZoomedInView.

ImageBrowserView.xaml


<SemanticZoom.ZoomedInView>
    <GridView x:Name="MonthPhotosGridView" 
              AutomationProperties.AutomationId="MonthPhotosGridView"
              AutomationProperties.Name="Month Grouped Photos"
              ItemsSource="{Binding Source={StaticResource MonthGroupedItemsViewSource}}" 
              ItemContainerStyle="{StaticResource HiloGridViewItemStyle}"
              ItemClick="OnPhotoItemClicked"
              IsItemClickEnabled="True"
              Padding="116,0,40,46"
              SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
              SelectionMode="Single">


La proprietà ItemsSource specifica gli elementi per il controllo. MonthGroupedItemsViewSource è un elemento CollectionViewSource che fornisce i dati di origine per il controllo.

ImageBrowserView.xaml


<CollectionViewSource
    x:Name="MonthGroupedItemsViewSource"
    d:Source="{Binding MonthGroups, Source={d:DesignInstance Type=local:DesignTimeData, IsDesignTimeCreatable=True}}"
    Source="{Binding MonthGroups}"
    IsSourceGrouped="true"
    ItemsPath="Items"/>


La proprietà MonthGroups sul modello di visualizzazione (ImageBrowserViewModel specifica i dati associati alla visualizzazione griglia per la visualizzazione ingrandita. MonthGroups è una raccolta di oggetti IPhotoGroup. Hilo definisce l'interfaccia IPhotoGroup per fornire il titolo del gruppo e le informazioni su ogni foto.

Per la visualizzazione ingrandita, visualizziamo un elemento GridView associato a rettangoli pieni per i mesi di calendario raggruppati per anno (la proprietà ImageBrowserViewModel::YearGroups e le classi YearGroup e MonthBlock di Hilo definiscono il titolo e i mesi che contengono foto).

Ecco il codice XAML aggiornato per ZoomedOutView.

ImageBrowserView.xaml


<SemanticZoom.ZoomedOutView>
    <GridView x:Name="YearPhotosGridView" 
              AutomationProperties.AutomationId="YearPhotosGridView"
              AutomationProperties.Name="Year Grouped Photos"
              ItemsSource="{Binding Source={StaticResource YearGroupedItemsViewSource}}"
              IsItemClickEnabled="True"
              Padding="116,0,40,46"
              SelectionMode="None">


L'elemento YearGroupedItemsViewSource è simile a MonthGroupedItemsViewSource, tranne per il fatto che è associato ai dati raggruppati per anno.

Per altre informazioni sullo zoom semantico, vedi Guida introduttiva: Aggiunta di controlli SemanticZoom, Aggiunta di controlli SemanticZoom, Linee guida per lo zoom semantico e Esempio di raggruppamento di controlli XAML GridView e SemanticZoom.

[Torna all'inizio]

Rotazione delle dita per ruotare gli oggetti

Nella visualizzazione di rotazione dell'immagine, puoi usare due dita per ruotare l'immagine. Quando rilasci le dita, l'immagine viene ancorata alla rotazione di 90 gradi più vicina.

Rotazione di un'immagine di 90 gradi

La classe RotateImageView definisce l'esperienza utente per la rotazione dell'immagine e la classe RotateImageViewModel ne definisce il modello di visualizzazione. Poiché l'elemento RotateImageView eredita da Control, è impostato per ricevere gli eventi quando l'utente modifica gli oggetti. Per ricevere gli eventi di modifica nel controllo dell'immagine per il gesto rotazione, Hilo imposta la proprietà ManipulationMode nell'XAML per l'elemento Image.

Ecco il codice XAML aggiornato per Image.

RotateImageView.xaml


<Image x:Name="Photo" 
       AutomationProperties.AutomationId="ImageControl" 
       HorizontalAlignment="Center"
       ManipulationMode="Rotate"
       Margin="{Binding ImageMargin}"
       RenderTransformOrigin="0.5, 0.5"
       Source="{Binding Photo.Image}"  
       VerticalAlignment="Center">


La classe RotateImageView sovrascrive i metodi OnManipulationDelta e OnManipulationCompleted per la gestione degli eventi di rotazione. Il metodo OnManipulationDelta aggiorna l'angolo di rotazione corrente e il metodo OnManipulationCompleted ancora la rotazione al valore di 90 gradi più vicino.

Attenzione  Tali gestori di eventi sono definiti per l'intera pagina. Se la tua pagina contiene più di un elemento, devi aggiungere altra logica per determinare l'oggetto da modificare.

RotateImageView.xaml.cpp


void RotateImageView::OnManipulationDelta(ManipulationDeltaRoutedEventArgs^ e)
{
    m_viewModel->RotationAngle += e->Delta.Rotation;
}

void RotateImageView::OnManipulationCompleted(ManipulationCompletedRoutedEventArgs^ e)
{
    m_viewModel->EndRotation();
}


RotateImageViewModel.cpp


void RotateImageViewModel::EndRotation()
{
    auto quarterTurns = (RotationAngle / 90);
    auto nearestQuarter = (int)floor(quarterTurns + 0.5) % 4;
    RotationAngle = (float64)nearestQuarter * 90;
}


Un elemento RenderTransform nell'immagine associa la proprietà RotationAngle del modello di visualizzazione all'immagine visualizzata.

RotateImageView.xaml


<Image.RenderTransform>
    <RotateTransform 
        x:Name="ImageRotateTransform"  
        Angle="{Binding RotationAngle}" />
</Image.RenderTransform>


Hilo usa un localizzatore del modello di visualizzazione per associare le visualizzazioni ai relativi modelli di visualizzazione. Per altre informazioni sull'uso dei localizzatori dei modelli di visualizzazione in Hilo, vedi Uso del modello di progettazione MVVM.

[Torna all'inizio]

Scorrimento rapido da un lato dello schermo per accedere ai comandi dell'app

Quando sono presenti comandi pertinenti da visualizzare, Hilo mostra la barra dell'app quando l'utente scorre rapidamente dal bordo inferiore o superiore dello schermo.

Ogni pagina può definire una barra di spostamento, una barra dell'app inferiore o entrambe. Ad esempio, in Hilo sono visualizzate entrambe le barre quando si visualizza un'immagine e si attiva la barra dell'app.

Ecco la barra di spostamento:

Barra dell'app superiore

Ecco la barra dell'app inferiore per la stessa foto.

Barra dell'app inferiore

Dall'XAML, usa la proprietà Page::TopAppBar per definire la barra di spostamento e Page::BottomAppBar per definire la barra dell'app inferiore. Ognuno di questi elementi contiene un controllo AppBar che include i componenti dell'interfaccia utente della barra dell'app. Di seguito è mostrato l'XAML relativo alla barra dell'app inferiore per la pagina di visualizzazione dell'immagine. Questa barra dell'app contiene i comandi per accedere alle modalità di rotazione, ritaglio o applicazione l'effetto fumetto all'immagine.

ImageView.xaml


<local:HiloPage.BottomAppBar>
    <AppBar x:Name="ImageViewBottomAppBar"
            x:Uid="AppBar"
            AutomationProperties.AutomationId="ImageViewBottomAppBar"
            Padding="10,0,10,0">
        <Grid>
            <StackPanel HorizontalAlignment="Left" 
                        Orientation="Horizontal">
                <Button x:Name="RotateButton"
                        x:Uid="RotateAppBarButton"
                        Command="{Binding RotateImageCommand}" 
                        Style="{StaticResource RotateAppBarButtonStyle}" 
                        Tag="Rotate" />
                <Button x:Name="CropButton"
                        x:Uid="CropAppBarButton"
                        Command="{Binding CropImageCommand}"
                        Style="{StaticResource CropAppBarButtonStyle}"
                        Tag="Crop" />
                <Button x:Name="CartoonizeButton"
                        x:Uid="CartoonizeAppBarButton"
                        Command="{Binding CartoonizeImageCommand}"
                        Style="{StaticResource CartoonEffectAppBarButtonStyle}"
                        Tag="Cartoon effect" />
                <Button x:Name="RotateButtonNoLabel"
                        Command="{Binding RotateImageCommand}" 
                        Style="{StaticResource RotateAppBarButtonNoLabelStyle}" 
                        Tag="Rotate"
                        Visibility="Collapsed">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="RotateAppBarButtonToolTip" />
                    </ToolTipService.ToolTip>
                </Button>
                <Button x:Name="CropButtonNoLabel"
                        Command="{Binding CropImageCommand}"
                        Style="{StaticResource CropAppBarButtonNoLabelStyle}"
                        Tag="Crop"
                        Visibility="Collapsed">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="CropAppBarButtonToolTip" />
                    </ToolTipService.ToolTip>
                </Button>
                <Button x:Name="CartoonizeButtonNoLabel"
                        Command="{Binding CartoonizeImageCommand}"
                        Style="{StaticResource CartoonEffectAppBarButtonNoLabelStyle}"
                        Tag="Cartoon effect"
                        Visibility="Collapsed">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Uid="CartoonizeAppBarButtonToolTip" />
                    </ToolTipService.ToolTip>
                </Button>
            </StackPanel>
        </Grid>
    </AppBar>
</local:HiloPage.BottomAppBar>


Attenzione  Nella maggior parte dei casi, non visualizzare la barra dell'app se non sono presenti comandi pertinenti da mostrare. Ad esempio, la pagina principale dell'app associa la proprietà AppBar::IsOpen alla proprietà MainHubViewModel::IsAppBarOpen nel modello di visualizzazione. AppBar::IsOpen controlla se la barra dell'app è visibile o meno e viene impostata quando un oggetto è selezionato e deselezionata quando non è selezionato alcun oggetto.

Per altre informazioni sulle barre dell'app, vedi Aggiunta di barre dell'app e Esempio di controllo AppBar XAML.

[Torna all'inizio]

Scorrimento rapido da un lato dello schermo per accedere ai comandi di sistema

Poiché l'interazione tramite tocco può risultare meno precisa rispetto ad altri dispositivi di puntamento, ad esempio il mouse, abbiamo mantenuto un margine sufficiente tra i controlli dell'app e il bordo dello schermo. Abbiamo inoltre cercato di usare lo stesso margine su tutte le pagine. Ci siamo avvalsi di modelli di progettazione inclusi in Visual Studio per fornire i margini suggeriti. Dal momento che non abbiamo inserito un numero di elementi eccessivo sui bordi dello schermo, l'utente può facilmente scorrere rapidamente dal bordo dello schermo per visualizzare le barre e gli accessi dell'app o le app usate in precedenza.

[Torna all'inizio]

Dispositivi non abilitati per il tocco

Desideravamo inoltre che Hilo risultasse intuitivo anche per gli utenti che usano un mouse o un dispositivo di puntamento simile. I controlli incorporati funzionano altrettanto bene con il mouse e altri dispositivi di puntamento. Di conseguenza, quando progetti l'interazione tramite tocco sono incluse anche le interazioni tramite mouse e penna/stilo.

Puoi ad esempio usare il pulsante sinistro del mouse per richiamare i comandi. In Windows Runtime sono inoltre disponibili gli equivalenti per mouse e tastiera per numerosi comandi. Ad esempio, puoi usare il pulsante destro del mouse per attivare la barra dell'app o tenere premuto CTRL mentre scorri la rotellina del mouse per controllare l'interazione tramite zoom semantico.

Abbiamo usato la classe PointerPoint per ottenere le proprietà di base per l'input tramite mouse, penna/stilo e tocco. Ecco un esempio relativo all'uso della classe PointerPoint per ottenere la posizione del puntatore.

ImageView.xaml.cpp


void Hilo::ImageView::OnImagePointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    m_pointerPressed = true;
    PointerPoint^ point = e->GetCurrentPoint(PhotoGrid);
    m_pointer = point->Position;
    if (point->Properties->IsLeftButtonPressed)
    {
        ImageViewFileInformationPopup->HorizontalOffset = point->Position.X - 200;
        ImageViewFileInformationPopup->VerticalOffset = point->Position.Y - 200;
        ImageViewFileInformationPopup->IsOpen = true;
    }
}


[Torna all'inizio]

 

 

Mostra:
© 2015 Microsoft