Megosztás a következőn keresztül:

Mika- vagy Akril-anyagok alkalmazása asztali alkalmazásokban Windows 11

Windows 11-ben az anyaghatások olyan vizuális effektusok, amelyeket az UX felületekre alkalmaznak és amelyek a valós tárgyakra hasonlítanak. Az olyan elzárt anyagok, mint a Mica és az Akril, alaprétegként szolgálnak az interaktív felhasználói felület vezérlői alatt.

Mica egy átlátszatlan anyag, amely magában foglalja a felhasználó témáját és asztali háttérképét, hogy egy nagyon személyre szabott megjelenést hozzon létre. A Mica teljesítményre van tervezve, mivel csak egyszer rögzíti a háttérképet a vizualizáció létrehozásához, ezért az alkalmazás alaprétegéhez ajánljuk, különösen a címsor területén.

Akril egy félig átlátszó anyag, amely replikálja a fagyos üveg hatását. Csak átmeneti, fényelzárási felületekhez, például úszó panelekhez és helyi menükhöz használható.

Ez a cikk bemutatja, hogyan alkalmazható a Mica vagy az Akril a Windows App SDK/WinUI 3 XAML-alkalmazás alaprétegeként.

Megjegyzés:

Háttéranyag használata

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a rendszerháttárakat működés közben

WinUI 3 Katalógus ikon A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Ha az alkalmazásban Mica- vagy Akryl-anyagot szeretne alkalmazni, állítsa be a SystemBackdrop tulajdonságot XAML SystemBackdrop (ez általában az egyik beépített háttérrendszer, például a MicaBackdrop vagy a DesktopAcrylicBackdrop) értékére.

Ezek az elemek SystemBackdrop tulajdonságot tartalmaznak:

Ezek a példák bemutatják, hogyan állíthatja be a rendszer háttérrendszerét az XAML-ben.

Mica

A Mica általában egy alkalmazásablak háttérrendszereként használatos.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

A Mica Alt variáns használatához állítsa a(z) Kind tulajdonságot BaseAlt értékre.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

Acrylic

Az asztali Akril használható az ablak háttereként.

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

Akril az átmeneti felhasználói interfészen

Az akrilt gyakran használják az átmeneti felhasználói felület háttereként is, például egy előugró panelhez. Ezt XAML-ben vagy kódban is beállíthatja, mivel a legördülő menük gyakran dinamikusan jönnek létre.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Speciális: Rendszer háttérvezérlő használata

Megjegyzés:

Az 1.3-as Windows App SDK-től kezdve a Window.SystemBackdrop tulajdonság XAML-SystemBackdrop -ként történő beállításával alkalmazható az előző szakaszban leírtak szerint. Ez az ajánlott módja annak, hogy anyagot alkalmazzunk a legtöbb alkalmazáshoz.

A cikk további része bemutatja, hogyan használhatja a Composition MicaController és a DesktopAcrylicController API-kat, amelyek nagyobb ellenőrzést biztosítanak a háttérrendszer viselkedése felett.

Ha háttéranyagot szeretne használni az alkalmazásban, használhatja a ISystemBackdropController felületet implementáló vezérlők egyikét (MicaController vagy DesktopAcrylicController). Ezek az osztályok kezelik a rendszer háttéranyagának renderelését, valamint az anyag rendszerszabályzatának kezelését.

A Mica háttéranyagként való használatához hozzon létre egy MicaController objektumot. Az Acrylic használatához hozzon létre egy DesktopAcrylicController objektumot. A beállítási és a támogató kód minden rendszer-háttéranyagtípus esetében megegyezik.

MicaController létrehozása

MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

DesktopAcrylicController létrehozása

DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

A vezérlő alapértelmezés szerint reagál a rendszer világos és sötét témáira. A viselkedés felülbírálásához a következő tulajdonságokat állíthatja be a vezérlőn:

Megjegyzés:

A vezérlő négy tulajdonságának testreszabása után a továbbiakban nem alkalmazza az alapértelmezett világos vagy sötét értékeket a társított SystemBackdropConfiguration.Theme módosításakor. Ezeket a tulajdonságokat manuálisan kell frissítenie, hogy megfeleljenek az új témának.

A háttéranyag alkalmazásbeli használatához a következő elemekre van szükség:

  • Rendszer támogatás

    A rendszernek, ahol az alkalmazás fut, támogatnia kell a háttéranyagot. Hívja meg a MicaController.IsSupported vagy DesktopAcrylicController.IsSupported metódust, hogy a háttéranyag futásidőben is támogatott legyen.

  • Érvényes cél

    Meg kell adnia egy célt, amely implementálja az ICompositionSupportsSystemBackdrop felületet. Egy XAML-alkalmazásban az XAML Ablak implementálja ezt a felületet, és háttérbeli célként használja.

  • SystemBackdropConfiguration objektum

    A SystemBackdropConfiguration alkalmazásspecifikus szabályzatinformációkat biztosít a rendszer háttérrendszer-anyagának megfelelő konfigurálásához.

  • DispatcherQueue objektum

    A fő XAML-szálon egy elérhető Windows.System.DispatcherQueue-nek kell lennie. Hívás DispatcherQueue.EnsureSystemDispatcherQueue() annak ellenőrzésére, hogy létezik-e ilyen.

Példa: A Mica használata vezérlővel egy WinUI-alkalmazásban

Ez a példa bemutatja, hogyan állíthatja be a Mica háttéranyagot egy vezérlő használatával egy XAML-alkalmazásban.

Jótanács

Lásd továbbá az alábbi példaprojekteket a GitHub:

C#: SampleSystemBackdropsWindow a WinUI-katalógusban.

C++/WinRT: Windows App SDK Mica-minta.

using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}
  • Last updated on