Creare un flusso applicazione

Il pannello Mappa SketchFlow è un editor di grafici in cui è possibile definire la struttura, il flusso, la navigazione e la composizione di un'applicazione.

È possibile utilizzare il pannello Mappa SketchFlow per concentrare l'attenzione sulla struttura di un'applicazione e la tavola da disegno per concentrare l'attenzione sul contenuto di singole schermate.

Schermate di navigazione

Ogni schermata del prototipo è rappresentata mediante un nodo nel pannello Mappa SketchFlow. È possibile collegare tra loro le schermate utilizzando una connessione di navigazione per sottointendere la navigazione tra le schermate. Quando si esegue il prototipo in SketchFlow Player, le connessioni tra i nodi navigazione simulano la navigazione tra le schermate nel pannello di navigazione.

Nel pannello Mappa SketchFlow vengono inoltre visualizzate schermate componente. Per ulteriori informazioni, vedere "Schermate componente" più avanti in questo argomento.

Per definire la navigazione tra le schermate in SketchFlow è possibile procedere in vari modi. È possibile creare nuove schermate connesse da schermate esistenti nel pannello Mappa SketchFlow. È possibile connettere due schermate non connesse nel pannello Mappa SketchFlow. Oppure è possibile fare clic con il pulsante destro del mouse su un oggetto in una schermata e definire la navigazione utilizzando il comando Passa a nel menu di scelta rapida.

Per aggiungere una nuova schermata di navigazione connessa al flusso applicazione

  1. Quando si crea un nuovo progetto SketchFlow, viene creato un nuovo file denominato Screen 1.xaml visualizzato nel pannello Mappa SketchFlow come un nodo e nel pannello Progetto come un oggetto UserControl.

    [!NOTA]

    Per aprire un nuovo progetto SketchFlow, vedere Creare un progetto prototipo.

    Spostare il puntatore del mouse sopra il primo nodo (Schermata 1) nell'angolo superiore sinistro del pannello Mappa SketchFlow.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra, oppure premere MAIUSC+F12.

    Il nodo viene evidenziato e il file XAML associato diventa visibile in una descrizione comando. Nella parte inferiore del nodo viene inoltre visualizzato un menu grafico:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(IT-IT,Expression.30).png

  2. Spostare il puntatore del mouse sopra l'icona sinistra nel menu grafico e iniziare a trascinare l'icona. Viene visualizzato un nuovo nodo "fantasma" che segue il puntatore.

  3. Terminare il trascinamento dell'icona della schermata di navigazione nel punto in cui si desidera posizionare la nuova schermata. Viene visualizzato il nuovo nodo a cui viene assegnato il nome "Schermata 2" per impostazione predefinita.

    [!NOTA]

    Per modificare il nome, fare clic con il pulsante destro del mouse sul nodo e scegliere Rinomina, oppure fare clic sul nodo, premere MAIUSC+F2 e quindi digitare il nuovo nome direttamente nel nodo.

  4. Per trascinare un oggetto nella nuova schermata, fare doppio clic sul nodo nel pannello Mappa SketchFlow per selezionare la scheda documento associata.

La connessione tra nodi implica la navigazione tra gli stessi. È inoltre possibile creare nodi di navigazione senza una connessione di navigazione definita.

Per aggiungere una nuova schermata di navigazione non connessa al flusso applicazione

  1. Fare clic con il pulsante destro del mouse nel pannello Mappa SketchFlow e quindi scegliere Aggiungi schermata di navigazione.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra, oppure premere MAIUSC+F12.

    [!NOTA]

    Per modificare il nome, fare clic con il pulsante destro del mouse sul nodo e scegliere Rinomina, oppure fare clic sul nodo, premere MAIUSC+F2 e quindi digitare il nuovo nome direttamente nel nodo.

  2. Per trascinare un oggetto nella nuova schermata, fare doppio clic sul nodo nel pannello Mappa SketchFlow per selezionare la scheda documento associata.

    Ee341405.alert_tip(IT-IT,Expression.30).gifSuggerimento:

    In alternativa, nella barra degli strumenti Mappa SketchFlow fare clic su Crea uno schermoEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(IT-IT,Expression.30).png.

Per collegare due schermate di navigazione non connesse

  1. Nel pannello Mappa SketchFlow spostare il puntatore del mouse sopra il nodo da cui si desidera connettersi.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra oppure premere MAIUSC+F12.

    Il nodo viene evidenziato e il file XAML associato diventa visibile in una descrizione comando. Nella parte inferiore del nodo viene inoltre visualizzato un menu grafico.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(IT-IT,Expression.30).png

  2. Spostare il puntatore del mouse sopra l'icona Connetti a schermata esistenteEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(IT-IT,Expression.30).png nel secondo menu grafico da sinistra. Iniziare a trascinare l'icona per creare una nuova connessione di navigazione. Viene visualizzata una freccia che segue il puntatore del mouse.

  3. Terminare di trascinare la freccia nella schermata a cui si desidera connettersi. Per rimuovere la connessione, fare clic con il pulsante destro del mouse sulla freccia e scegliere Rimuovi.

    Ee341405.alert_tip(IT-IT,Expression.30).gifSuggerimento:

    In alternativa, fare clic e trascinare il nodo sul nodo a cui si desidera connettersi.

Schermate componente

I nodi componente, analogamente ai nodi navigazione, vengono visualizzati nel pannello Mappa SketchFlow. Un'importante differenza tra i nodi componente e quelli di navigazione è che i primi, a differenza dei secondi, non dispongono di connessioni in ingresso ma solo di connessioni in uscita. Le connessioni, ovvero le frecce che implicano collegamenti tra nodi nel flusso applicazione, indicano le schermate in cui viene visualizzata una schermata componente.

Un nodo componente contiene contenuto che può essere riutilizzato in più schermate. Ad esempio, è possibile creare un nodo componente che contiene uno sfondo e un altro che contiene un menu e quindi utilizzare questi componenti in più schermate nel prototipo.

Per creare un nuovo nodo componente sono disponibili vari modi. È possibile aggiungere un nuovo nodo componente direttamente nel pannello Mappa SketchFlow oppure selezionare contenuto nella schermata e convertirlo in una schermata visualizzata come un nodo componente nella mappa SketchFlow.

Per aggiungere una nuova schermata componente non connessa al flusso applicazione

  • Fare clic con il pulsante destro in un punto qualsiasi del pannello Mappa SketchFlow e quindi scegliere Aggiungi componente schermata.

Per aggiungere una nuova schermata componente connessa al flusso applicazione

  1. Nel pannello Mappa SketchFlow spostare il puntatore del mouse sopra il nodo da cui si desidera aggiungere una schermata componente connessa.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra oppure premere MAIUSC+F12.

    Il nodo viene evidenziato e il file XAML associato diventa visibile in una descrizione comando. Nella parte inferiore del nodo viene inoltre visualizzato un menu grafico.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(IT-IT,Expression.30).png

  2. Spostare il puntatore del mouse sopra l'icona Crea e inserisci una schermata componenteEe341405.91c06759-86fc-4dbf-a8b7-061300304308(IT-IT,Expression.30).png nel secondo menu grafico da destra. Iniziare a trascinare l'icona per creare una nuova connessione componente. Viene visualizzata una freccia che segue il puntatore del mouse.

  3. Trascinare la freccia nella schermata a cui si desidera connettersi e rilasciare il mouse.

Per convertire un oggetto UserControl in una schermata componente

  1. Selezionare l'oggetto o il gruppo di oggetti che si desidera convertire in un oggetto UserControl.

    [!NOTA]

    Per selezionare un gruppo di oggetti, trascinare un rettangolo di selezione intorno al gruppo di oggetti che si desidera includere.

  2. Fare clic con il pulsante destro del mouse sulla selezione e quindi scegliere Converti in schermata componente.

  3. Nella casella Nome della finestra di dialogo Converti in schermata componente digitare un nome per UserControl.

  4. Opzionale: per aggiungere la schermata componente al flusso applicazione, selezionare Aggiungi a mappa SketchFlow.

  5. Fare clic su OK.

    [!NOTA]

    Prima che la schermata componente venga visualizzata nella schermata navigazione, potrebbe essere necessario ricreare il progetto (F5).

Assegnazione di tag visivi

L'assegnazione di tag visivi consente di distinguere tra tipi di schermate e tipi di connessioni applicando colori diversi a tipi diversi di schermate e connessioni nella mappa SketchFlow.

Per aggiungere un tag visivo a un nodo

  1. Nel pannello Mappa SketchFlow spostare il puntatore del mouse sopra il nodo a cui si desidera associare una codifica.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra oppure premere MAIUSC+F12.

  2. Il nodo viene evidenziato e il file XAML associato diventa visibile in una descrizione comando. Nella parte inferiore del nodo viene inoltre visualizzato un menu grafico.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(IT-IT,Expression.30).png

  3. Spostare il puntatore del mouse sopra l'icona sulla destra, fare clic sull'icona e quindi scegliere il colore che si desidera utilizzare per il nodo.

Per aggiungere un tag visivo a una connessione

  1. Nel pannello Mappa SketchFlow spostare il puntatore del mouse sopra la connessione a cui si desidera assegnare un tag.

    [!NOTA]

    Se il pannello Mappa SketchFlow non è visibile, scegliere Mappa SketchFlow dal menu Finestra oppure premere MAIUSC+F12.

    La connessione viene evidenziata.

  2. Fare clic su Tag visivo e quindi scegliere il colore che si desidera utilizzare per la connessione.

È inoltre possibile modificare l'assegnazione di tag visivi per un intero progetto modificando le impostazioni del progetto SketchFlow.

Per ulteriori informazioni, vedere Modificare le impostazioni progetto SketchFlow.

  • Last updated on