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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Routing statico e PreRendering in una Blazor Web App
Usare lo spread operator con i collection initializer in C#
Usare le variabili per personalizzare gli stili CSS
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Workflow di continuous deployment tramite pull request label in GitHub
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Inizializzare i container in Azure Container Apps
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Creare alias per tipi generici e tuple in C#
Effettuare il pull di git LFS in un workflow di GitHub
Short-circuiting della Pipeline in ASP.NET Core