Dall'archivio script > Windows 10

Creazione di StateTrigger personalizzati in Universal Windows Platform

di Matteo TumiatiMatteo Tumiati, in Windows 10,

Abbiamo già visto come Windows 10 ci dia la possibilità, attraverso gli AdaptiveTrigger, di scrivere un'interfaccia grafica che sia perfetta per ogni dimensione dello schermo e che possa variare al cambio delle dimensioni di altezza e larghezza, in modo del tutto automatico.
Fortunatamente, con Windows 10, possiamo estendere il meccanismo dei trigger e crearne di personalizzati, in modo da poter analizzare, virtualmente, qualsiasi proprietà disponibile all'interno del nostro progetto. Tutto quello che dobbiamo fare per creare un nuovo trigger personalizzato è quello di creare una classe e farla ereditare da StateTriggerBase, come in questo esempio:

public class DeviceTrigger : StateTriggerBase
{
    public DeviceType PlatformType
    {
        get { return (DeviceType)GetValue(DeviceTypeProperty); }
        set { SetValue(DeviceTypeProperty, value); }
    }
 
    public static readonly DependencyProperty DeviceTypeProperty =
            DependencyProperty.Register("DeviceType", typeof(DeviceType), typeof(DeviceTrigger),
            new PropertyMetadata(DeviceType.Unknown, OnDeviceTypePropertyChanged));
 
    private static void OnDeviceTypePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var obj = (DeviceTrigger)d;
        var val = (DeviceType)e.NewValue;
        var device = AnalyticsInfo.VersionInfo.DeviceFamily;
 
        if (device == "Windows.Mobile")
            obj.SetActive(val == DeviceType.Mobile);
 
        if (device == "Windows.Desktop")
            obj.SetActive(val == DeviceType.Desktop);
    }
 
    public enum DeviceType
    {
        Unknown = 0, Desktop = 1, Mobile = 2,
    }
}

In questo caso specifico, siamo andati a creare una classe DeviceTrigger, poichè vogliamo cambiare la UI in base al fatto che siamo su un dispositivo Desktop, oppure su un dispositivo Mobile. Ci siamo creati una DependencyProperty chiamata DeviceType, che è quella che useremo per impostare il trigger e, attraverso il metodo SetActive, andiamo ad impostare a true o false tutto il trigger, in modo che sia attivo solo quello che ci interessa realmente: in questo caso, sarà attivo il solo trigger che corrisponderà effettivamente al dispositivo utilizzato.
Lato UI invece, quello che dobbiamo fare è semplicemente definire i setter che devono essere eseguiti nel caso in cui il trigger sia attivo:

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="MobileState">
                <VisualState.StateTriggers>
                    <local:DeviceTrigger PlatformType="Mobile" />
                </VisualState.StateTriggers>
 
                <VisualState.Setters>
                    <Setter Target="DeviceText.Text" Value="Sono su Mobile" />
                </VisualState.Setters>
            </VisualState>
 
            <VisualState x:Name="DesktopState">
                <VisualState.StateTriggers>
                    <local:DeviceTrigger PlatformType="Desktop" />
                </VisualState.StateTriggers>
 
                <VisualState.Setters>
                    <Setter Target="DeviceText.Text" Value="Sono sul Desktop" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
        
    <TextBlock x:Name="DeviceText" />
</Grid>

Abbiamo solo una casella di testo chiamata DeviceText in cui andiamo ad impostare i valori relativi quando uno dei due trigger è attivo. Se siamo su PC, il risultato che otteniamo è questo:

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi