Bahan Mica

Artikel
01/10/2024

Mica adalah bahan buram dan dinamis yang menggabungkan tema dan wallpaper desktop untuk melukis latar belakang jendela berumur panjang seperti aplikasi dan pengaturan. Anda dapat menerapkan Mica ke backdrop aplikasi Anda untuk menyenangkan pengguna dan membuat hierarki visual, membantu produktivitas, dengan meningkatkan kejelasan tentang jendela mana yang sedang fokus. Mica dirancang khusus untuk performa aplikasi karena hanya sampel wallpaper desktop sekali untuk membuat visualisasinya. Mica tersedia untuk aplikasi UWP yang menggunakan WinUI 2 dan aplikasi yang menggunakan SDK Aplikasi Windows 1.1 atau yang lebih baru, saat berjalan pada Windows 11 versi 22000 atau yang lebih baru.

gambar hero

Mica dalam tema terang

Mica dalam tema gelap

Mica Alt adalah varian Mica, dengan tinting yang lebih kuat dari warna latar belakang desktop pengguna. Anda dapat menerapkan Mica Alt ke backdrop aplikasi untuk menyediakan hierarki visual yang lebih dalam daripada Mica, terutama saat membuat aplikasi dengan bilah judul bertab. Mica Alt tersedia untuk aplikasi yang menggunakan SDK Aplikasi Windows 1.1 atau yang lebih baru, saat berjalan pada Windows 11 versi 22000 atau yang lebih baru.

Gambar-gambar ini menunjukkan perbedaan antara Mica dan Mica Alt di bilah judul dengan tab. Gambar pertama menggunakan Mica dan gambar kedua menggunakan Mica Alt.

Cuplikan layar Mica di bilah judul dengan tab.

Cuplikan layar Mica Alt di bilah judul dengan tab.

Kapan menggunakan Mica atau Mica Alt

Mica dan Mica Alt adalah bahan yang muncul di latar belakang aplikasi Anda — di belakang semua konten lainnya. Setiap materi buram dan menggabungkan tema pengguna dan wallpaper desktop untuk menciptakan penampilannya yang sangat dipersonalisasi. Saat pengguna memindahkan jendela di seluruh layar, materi Mica secara dinamis beradaptasi untuk membuat visualisasi yang kaya menggunakan wallpaper di bawah aplikasi. Selain itu, materi membantu pengguna fokus pada tugas saat ini dengan kembali ke warna netral ketika aplikasi tidak aktif.

Kami menyarankan agar Anda menerapkan Mica atau Mica Alt sebagai lapisan dasar aplikasi Anda, dan memprioritaskan visibilitas di area bilah judul. Untuk panduan lapisan yang lebih spesifik, lihat Lapisan dan Elevasi dan Lapisan aplikasi dengan Mica.

Kegunaan dan kemampuan beradaptasi

Bahan Mica secara otomatis menyesuaikan penampilan mereka untuk berbagai perangkat dan konteks. Mereka dirancang untuk performa karena mereka menangkap wallpaper latar belakang hanya sekali untuk membuat visualisasi mereka.

Dalam mode Kontras Tinggi, pengguna terus melihat warna latar belakang yang akrab dari pilihan mereka sebagai pengganti Mica atau Mica Alt. Selain itu, bahan Mica akan muncul sebagai warna fallback solid (SolidBackgroundFillColorBase untuk Mica, SolidBackgroundFillColorBaseAlt untuk Mica Alt) ketika:

Pengguna menonaktifkan transparansi di Pengaturan > Warna Personalisasi > .
Mode Penghemat Baterai diaktifkan.
Aplikasi ini berjalan pada perangkat keras kelas bawah.
Jendela aplikasi di desktop dinonaktifkan.
Aplikasi Windows berjalan di Xbox atau HoloLens.
Versi Windows di bawah 22000.

Lapisan aplikasi dengan Mica

Lapisan konten pola standar
Lapisan konten standar

Lapisan konten pola kartu

Mica sangat ideal sebagai lapisan fondasi dalam hierarki aplikasi Anda karena statusnya yang tidak aktif dan aktif serta personalisasi yang halus. Untuk mengikuti sistem Lapisan dan Elevasi dua lapisan, kami mendorong Anda untuk menerapkan Mica sebagai lapisan dasar aplikasi Anda dan menambahkan lapisan konten tambahan yang berada di atas lapisan dasar. Lapisan konten harus mengambil bahan di belakangnya, Mica, menggunakan LayerFillColorDefaultBrush, warna solid dengan opasitas rendah, sebagai latar belakangnya. Pola lapisan konten yang kami rekomendasikan adalah:

Pola standar: Latar belakang yang berdampingan untuk area besar yang membutuhkan diferensiasi hierarkis yang berbeda dari lapisan dasar. LayerFillColorDefaultBrush harus diterapkan ke latar belakang kontainer permukaan aplikasi WinUI Anda (misalnya Grid, StackPanels, Frame, dll.).
Pola kartu: Kartu tersegmentasi untuk aplikasi yang dirancang dengan beberapa komponen antarmuka pengguna terbalik dan terhenti. Untuk definisi antarmuka pengguna kartu menggunakan LayerFillColorDefaultBrush, lihat Panduan Lapisan dan Elevasi .

Untuk memberi jendela aplikasi Anda tampilan yang mulus, Mica harus terlihat di bilah judul jika Anda memilih untuk menerapkan materi ke aplikasi Anda. Anda dapat menampilkan Mica di bilah judul dengan memperluas aplikasi ke area non-klien dan membuat bilah judul kustom transparan. Untuk informasi selengkapnya, lihat Bilah judul.

Contoh berikut menampilkan implementasi umum strategi lapisan dengan NavigationView di mana Mica terlihat di area bilah judul.

Pola standar di Left NavigationView.
Pola standar di Tampilan Navigasi Atas.
Pola kartu di Left NavigationView.

Pola standar di Left NavigationView

Secara default, NavigationView dalam mode Kiri menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

Tampilan Navigasi dalam pola standar dengan bilah judul kustom dalam mode Kiri

Pola standar di Tampilan Navigasi Atas

Secara default, NavigationView dalam mode Atas menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

Tampilan Navigasi dalam pola standar dengan bilah judul kustom dalam mode Atas

Pola kartu di Navigasi KiriTampilan

Untuk mengikuti pola kartu menggunakan NavigationView, Anda harus menghapus lapisan konten default dengan menimpa sumber daya tema latar belakang dan batas. Kemudian, Anda dapat membuat kartu di area konten kontrol. Contoh ini membuat beberapa kartu, memperluas Mica ke area bilah judul, dan membuat bilah judul kustom. Untuk informasi selengkapnya tentang UI kartu, lihat Panduan lapisan dan Elevasi .

NavigationView dalam pola standar dengan bilah judul kustom dalam mode Kiri

Lapisan aplikasi dengan Mica Alt

Mica Alt adalah alternatif untuk Mica sebagai lapisan dasar dalam hierarki aplikasi Anda dengan fitur yang sama seperti status tidak aktif dan aktif dan personalisasi halus. Kami mendorong Anda untuk menerapkan Mica Alt sebagai lapisan dasar aplikasi Anda saat memerlukan kontras antara elemen bilah judul dan area perintah aplikasi Anda (misalnya navigasi, menu).

Skenario umum untuk menggunakan Mica Alt adalah ketika Anda membuat aplikasi dengan bilah judul bertab. Untuk mengikuti panduan Lapisan dan Elevasi , kami mendorong Anda untuk menerapkan Mica Alt sebagai lapisan dasar aplikasi Anda, tambahkan lapisan perintah yang berada di atas lapisan dasar, dan akhirnya menambahkan lapisan konten tambahan yang berada di atas lapisan perintah. Lapisan komando harus mengambil bahan di belakangnya, Mica Alt, menggunakan LayerOnMicaBaseAltFillColorDefaultBrush, warna solid dengan keburaman rendah, sebagai latar belakangnya. Lapisan konten harus mengambil lapisan di bawahnya, menggunakan LayerFillColorDefaultBrush, warna solid opasitas rendah lainnya. Sistem lapisan adalah sebagai berikut:

Mica Alt
Lapisan perintah: Memerlukan diferensiasi hierarkis yang berbeda dari lapisan dasar. LayerOnMicaBaseAltFillColorDefaultBrush harus diterapkan ke area perintah permukaan aplikasi WinUI Anda (misalnya MenuBar, struktur navigasi, dll.)
Lapisan konten: Latar belakang yang berdampingan untuk area besar yang membutuhkan diferensiasi hierarkis yang berbeda dari lapisan komando. LayerFillColorDefaultBrush harus diterapkan ke latar belakang kontainer permukaan aplikasi WinUI Anda (misalnya Kisi, StackPanel, Bingkai, dll.).

Untuk memberi jendela aplikasi Anda tampilan yang mulus, Mica Alt harus terlihat di bilah judul jika Anda memilih untuk menerapkan materi ke aplikasi Anda. Anda dapat menampilkan Mica Alt di bilah judul dengan memperluas aplikasi Anda ke area non-klien dan membuat bilah judul kustom transparan.

Rekomendasi

Terapkan material backdrop ke lapisan paling belakang (mengganti jika ApplicationPageBackgroundThemeBrush ada).
Atur semua lapisan latar belakang yang ingin Anda lihat Mica menjadi transparan sehingga Mica menunjukkan melalui.
Jangan terapkan materi backdrop lebih dari sekali dalam aplikasi.
Jangan terapkan materi backdrop ke elemen UI. Bahan backdrop tidak akan muncul pada elemen itu sendiri. Ini hanya akan muncul jika semua lapisan antara elemen UI dan jendela diatur ke transparan.

Cara menggunakan Mica

Anda dapat menggunakan Mica di aplikasi UWP yang menggunakan WinUI 2, atau di aplikasi yang menggunakan SDK Aplikasi Windows 1.1 atau yang lebih baru. Anda dapat menggunakan Mica Alt di aplikasi yang menggunakan SDK Aplikasi Windows 1.1 atau yang lebih baru.

Menggunakan Mica dengan SDK Aplikasi Windows

Untuk menggunakan Mica di aplikasi XAML yang menggunakan SDK Aplikasi Windows dan WinUI 3, atur properti Window.SystemBackdrop ke MicaBackdrop.

Contoh-contoh ini menunjukkan cara melakukan ini di XAML dan dalam kode.

Mika

<Window
    ... >

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

</Window>

public MainWindow()
{
    this.InitializeComponent();

    SystemBackdrop = new MicaBackdrop() 
                        { Kind = MicaKind.BaseAlt };
}

Untuk informasi selengkapnya tentang menggunakan API Komposisi MicaController , lihat Menerapkan materi Mica atau Akrilik di aplikasi desktop untuk Windows 11.

Untuk menggunakan materi backdrop di aplikasi Win32, lihat Menerapkan Mica di aplikasi desktop Win32 untuk Windows 11.

Menggunakan Mica dengan WinUI 2 untuk UWP

API Penting: Kelas BackdropMaterial

Anda dapat menerapkan Mica di aplikasi UWP dengan kelas BackdropMaterial . Kami menyarankan agar Anda mengatur properti terlampir BackdropMaterial pada elemen XAML yang merupakan akar konten XAML Anda, karena akan berlaku untuk seluruh wilayah konten (seperti Jendela). Jika aplikasi Anda memiliki Bingkai yang menavigasi beberapa halaman, Anda harus mengatur properti ini pada Bingkai. Jika tidak, Anda harus mengatur properti ini di Halaman aplikasi Anda.

<Page muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <TextBlock>Hello world</TextBlock>
</Page>

Contoh berikut menunjukkan cara menerapkan pola lapisan standar yang ditunjukkan sebelumnya. Masing-masing contoh ini menggunakan dan memerlukan kode batang judul yang sama, yang ditunjukkan dalam contoh terakhir.

Contoh: Pola standar di Left NavigationView

Secara default, NavigationView dalam mode Kiri menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

<Page
    x:Class="LeftNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LeftNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12, 0, 0, 0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <Grid>
                        <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                    </Grid>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

Contoh: Pola standar di Tampilan Navigasi Atas

Secara default, NavigationView dalam mode Atas menyertakan lapisan konten di area kontennya. Contoh ini memperluas Mica ke area bilah judul dan membuat bilah judul kustom.

<Page
    x:Class="TopNavView.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TopNavView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <CornerRadius x:Key="NavigationViewContentGridCornerRadius">0</CornerRadius>
    </Page.Resources>
    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="32"
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>
            <muxc:NavigationView x:Name="NavigationViewControl"          
            Header="Page Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            PaneDisplayMode="Top">
                <muxc:NavigationView.MenuItems>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
                    <muxc:NavigationViewItem Content="Text"/>
            </muxc:NavigationView.MenuItems>
                <Grid>
                    <Frame x:Name="contentFrame">
                        <Grid>
                            <TextBlock Padding="56,16,0,0">Page content!</TextBlock>
                        </Grid>
                    </Frame>
                </Grid>
            </muxc:NavigationView>
    </Grid>
</Page>

Contoh: Pola kartu di Navigasi KiriView

<Page
    x:Class="CardLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CardLayout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Page.Resources>
        <!--This top margin is the height of the custom TitleBar-->
        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
        <Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
        <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
    </Page.Resources>

    <Grid>
        <Border x:Name="AppTitleBar"
                IsHitTestVisible="True"
                VerticalAlignment="Top"
                Background="Transparent"
                Height="48"
                Canvas.ZIndex="1" 
                Margin="48,0,0,0">
            <StackPanel Orientation="Horizontal">
                <Image x:Name="AppFontIcon"
                    HorizontalAlignment="Left" 
                    VerticalAlignment="Center"
                    Source="Assets/Square44x44Logo.png" 
                    Width="16" 
                    Height="16"/>
                <TextBlock x:Name="AppTitle"
                    Text="Test App Title"
                    VerticalAlignment="Center"
                    Margin="12,0,0,0"
                    Style="{StaticResource CaptionTextBlockStyle}" />
            </StackPanel>
        </Border>

        <muxc:NavigationView x:Name="NavigationViewControl"
            IsTitleBarAutoPaddingEnabled="False"            
            IsBackButtonVisible="Visible"           
            Header="Title" 
            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
            Canvas.ZIndex="0">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
                <muxc:NavigationViewItem Icon="Target" Content="Text"/>
            </muxc:NavigationView.MenuItems>
            <Grid>
                <Frame x:Name="contentFrame">
                    <StackPanel Orientation="Vertical" Margin="40,16,0,0">
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16" 
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                        <Border Width="600" Height="200" Background="{ThemeResource LayerFillColorDefaultBrush}"
                                VerticalAlignment="Top" 
                                HorizontalAlignment="Left" 
                                Margin="16"
                                CornerRadius="8"
                                BorderThickness="1"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}">
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content here!</TextBlock>
                        </Border>
                    </StackPanel>
                </Frame>
            </Grid>
        </muxc:NavigationView>
    </Grid>
</Page>

Kode bilah judul di belakang

Tiga halaman XAML tata letak aplikasi sebelumnya menggunakan kode ini untuk membuat bilah judul kustom adaptif terhadap status aplikasi dan visibilitas.

Untuk informasi selengkapnya, lihat Kustomisasi bilah judul.

public MainPage()
{
    this.InitializeComponent();
    var titleBar = ApplicationView.GetForCurrentView().TitleBar;

    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
    UpdateTitleBarLayout(coreTitleBar);

    // Set XAML element as a draggable region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    // For example, when the app moves to a screen with a different DPI.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;

    //Register a handler for when the window changes focus
    Window.Current.Activated += Current_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    UpdateTitleBarLayout(sender);
}

private void UpdateTitleBarLayout(CoreApplicationViewTitleBar coreTitleBar)
{
    // Update title bar control size as needed to account for system size changes.
    AppTitleBar.Height = coreTitleBar.Height;

    // Ensure the custom title bar does not overlap window caption controls
    Thickness currMargin = AppTitleBar.Margin;
    AppTitleBar.Margin = new Thickness(currMargin.Left, currMargin.Top, coreTitleBar.SystemOverlayRightInset, currMargin.Bottom);
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

// Update the TitleBar based on the inactive/active state of the app
private void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)
{
    SolidColorBrush defaultForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorPrimaryBrush"];
    SolidColorBrush inactiveForegroundBrush = (SolidColorBrush)Application.Current.Resources["TextFillColorDisabledBrush"];

    if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)
    {
        AppTitle.Foreground = inactiveForegroundBrush;
    }
    else
    {
        AppTitle.Foreground = defaultForegroundBrush;
    }
}

// Update the TitleBar content layout depending on NavigationView DisplayMode
private void NavigationViewControl_DisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
{
    const int topIndent = 16;
    const int expandedIndent = 48;
    int minimalIndent = 104;

    // If the back button is not visible, reduce the TitleBar content indent.
    if (NavigationViewControl.IsBackButtonVisible.Equals(Microsoft.UI.Xaml.Controls.NavigationViewBackButtonVisible.Collapsed))
    {
        minimalIndent = 48;
    }

    Thickness currMargin = AppTitleBar.Margin;
    
    // Set the TitleBar margin dependent on NavigationView display mode
    if (sender.PaneDisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top)
    {
        AppTitleBar.Margin = new Thickness(topIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
    else if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
    {
        AppTitleBar.Margin = new Thickness(minimalIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }          
    else
    {
        AppTitleBar.Margin = new Thickness(expandedIndent, currMargin.Top, currMargin.Right, currMargin.Bottom);
    }
}

Bagikan melalui

Bahan Mica

Kapan menggunakan Mica atau Mica Alt

Kegunaan dan kemampuan beradaptasi

Lapisan aplikasi dengan Mica

Pola standar di Left NavigationView

Pola standar di Tampilan Navigasi Atas

Pola kartu di Navigasi KiriTampilan

Lapisan aplikasi dengan Mica Alt

Rekomendasi

Cara menggunakan Mica

Menggunakan Mica dengan SDK Aplikasi Windows

Mika

Menggunakan Mica dengan WinUI 2 untuk UWP

Contoh: Pola standar di Left NavigationView

Contoh: Pola standar di Tampilan Navigasi Atas

Contoh: Pola kartu di Navigasi KiriView

Kode bilah judul di belakang

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Bahan Mica

Kapan menggunakan Mica atau Mica Alt

Kegunaan dan kemampuan beradaptasi

Lapisan aplikasi dengan Mica

Pola standar di Left NavigationView

Pola standar di Tampilan Navigasi Atas

Pola kartu di Navigasi KiriTampilan

Lapisan aplikasi dengan Mica Alt

Rekomendasi

Cara menggunakan Mica

Menggunakan Mica dengan SDK Aplikasi Windows

Mika

Menggunakan Mica dengan WinUI 2 untuk UWP

Contoh: Pola standar di Left NavigationView

Contoh: Pola standar di Tampilan Navigasi Atas

Contoh: Pola kartu di Navigasi KiriView

Kode bilah judul di belakang

Artikel terkait

Saran dan Komentar

Sumber Daya Tambahan: