Ikony w aplikacjach systemu Windows

Ikony zapewniają skróconą wizualizację dla akcji, koncepcji lub produktu. Kompresując znaczenie do obrazu symbolicznego, ikony mogą przekraczać bariery językowe i pomóc zaoszczędzić cenny zasób: przestrzeń ekranu. Dobre ikony zharmonizują się z typografią i resztą języka projektowania. Nie mieszają metafor i przekazują tylko to, co konieczne, jak najszybciej i najprościej.

Ikony mogą być wyświetlane w aplikacjach i poza nimi. W aplikacji używasz ikon do reprezentowania akcji, takiej jak kopiowanie tekstu lub przechodzenie do strony ustawień.

W tym artykule opisano ikony w interfejsie użytkownika aplikacji. Aby dowiedzieć się więcej o ikonach reprezentujących aplikację w systemie Windows (ikonach aplikacji), zobacz Ikony aplikacji.

Dowiedz się, kiedy używać ikon

Ikony mogą zaoszczędzić miejsce, ale kiedy należy ich używać?

Użyj ikony dla akcji, takich jak wycinanie, kopiowanie, wklejanie i zapisywanie, lub w przypadku elementów w menu nawigacji. Użyj ikony, jeśli użytkownik może łatwo zrozumieć, co oznacza ikona, i jest wystarczająco prosta, aby były jasne przy małych rozmiarach.

Nie używaj ikony, jeśli jej znaczenie nie jest jasne lub gdy wymaga to złożonego kształtu.

Użyj odpowiedniego typu ikony

Istnieje wiele sposobów tworzenia ikony. Możesz użyć czcionki symbolu, takiej jak czcionka Segoe Fluent Icon. Możesz utworzyć własny obraz oparty na wektorach. Można nawet użyć obrazu mapy bitowej, chociaż nie jest to zalecane. Poniżej przedstawiono podsumowanie sposobów dodawania ikony do aplikacji.

Aby dodać ikonę w aplikacji XAML, użyj IconElement lub IconSource.

W tej tabeli przedstawiono różne rodzaje ikon, które pochodzą z elementu IconElement i IconSource.

IconElement kontra IconSource

IconElement jest elementem FrameworkElement, więc można go dodać do drzewa obiektów XAML tak samo jak każdy inny element interfejsu użytkownika aplikacji. Nie można go jednak dodać do ResourceDictionary i ponownie użyć jako zasobu udostępnionego.

IconSource jest podobna do IconElement; jednak ponieważ nie jest to FrameworkElement, nie można go używać jako autonomicznego elementu w interfejsie użytkownika, ale może być współużytkowany jako zasób. IconSourceElement to specjalny element ikony, który opakowuje element IconSource, dzięki czemu można go używać wszędzie tam, gdzie potrzebujesz elementu IconElement. Przykład tych funkcji przedstawiono w następnej sekcji.

Przykłady elementu IconElement

Możesz użyć IconElement-pochodnej klasy jako autonomicznego składnika interfejsu użytkownika.

W tym przykładzie pokazano, jak ustawić glyph ikony jako zawartość przycisku. Ustaw FontFamily przycisku, aby SymbolThemeFontFamily i jego właściwość zawartości na wartość Unicode glyph, którego chcesz użyć.

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

Możesz również jawnie dodać jeden z obiektów elementu ikony wymienionych wcześniej, takich jak SymbolIcon. Zapewnia to więcej typów ikon do wyboru. Umożliwia również łączenie ikon i innych typów zawartości, takich jak tekst, jeśli chcesz.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play"/>
        <TextBlock Text="Play" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

W tym przykładzie pokazano, jak można zdefiniować element FontIconSource w obiekcie ResourceDictionary, a następnie użyć elementu IconSourceElement do ponownego użycia zasobu w różnych miejscach aplikacji.

<!--App.xaml-->
<Application
   ...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <!-- Other app resources here -->

            <FontIconSource x:Key="CertIconSource" Glyph="&#xEB95;"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

<StackPanel Orientation="Horizontal">
    <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
    <TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>

<Button>
    <StackPanel>
        <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
        <TextBlock Text="View certificate" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Właściwości ikony

Często umieszczasz ikony w interfejsie użytkownika, przypisując jeden do właściwości icon innego elementu XAML. Icon właściwości, które zawierają Source w nazwie, przyjmują element IconSource; w przeciwnym razie właściwość przyjmuje element IconElement.

Ta lista zawiera niektóre typowe elementy, które mają właściwość icon.

Pozostałe przykłady na tej stronie pokazują, jak przypisać ikonę do właściwości icon kontrolki.

FontIcon i SymbolIcon

Najczęstszym sposobem dodawania ikon do aplikacji jest użycie ikon systemowych udostępnianych przez czcionki ikon w systemie Windows. System Windows 11 wprowadza nową czcionkę ikony systemu, Segoe Fluent Icon, która udostępnia ponad 1000 ikon zaprojektowanych dla języka Fluent Design. Może nie być intuicyjne uzyskanie ikony z czcionki, ale technologia wyświetlania czcionek w systemie Windows oznacza, że te ikony będą wyglądać ostro i wyraźnie na każdym wyświetlaczu, niezależnie od rozdzielczości i rozmiaru.

Wyliczenie symboli

Wiele typowych glifów z SymbolThemeFontFamily jest zawartych w wyliczeniu symboli . Jeśli potrzebny glyph jest dostępny jako symbol, możesz użyć SymbolIcon w dowolnym miejscu, w którym będzie używana czcionka FontIcon z domyślną rodziną czcionek.

Nazwy symboli służą również do ustawiania właściwości icon w języku XAML przy użyciu składni atrybutów , na przykład

<AppBarButton Icon="Send" Label="Send"/>

Ikony czcionek

Tylko mały podzbiór glifów Segoe Fluent Icon jest dostępny w wyliczeniu Symbol . Aby skorzystać z innego z dostępnych glifów, użyj FontIcon. W tym przykładzie pokazano, jak utworzyć AppBarButton za pomocą ikony SendFill.

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

Jeśli nie określisz FontFamilylub określisz właściwość FontFamily, która nie jest dostępna w systemie w czasie wykonywania, czcionka FontIcon powróci do domyślnej rodziny czcionek zdefiniowanej przez zasób motywu SymbolThemeFontFamily.

Możesz również określić ikonę przy użyciu wartości Glyph z dowolnej dostępnej czcionki. W tym przykładzie pokazano, jak używać symbolu Glyph z czcionki Emoji interfejsu użytkownika Segoe.

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Aby uzyskać więcej informacji i przykładów, zobacz dokumentację klasy FontIcon i SymbolIcon.

AnimowanaIkona

Ruch jest ważną częścią języka Fluent Design. Animowane ikony zwracają uwagę na konkretne punkty wejścia, informują o zmianach stanu oraz dodają radości interakcji.

Za pomocą animowanych ikon można implementować lekkie, wektorowe ikony z ruchem przy użyciu animacji.

Aby uzyskać więcej informacji i przykładów, zobacz Animowane ikony i dokumentację klasy AnimatedIcon.

PathIcon

Możesz użyć PathIcon, aby utworzyć niestandardowe ikony używające kształtów opartych na wektorach, aby zawsze wyglądały ostro. Jednak tworzenie kształtu przy użyciu geometrii XAML jest skomplikowane, ponieważ należy indywidualnie określić każdy punkt i krzywą.

W tym przykładzie przedstawiono dwa różne sposoby definiowania geometrii używanej w pliku PathIcon.

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Circles">
    <AppBarButton.Icon>
        <PathIcon>
            <PathIcon.Data>
                <GeometryGroup>
                    <EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
                    <EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
                    <EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
                </GeometryGroup>      
            </PathIcon.Data>
        </PathIcon>
    </AppBarButton.Icon>
</AppBarButton>

Aby dowiedzieć się więcej na temat używania klas Geometry do tworzenia kształtów niestandardowych, zobacz dokumentację klas i polecenia przesuwania i rysowania dla geometrii. Również zapoznaj się z dokumentacją geometrii WPF . Klasa WinUI Geometry nie ma wszystkich tych samych funkcji co klasa WPF, ale tworzenie kształtów jest takie samo dla obu.

Aby uzyskać więcej informacji i przykładów, zobacz dokumentację klasy PathIcon.

BitmapIcon i ImageIcon

Możesz użyć BitmapIcon lub ImageIcon, aby utworzyć ikonę z pliku obrazu (takiego jak PNG, GIF lub JPEG), chociaż nie zalecamy jej, jeśli jest dostępna inna opcja. Obrazy map bitowych są tworzone o określonym rozmiarze, więc muszą być skalowane w górę lub w dół w zależności od wielkości ikony i rozdzielczości ekranu. Gdy obraz jest skalowany w dół (skurczony), może pojawić się rozmyty. Po powiększeniu może wyglądać kwadratowo i rozpikselowanie.

Ikona bitmapowa

Domyślnie BitmapIcon usuwa wszystkie informacje o kolorze z obrazu i wyświetla wszystkie nieprzezroczyste piksele w kolorze pierwszego planu. Aby utworzyć ikonę monochromatyczną, użyj obrazu solidnego na przezroczystym tle w formacie PNG. Inne formaty obrazów najwyraźniej będą ładowane bez błędu, ale powodują jednolity blok koloru na pierwszym planie.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.png"/>
    </AppBarButton.Icon>
</AppBarButton>

Domyślne zachowanie można zastąpić, ustawiając właściwość ShowAsMonochrome na false. W takim przypadku bitmapicon zachowuje się tak samo jak ImageIcon dla obsługiwanych typów plików mapy bitowej (pliki SVG nie są obsługiwane).

<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg" 
            ShowAsMonochrome="False"/>

Aby uzyskać więcej informacji i przykładów, zobacz dokumentację klasy BitmapIcon.

IkonaObrazu

ImageIcon przedstawia obraz dostarczony przez jedną z klas pochodnych ImageSource. Najczęstszym rozwiązaniem jest BitmapSource, ale jak wspomniano wcześniej, nie zalecamy obrazów map bitowych dla ikon ze względu na potencjalne problemy ze skalowaniem.

Skalowalne zasoby grafiki wektorowej (SVG) są idealne dla ikon, ponieważ zawsze wyglądają ostro w dowolnym rozmiarze lub rozdzielczości. Można użyć SVGImageSource z komponentem ImageIcon, który obsługuje bezpieczny tryb statyczny zgodny z specyfikacją SVG, ale nie obsługuje animacji ani interakcji. Aby uzyskać więcej informacji, zobacz SVGImageSource i obsługa SVG.

ObrazIcon ignoruje właściwość Pierwszego planu, więc zawsze wyświetla obraz w oryginalnym kolorze. Ponieważ kolor pierwszego planu jest ignorowany, ikona nie reaguje na zmiany stanu wizualizacji, gdy jest używany w przycisku lub innej podobnej kontrolce.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

Aby uzyskać więcej informacji i przykładów, zobacz dokumentację klasy ImageIcon.

Powiązane artykuły

• ikona w systemie Windows
• Ikony aplikacji
• AnimatedIcon
• Pasek poleceń