Se avete bisogno di un rating control in un'applicazione che utilizza il WinRT, potreste rimanere delusi. Infatti, un controllo del genere esiste solo se utilizzate WinJS, tagliando fuori di fatto chi utilizza XAML.
Realizzare però un controllo del genere è relativamente semplice: basta modificare opportunamente il template del controllo Slider.
Iniziamo quindi creando una copia del template originale: possiamo aiutarci con Blend o con Visual Studio.
Nello style andiamo a impostare le seguente proprietà:
<Setter Property="LargeChange" Value="1" /> <Setter Property="Maximum" Value="5" /> <Setter Property="Minimum" Value="0" /> <Setter Property="SmallChange" Value="0.5" /> <Setter Property="StepFrequency" Value="0.5" />
Il valore massimo andrà configurato in base al massimo voto applicabile (nel nostro caso cinque).
Fatto questo, il compito più difficile consiste nel realizzare l'UI per l'assegnazione del voto. L'idea di base consiste nel realizzare una maschera dove lasceremo dei 'buchi', che in un controllo di tipo rating sono rappresentati da stelle.
Per realizzare il Path che rappresenta la stella, possiamo aiutarci con tool tipo Metro Studio 3. Trovata l'icona che più ci piace, non dobbiamo far altro che unirne cinque, in maniera consecutiva.
Metro Studio fornisce anche lo XAML relativamente all'icona: una volta copiato lo XAML, possiamo continuare le operazioni booleane per realizzare la maschera in Blend.
Come detto, dobbiamo unirne cinque e dobbiamo forare un rettangolo, che utilizzeremo per mascherare il solito percorso dello Slider.
Una volta che abbiamo le dimensioni della maschera, dobbiamo modificare una parte del template.
Recuperiamo l'oggetto HorizontalThumb, impostiamone la larghezza a 0 e l'altezza pari all'altezza della maschera.
Infine, impostiamo mediante lo style la larghezza del controllo su quella della maschera, cje rappresenta un Path e va posta davanti ad ogni altro controllo presente nel template. Procediamo poi con la sua proprietà IsHitTestVisible, che va impostata su false.
Nella figura possiamo vedere il risultato, mentre allegato allo script c'è lo XAML con il template completo.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Eliminare una project wiki di Azure DevOps
Eseguire operazioni sui blob con Azure Storage Actions
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Usare le navigation property in QuickGrid di Blazor
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
Recuperare l'ultima versione di una release di GitHub
Usare il colore CSS per migliorare lo stile della pagina