Bagikan melalui


Ekstensi ikon

Ekstensi ikon adalah sekelompok ekstensi markup yang dimaksudkan untuk menyederhanakan pembuatan berbagai jenis ikon (khususnya BitmapIcon, , BitmapIconSource, FontIconFontIconSource, SymbolIcon, dan SymbolIconSource) yang digunakan di berbagai kontrol XAML. Menggunakan ekstensi ini tidak mengaktifkan kemampuan baru per detik, tetapi sangat menyederhanakan sintaks XAML yang diperlukan untuk membuat instans jenis ikon ini.

BitmapIconExtension

BitmapIconExtension Ekstensi markup mirip dalam struktur dengan dua ekstensi sebelumnya, tetapi menghasilkan instans BitmapIcon alih-alih ikon berbasis font. Berikut adalah cara penggunaannya:

<MenuFlyout xmlns:ui="using:CommunityToolkit.WinUI">

    <!--Before-->
    <MenuFlyoutItem Text="Click me!">
        <MenuFlyoutItem.Icon>
            <BitmapIcon Source="/Assets/myicon.png"/>
        </MenuFlyoutItem.Icon>
    </MenuFlyoutItem>

    <!--After-->
    <MenuFlyoutItem
        Text="No, click me!"
        Icon="{ui:BitmapIcon Source=/Assets/myicon.png}" />
</MenuFlyout>

BitmapIconSourceExtension

Kelas BitmapIconSourceExtension mencerminkan jenis , BitmapIconExtension dengan satu-satunya perbedaan adalah bahwa ia mengembalikan instans BitmapIconSource . Berikut adalah cara penggunaannya:

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">
    <SwipeItem Text="Send" IconSource="{ui:BitmapIconSource Source=/Assets/myicon.png}"/>
</SwipeItems>

FontIconExtension

Jenis ini FontIconExtension menyediakan kemampuan untuk membuat FontIcon instans dari XAML dengan representasi yang lebih ringkas daripada dengan secara eksplisit membuat objek baru FontIcon untuk ditetapkan ke properti target. Properti ini juga memetakan semua properti yang tersedia FontIcon , sehingga dua API mengekspos serangkaian opsi kustomisasi yang sama, hanya melalui sintaks XAML yang berbeda:

<CommandBar xmlns:ui="using:CommunityToolkit.WinUI">

    <!--Before-->
    <AppBarButton>
        <AppBarButton.Icon>
            <FontIcon Glyph="&#xE102;" FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <!--After-->
    <AppBarButton Icon="{ui:FontIcon Glyph=&#xE102;}"/>
</CommandBar>

FontIconSourceExtension

Kelas FontIconSourceExtension mencerminkan jenisnya FontIconExtension , tetapi memproduksi FontIconSource instans alih-alih FontIcon:

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">

    <!--Before-->
    <SwipeItem Text="Accept">
        <SwipeItem.IconSource>
            <FontIconSource Glyph="&#xE10B;"/>
        </SwipeItem.IconSource>
    </SwipeItem>
    
    <!--After-->
    <SwipeItem Text="Accept" IconSource="{ui:FontIconSource Glyph=&#xE10B;}"/>
</SwipeItems>

SymbolIconExtension

Jenis mencerminkan SymbolIconExtension FontIcon ekstensi markup, dengan perbedaan utama adalah bahwa ia menggunakan Symbol nilai untuk menentukan ikon. Semua properti lain dari FontIconExtension tersedia, dengan pengecualian keluarga font, yang selalu diatur ke "Aset Segoe MDL2". Berikut adalah cara penggunaannya:

<CommandBar xmlns:ui="using:CommunityToolkit.WinUI">

    <!--Before-->
    <AppBarButton>
        <AppBarButton.Icon>
            <SymbolIcon Symbol="Play"/>
        </AppBarButton.Icon>
    </AppBarButton>

    <!--After-->
    <AppBarButton Icon="{ui:SymbolIcon Symbol=Play}"/>
</CommandBar>

Catatan

sebenarnya SymbolIconExtension mengembalikan FontIcon nilai alih-alih SymbolIcon nilai. Ini dilakukan untuk menyertakan properti tambahan (misalnya, FontSize, , FontWeightdll.) yang tidak akan tersedia. Ketika ikon tersebut tidak dimodifikasi, tampilan ikon yang dihasilkan masih akan sama dengan yang akan dihasilkan dari penggunaan SymbolIcon instans.

SymbolIconSource

Jenis ini SymbolIconSourceExtension adalah alternatif untuk FontIconSourceExtension yang mengambil Symbol nilai alih-alih teks, dan menampilkan ikon dengan "Segoe MDL2 Assets". Ini setara dengan jenisnya SymbolIconExtension , kecuali fakta bahwa ia mengembalikan instans FontIconSource :

<SwipeItems
    xmlns:ui="using:CommunityToolkit.WinUI"
    Mode="Reveal">
    <SwipeItem Text="Play" IconSource="{ui:SymbolIconSource Symbol=Play}"/>
</SwipeItems>

Keterangan

Semua nilai yang dikembalikan oleh ekstensi markup ini milik Windows.UI.Xaml.* namespace layanan. Ini berarti bahwa mereka hanya akan bekerja dengan baik ketika digunakan dengan kontrol dari namespace layanan tersebut, dan bukan dari Microsoft.UI.Xaml.* (namespace WinUI). Misalnya, mencoba menggunakan FontIconSourceExtension untuk mengatur IconSource properti pada Microsoft.UI.Xaml.Controls.SwipeItems tidak akan berfungsi dengan benar, karena ekstensi akan menghasilkan Windows.UI.Xaml.Controls.FontIconSource nilai alih-alih satu Microsoft.UI.Xaml.Controls.FontIconSource . Saat bekerja dengan kontrol WinUI, Anda harus mendeklarasikan ikon yang Anda butuhkan secara manual dengan sintaks XAML eksplisit.

Contoh

Anda dapat menemukan lebih banyak contoh dalam pengujian unit.