Anpassen von Effekten & Erfahrungen mithilfe der Windows-BenutzeroberflächeTailoring effects & experiences using Windows UI

Die Windows-Benutzeroberfläche bietet viele schöne Effekte, Animationen und Mittel für die Unterscheidung.Windows UI provides many beautiful effects, animations, and means for differentiation. Es ist jedoch immer noch ein erforderlicher Bestandteil der Erstellung erfolgreicher Anwendungen, die Benutzer Erwartungen an Leistung und Anpassbarkeit zu erfüllen.However, meeting user expectations for performance and customizability is still a necessary part of creating successful applications. Der universelle Windows-Plattform unterstützt eine große, unterschiedlichste Gerätefamilie mit unterschiedlichen Features und Funktionen.The Universal Windows Platform supports a large, diverse family of devices, which have different features and capabilities. Um für alle Benutzer ein inklusives Verhalten bereitzustellen, müssen Sie sicherstellen, dass Ihre Anwendungen Geräte übergreifend skaliert werden und die Benutzereinstellungen beachtet werden.In order to provide an inclusive experience for all your users, you need to ensure your applications scale across devices and respect user preferences. Die Anpassung der Benutzeroberfläche bietet eine effiziente Möglichkeit, um die Funktionen eines Geräts zu nutzen und eine angenehme und inklusivbenutzer Oberfläche sicherzustellen.UI tailoring can provide an efficient way to leverage a device’s capabilities and ensure a pleasant and inclusive user experience.

Die Benutzeroberflächen Anpassung ist eine umfassende Kategorie, die die Arbeit für leistungsstarke, schöne Benutzeroberflächen in Bezug auf die folgenden Bereiche umfasst:UI tailoring is a broad category encompassing work for performant, beautiful UI with respect to the following areas:

  • Berücksichtigen und Anpassen von Benutzereinstellungen für EffekteRespecting and adapting to user settings for effects
  • Benutzereinstellungen für Animationen werden untersuchtAccommodating user settings for animations
  • Optimieren der Benutzeroberfläche für die angegebenen HardwarefunktionenOptimizing UI for the given hardware capabilities

Hier erfahren Sie, wie Sie Ihre Effekte und Animationen in den oben aufgeführten Bereichen mit der visuellen Schicht anpassen, aber es gibt noch viele weitere Möglichkeiten, Ihre Anwendung anzupassen, um eine gute Benutzerumgebung zu gewährleisten.Here, we'll cover how to tailor your effects and animations with the Visual Layer in the areas above, but there are many other means to tailor your application to ensure a great end user experience. Leitfäden finden Sie unter so passen Sie die Benutzeroberfläche für verschiedene Geräte an und Erstellen reaktionsfähige BenutzerOberflächen.Guidance docs are available on how to tailor your UI for various devices and create responsive UI.

Benutzer EffekteinstellungenUser effects settings

Benutzer können Ihre Windows-Darstellung aus einer Vielzahl von Gründen anpassen, die von Anwendungen beachtet und angepasst werden müssen.Users may customize their Windows experience for a variety of reasons, which applications should respect and adapt to. Ein Bereich, der von Endbenutzern gesteuert werden kann, ist die Änderung der Art von Effekten, die im gesamten System angezeigt werden.One area end users can control is changing the types of effects they see used throughout their system.

Einstellungen für TransparenzeffekteTransparency effects settings

Eine solche Effekteinstellung, die Benutzer anpassen können, ist das Aktivieren/Deaktivieren von Transparenz Effekten.One such effect setting users can customize is turning transparency effects on/off. Diese finden Sie in der App "Einstellungen" unter Personalization > Colors, oder über die app "Einstellungen" > vereinfachen des Zugriffs > Anzeige.This can be found in the Settings app under Personalization > Colors, or through Settings app > Ease of Access > Display.

Transparenz Option in "Einstellungen"

Wenn diese aktiviert ist, werden alle Effekte, die Transparenz verwenden, erwartungsgemäß angezeigt.When turned on, any effect that uses transparency will appear as expected. Dies gilt für "Acryl", "hostbackdropbrush" oder ein beliebiges, nicht vollständig undurchsichtiges Diagramm.This applies to Acrylic, HostBackdropBrush, or any custom effect graph that is not fully opaque.

Wenn Sie ausgeschaltet ist, greift das Acrylmaterial automatisch auf eine voll Tonfarbe zurück, da der Acryl Pinsel von XAML standardmäßig auf dieses Ereignis lauscht.When turned off, acrylic material will automatically fall back to a solid color because XAML's acrylic brush has listened to this event by default. Hier sehen wir, dass die Rechner-APP entsprechend auf eine voll Tonfarbe zurückgreift, wenn Transparenzeffekte nicht aktiviert sind:Here, we see the calculator app appropriately falling back to a solid color when transparency effects are not enabled:

Rechner mit einem Acryl  Rechner mit Acryl, der auf Transparenz Einstellungen reagiertCalculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

Allerdings muss die Anwendung für benutzerdefinierte Effekte auf die uisettings. advancedeffectsenabled -Eigenschaft oder das advancedeffectsenabledchanged -Ereignis reagieren und das Effect/Effect-Diagramm auslagern, um einen Effekt zu verwenden, der keine Transparenz aufweist.However, for any custom effects the application needs to respond to the UISettings.AdvancedEffectsEnabled property or AdvancedEffectsEnabledChanged event and switch out the effect/effect graph to use an effect that has no transparency. Ein Beispiel hierfür finden Sie unten:An example of this is below:

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

Animations EinstellungenAnimations settings

Ebenso sollten Anwendungen die uisettings. animationsenabled -Eigenschaft überwachen und darauf reagieren, um sicherzustellen, dass Animationen basierend auf den Benutzereinstellungen in den Einstellungen > einfache Zugriffs > angezeigt werden.Similarly, applications should listen and respond to the UISettings.AnimationsEnabled property to ensure animations are turned on or off based on user settings in Settings > Ease of Access > Display.

Animations Option in "Einstellungen"

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

Nutzen der Funktionen-APILeveraging the capabilities API

Durch die Nutzung der APIs für die compositionperformance können Sie erkennen, welche Kompositions Features auf der jeweiligen Hardware verfügbar und leistungsfähig sind, und den Entwurf anpassen, um sicherzustellen, dass Endbenutzer auf jedem Gerät eine leistungsfähige und schöne Benutzer Funktionalität erhalten.By leveraging the CompositionCapabilities APIs, you can detect which composition features are available and performant on given hardware and tailor the design to ensure end users get a performant and beautiful experience on any device. Mithilfe der APIs können Sie die Hardwaresystem Funktionen überprüfen, um die Skalierung von ordnungsgemäßen Effekten über eine Vielzahl von Formfaktoren hinweg zu implementieren.The APIs provide a means to check hardware system capabilities in order to implement graceful effect scaling across a variety of form factors. Dies erleichtert es, die Anwendung entsprechend anzupassen, um eine schöne und nahtlose Endbenutzer Funktion zu erstellen.This makes it easy to appropriately tailor the application to create a beautiful and seamless end user experience.

Diese API stellt Methoden und einen Ereignislistener bereit, die verwendet werden können, um die Skalierung von Entscheidungen für die Benutzeroberfläche der AnwendungThis API provides methods and an event listener that can be used to make effect scaling decisions for the application UI. Die Funktion erkennt, wie gut das System komplexe Kompositions-und Renderingvorgänge verarbeiten kann, und gibt dann die Informationen in einem leicht verwendbaren Modell zurück, das von Entwicklern verwendet werden kann.The feature detects how well the system can handle complex composition and rendering operations and then returns the information in an easy-to-consume model for developers to utilize.

Verwenden von Kompositions FunktionenUsing composition capabilities

Die Funktion "compositionfunktionen" wird bereits für Features wie das Acrylmaterial genutzt, wobei die Materialien je nach Szenario und Hardware auf einen leistungsfähigere Effekt zurückgreifen.The CompositionCapabilities functionality is already being leveraged for features like Acrylic material, where the material falls back to a more performant effect depending on the scenario and hardware.

Die API kann in wenigen einfachen Schritten zu vorhandenem Code hinzugefügt werden.The API can be added to existing code in a few easy steps.

  1. Erwerben Sie das Funktionen-Objekt im Konstruktor Ihrer Anwendung.Acquire the capabilities object in your application’s constructor.

    _capabilities = CompositionCapabilities.GetForCurrentView();
    
  2. Registrieren Sie einen Ereignislistener für Ihre APP.Register a capabilities changed event listener for your app.

    _capabilities.Changed += HandleCapabilitiesChanged;
    
  3. Fügen Sie der Ereignis Rückruf Methode Inhalt hinzu, um verschiedene Funktionsebenen zu verarbeiten.Add content to the event callback method to handle various capabilities levels. Dies entspricht möglicherweise dem nächsten nachfolgenden Schritt.This may or may not be similar to the next step below.

  4. Wenn Sie Effekte verwenden, überprüfen Sie zuerst das Objekt "Funktionen".When using effects, check the capabilities object first. Verwenden Sie ggf. bedingte Überprüfungen oder Schalter Steuerungs Anweisungen, je nachdem, wie Sie die Effekte anpassen möchten.Consider using conditional checks or switch control statements, depending on how you want to tailor the effects.

    if (_capabilities.AreEffectsSupported())
    {
        // Add incremental effects updates here
    
        if (_capabilities.AreEffectsFast())
        {
            // Add more advanced effects here where applicable
        }
    }
    

Vollständigen Beispielcode finden Sie im [GitHub](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities)-Repository der Windows-Benutzeroberfläche.Full example code can be found on the [Windows UI Github repo](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).

Schnelle im Vergleich zu langsamen EffektenFast vs. slow effects

Basierend auf dem Feedback der bereitgestellten areeffectysupported -Methode und der areeffecungfast -Methode in der compositionmethods-API kann die Anwendung sich entscheiden, teure oder nicht unterstützte Auswirkungen auf andere Effekte ihrer Wahl auszutauschen, die für das Gerät optimiert sind.Based on feedback from the provided AreEffectsSupported and AreEffectsFast methods in the CompositionCapabilities API, the application can decide to swap expensive or unsupported effects for other effects of their choice that are optimized for the device. Einige Effekte sind so bekannt, dass Sie ständig ressourcenintensiver als andere sind und sparsam verwendet werden sollten. andere Effekte können auch mehr frei genutzt werden.Some effects are known to consistently be more resource intensive than others and should be used sparingly, and other effects can be used more freely. Für alle Effekte sollte jedoch Vorsicht beim Verketten und animieren verwendet werden, da einige Szenarien oder Kombinationen die Leistungsmerkmale des Effekt Diagramms ändern können.For all effects, however, care should be used when chaining and animating as some scenarios or combinations may change the performance characteristics of the effect graph. Im folgenden finden Sie eine Reihe von Thumb-Leistungsmerkmalen für einzelne Effekte:Below are some rule of thumb performance characteristics for individual effects:

  • Effekte, die bekanntermaßen hohe Leistung haben, sind wie folgt – Gaußscher Weichzeichner, Schatten Maske, backdropbrush, hostbackdropbrush und ebenenvisualisierung.Effects that are known to have high performance impact are as follows – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, and Layer Visual. Diese werden für Low-End-Geräte (Funktionsebene 9.1-9.3)nicht empfohlen und sollten auf High-End-Geräten umsichtig verwendet werden.These are not recommended for low end devices (feature level 9.1-9.3), and should be used judiciously on high end devices.
  • Zu den Effekten mit mittlerer Leistungs Beeinträchtigung zählen Farb Matrix, bestimmte Blend-Effekte blendmodes (Helligkeit, Farbe, Sättigung und Farbton), Spotlight, scenelightingeffect und (je nach Szenario) bordereffect.Effects with medium performance impact include Color Matrix, certain Blend Effect BlendModes (Luminosity, Color, Saturation, and Hue), SpotLight, SceneLightingEffect, and (depending on scenario) BorderEffect. Diese Auswirkungen können mit bestimmten Szenarien auf Low-End-Geräten verwendet werden. bei der Verkettung und Animation sollte jedoch Vorsicht geboten werden.These effects may work with certain scenarios on low end devices, but care should be used when chaining and animating. Es empfiehlt sich, die Verwendung auf zwei oder weniger zu beschränken und nur über Übergänge zu animieren.Recommend restricting use to two or less and animating on transitions only.
  • Alle anderen Effekte haben geringe Auswirkungen auf die Leistung und funktionieren in allen sinnvollen Szenarien, wenn Animationen und Verkettung verwendet werden.All other effects have low performance impact and work in all reasonable scenarios when animating and chaining.