Dall'archivio script > Windows 10

Applicare effetti di luce nella Universal Windows Platform

di Marco LeonciniMarco Leoncini, in Windows 10,

Nel rilascio del Fall Creators Update, tramite l'introduzione del Fluent Design System, è possibile creare degli effetti di luce sulla interfaccia grafica.
Il tipo XamlLight permette di applicare questi effetti direttamente sull'elemento grafico dichiarato mediante lo XAML:

public sealed class OrangeSpotLight : XamlLight
{
    public static readonly DependencyProperty IsTargetProperty =
        DependencyProperty.RegisterAttached(
        "IsTarget",
        typeof(bool),
        typeof(OrangeSpotLight),
        new PropertyMetadata(null, OnIsTargetChanged)
    );

    public static void SetIsTarget(DependencyObject target, bool value)
    {
        target.SetValue(IsTargetProperty, value);
    }

    public static Boolean GetIsTarget(DependencyObject target)
    {
        return (bool)target.GetValue(IsTargetProperty);
    }

    // Handle attached property changed to automatically target and untarget UIElements and Brushes.
    private static void OnIsTargetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        var isAdding = (bool)e.NewValue;

        if (isAdding)
        {
            if (obj is UIElement)
            {
                XamlLight.AddTargetElement(GetIdStatic(), obj as UIElement);
            }
            else if (obj is Brush)
            {
                XamlLight.AddTargetBrush(GetIdStatic(), obj as Brush);
            }
        }
        else
        {
            if (obj is UIElement)
            {
                XamlLight.RemoveTargetElement(GetIdStatic(), obj as UIElement);
            }
            else if (obj is Brush)
            {
                XamlLight.RemoveTargetBrush(GetIdStatic(), obj as Brush);
            }
        }
    }

    protected override void OnConnected(UIElement newElement)
    {
        if (CompositionLight == null)
        {
            var spotLight = Window.Current.Compositor.CreateSpotLight();
            spotLight.InnerConeColor = Colors.Orange;
            spotLight.OuterConeColor = Colors.Yellow;
            spotLight.InnerConeAngleInDegrees = 30;
            spotLight.OuterConeAngleInDegrees = 45;
            spotLight.Offset = new System.Numerics.Vector3(30, 30, 200);
            CompositionLight = spotLight;
        }
    }

    protected override void OnDisconnected(UIElement oldElement)
    {
        if (CompositionLight != null)
        {
            CompositionLight.Dispose();
            CompositionLight = null;
        }
    }

    protected override string GetId()
    {
        return GetIdStatic();
    }

    private static string GetIdStatic()
    {
        return typeof(OrangeSpotLight).FullName;
    }
}

Quello che a prima vista può sembrare un codice complesso è in realtà molto semplice ed ha il suo cuore nell'override del metodo OnConnected dove mediante l'API Window.Current.Compositor.CreateSpotLight viene creata la luce "spot".
L'applicazione dell'effetto viene fatta nel callback della proprietà IsTarget. 

<Border BorderThickness="5">
  <Border.BorderBrush>
    <SolidColorBrush Color="White" local:OrangeSpotLight.IsTarget="true" />
            </Border.BorderBrush>
  <TextBlock Text="Ciao Marco" />
</Border>

La proprietà IsTatarget indica l'oggetto al quale viene applicato il nostro effetto.

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