Ikony v aplikacích pro Windows

Ikony poskytují vizuální zkratku pro akci, koncept nebo produkt. Díky komprimaci významu do symbolického obrázku můžou ikony překračovat jazykové bariéry a pomáhají šetřit cenné prostředky: místo na obrazovce. Dobré ikony harmonizují s typografií a se zbytkem návrhového jazyka. Nemíchají metafory a sdělují pouze to, co je nezbytné, co nejrychleji a nejsnadněji.

Ikony se můžou zobrazovat v aplikacích i mimo ně. V aplikaci můžete pomocí ikon znázornit akci, třeba zkopírovat text nebo přejít na stránku nastavení.

Tento článek popisuje ikony v uživatelském rozhraní aplikace. Další informace o ikonách, které představují vaši aplikaci ve Windows (ikony aplikací), najdete v tématu ikony aplikací.

Zjistit, kdy používat ikony

Ikony můžou ušetřit místo, ale kdy byste je měli použít?

Pomocí ikony můžete použít akce, jako jsou vyjmutí, kopírování, vložení a uložení nebo položky v navigační nabídce. Ikonu použijte, pokud je pro uživatele snadné pochopit, co ikona znamená, a je to dost jednoduché, aby bylo jasné v malých velikostech.

Nepoužívejte ikonu, pokud její význam není jasný, nebo pokud jeho objasnění vyžaduje složitý tvar.

Použití správného typu ikony

Ikonu můžete vytvořit mnoha způsoby. Můžete použít písmo symbolu, jako je písmo Segoe Fluent Icons. Můžete vytvořit vlastní vektorový obrázek. Můžete dokonce použít rastrový obrázek, i když ho nedoporučujeme. Tady je souhrn způsobů, jak do aplikace přidat ikonu.

Pokud chcete do aplikace XAML přidat ikonu, použijte buď IconElement nebo IconSource.

Tato tabulka ukazuje různé druhy ikon odvozených z IconElement a IconSource.

IconElement	IconSource	Description
AnimovanáIkona	AnimatedIconSource	Představuje ikonu, která zobrazuje a řídí vizuál, který může animovat v reakci na interakci uživatele a změny stavu vizuálu.
BitmapIcon	BitmapIconSource	Představuje ikonu, která jako obsah používá rastrový obrázek.
FontIcon	FontIconSource	Představuje ikonu, která používá glyf ze zadaného písma.
IconSourceElement	N/A	Představuje ikonu, která jako obsah používá IconSource.
imageIcon	ImageIconSource	Představuje ikonu, která jako obsah používá obrázek.
PathIkona	PathIconSource	Představuje ikonu, která jako obsah používá vektorovou cestu.
SymbolIkona	SymbolIconSource	Představuje ikonu, která jako obsah používá glyf z prostředku SymbolThemeFontFamily.

IconElement vs. IconSource

IconElement je FrameworkElement, takže ho můžete přidat do stromu objektů XAML stejně jako jakýkoli jiný prvek uživatelského rozhraní vaší aplikace. Nedá se ale přidat do ResourceDictionary a znovu ho použít jako sdílený prostředek.

IconSource se podobá IconElement; Protože to ale není FrameworkElement, nedá se použít jako samostatný prvek v uživatelském rozhraní, ale může být sdílen jako prostředek. IconSourceElement je speciální prvek ikony, který obaluje IconSource, a můžete jej použít kdekoli, kde je potřeba IconElement. Příklad těchto funkcí je uvedený v další části.

Příklady IconElement

Jako samostatnou komponentu uživatelského rozhraní můžete použít IconElement-odvozenou třídu.

Tento příklad ukazuje, jak nastavit glyf ikony jako obsah tlačítka. Nastavte FontFamily tlačítka na SymbolThemeFontFamily a jeho vlastnost Content na Unicode hodnotu glyphu, který chcete použít.

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

Můžete také explicitně přidat jeden z objektů prvku ikony uvedených dříve, například SymbolIcon. Získáte tak více typů ikon, ze které si můžete vybrat. Umožňuje také kombinovat ikony a další typy obsahu, například text, pokud chcete.

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

Tento příklad ukazuje, jak můžete definovat FontIconSource ve slovníku prostředků a pak použít IconSourceElement k opětovnému použití prostředku na různých místech aplikace.

<!--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>

Otevření aplikace Galerie WinUI 3 a zobrazení IconElement v akci

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Vlastnosti ikony

Ikony často umístíte v uživatelském rozhraní tak, že je přiřadíte k vlastnosti icon jiného elementu XAML. Icon vlastnosti, které zahrnují Source v názvu, používají IconSource. Jinak vlastnost používá IconElement.

Tento seznam ukazuje některé běžné prvky, které mají vlastnost icon.

Příkazy/akce	Navigace	Stav/Jiné
AppBarButton.IconAppBarToggleButton.IconAutoSuggestBox.QueryIconMenuFlyoutItem.IconMenuFlyoutSubItem.IconSwipeItem.IconSourceXamlUICommand.IconSource	NavigationViewItem.IconSelectorBarItem.IconTabViewItem.IconSource	AnimatedIcon.FallbackIconSourceAnimatedIconSource.FallbackIconSourceIconSourceElement.IconSourceInfoBadge.IconSourceInfoBar.IconSourceTeachingTip.IconSource

Návod

Tyto ovládací prvky můžete zobrazit v aplikaci Galerie WinUI 3, abyste viděli příklady, jak se s nimi ikony používají.

Zbývající příklady na této stránce ukazují, jak přiřadit ikonu icon vlastnosti ovládacího prvku.

FontIcon a SymbolIcon

Nejběžnější způsob, jak do aplikace přidat ikony, je použít systémové ikony poskytované písmy ikon ve Windows. Windows 11 představuje nové písmo ikon systému, Segoe Fluent Icons, která poskytuje více než 1 000 ikon navržených pro jazyk Fluent Design. Nemusí být intuitivní získat ikonu z písma, ale technologie zobrazení písma Systému Windows znamená, že tyto ikony budou na libovolném displeji, v jakémkoli rozlišení a v libovolné velikosti vypadat ostře.

Důležité

Výchozí rodina písem

Místo přímého zadání FontFamily používají FontIcon a SymbolIcon fontovou rodinu definovanou prostředkem motivu SymbolThemeFontFamily XAML. Ve výchozím nastavení tento prostředek používá rodinu písem Segoe Fluent Icon. Pokud je vaše aplikace spuštěná ve Windows 10 verze 20H2 nebo starší, není rodina písem Segoe Fluent Icon dostupná a prostředek SymbolThemeFontFamily se vrátí k rodině písem Segoe MDL2 Assets.

Výčet symbolů

Mnoho běžných glyfů z SymbolThemeFontFamily je zahrnuto ve výčtu symbolů . Pokud je požadovaný glyf dostupný jako symbol, můžete použít SymbolIcon kdekoli, kde byste použili FontIcon s výchozí rodinou písem.

Názvy symbolů můžete také použít k nastavení icon vlastnosti v XAML pomocí syntaxe atributů, takto:

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

Návod

Názvy symbolů lze použít pouze k nastavení vlastnosti icon pomocí zkrácené syntaxe atributu . Všechny ostatní typy ikon musí být nastaveny pomocí delší syntaxe elementu vlastnosti, jak je znázorněno v jiných příkladech na této stránce.

Ikony písem

V Symbol výčtu jsou k dispozici pouze malá podmnožina glyfů Segoe Fluent Icon. Pokud chcete použít některý z ostatních dostupných glyfů, použijte FontIcon. Tento příklad ukazuje, jak vytvořit AppBarButton s ikonou SendFill.

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

Pokud nezadáte fontFamilynebo zadáte FontFamily, která není v systému za běhu dostupná, FontIcon se vrátí do výchozí řady písem definované prostředkem motivu SymbolThemeFontFamily.

Ikonu můžete také zadat pomocí hodnoty Glyph z libovolného dostupného písma. Tento příklad ukazuje, jak použít Glyph z písma Segoe UI Emoji.

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

Další informace a příklady najdete v dokumentaci ke třídám FontIcon a SymbolIcon.

Návod

Stránka Iconography v aplikaci Galerie WinUI 3 slouží k zobrazení, vyhledávání a kopírování kódu pro všechny ikony dostupné v ikony Segoe Fluent.

Otevření aplikace Galerie WinUI 3 na stránce Ikonaografie

Animovaná ikona

Pohyb je důležitou součástí jazyka Fluent Design. Animované ikony upoutají pozornost na konkrétní vstupní body, poskytují zpětnou vazbu ze stavu do stavu a přidávají radost k interakci.

Animované ikony můžete použít k implementaci jednoduchých vektorových ikon s pohybem pomocí Lottie animací.

Další informace a příklady najdete v tématu Animované ikony a dokumentaci třídy AnimatedIcon.

Otevření aplikace Galerie WinUI 3 a zobrazení animovaného Iconu v akci

Ikona cesty

Pomocí PathIcon můžete vytvořit vlastní ikony, které používají vektorové obrazce, takže budou vždy vypadat ostře. Vytvoření obrazce pomocí geometrie XAML je ale složité, protože je nutné určit jednotlivé body a křivky.

Tento příklad ukazuje dva různé způsoby definování geometrie použité v 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>

Další informace o použití tříd geometrie k vytváření vlastních obrazců najdete v dokumentaci ke třídám a Příkazy pro pohyb a kreslení geometrií. Podívejte se také na dokumentaci WPF Geometry. Třída geometrie WinUI nemá všechny stejné funkce jako třída WPF, ale vytváření obrazců je pro oba stejné.

Další informace a příklady najdete v dokumentaci ke třídě PathIcon.

BitmapIcon a ImageIcon

Pomocí BitmapIcon nebo ImageIcon vytvořit ikonu ze souboru obrázku (například PNG, GIF nebo JPEG), i když ji nedoporučujeme, pokud je dostupná jiná možnost. Rastrové obrázky se vytvářejí v určité velikosti, takže je potřeba je vertikálně navýšit nebo snížit podle toho, jak velká má být ikona a rozlišení obrazovky. Když se obrázek zmenší (zmenšen), může se zobrazit rozmazaně. Při zvětšení se může zobrazit hranatý a rozpixelovaný.

BitmapIcon

Ve výchozím nastavení BitmapIcon zbavuje obrázek všech barevných informací a vykresluje všechny neprůhledné pixely v barvě popředí. Pokud chcete vytvořit monochromatické ikony, použijte plný obrázek na průhledné pozadí ve formátu PNG. Jiné formáty obrázků se zřejmě načtou bez chyby, ale výsledkem bude plný blok barvy popředí.

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

Výchozí chování můžete přepsat nastavením vlastnosti ShowAsMonochrome na false. V tomto případě se BitmapIcon chová stejně jako ImageIcon pro podporované typy rastrových souborů (soubory SVG se nepodporují).

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

Další informace a příklady najdete v dokumentaci ke třídě BitmapIcon.

Návod

Použití BitmapIcon je podobné použití BitmapImage; Viz BitmapImage třídy další informace, které se vztahují na BitmapIcon, jako je nastavení UriSource vlastnost v kódu.

Obrazová ikona

ImageIcon zobrazuje obrázek poskytovaný jednou z tříd odvozených od ImageSource. Nejběžnější je BitmapSource, ale jak už jsme zmínili dříve, nedoporučujeme rastrové obrázky pro ikony kvůli potenciálním problémům se škálováním.

Prostředky SVG (Scalable Vector Graphics) jsou ideální pro ikony, protože vždy vypadají ostře na libovolnou velikost nebo rozlišení. Můžete použít SVGImageSource s ImageIcon, který podporuje zabezpečený statický režim ze specifikace SVG, ale nepodporuje animace nebo interakce. Další informace viz SVGImageSource a podpora SVG.

ImageIcon ignoruje vlastnost popředí, takže vždy zobrazuje obrázek v původní barvě. Vzhledem k tomu, že barva popředí je ignorována, ikona nereaguje na změny stavu vizuálu při použití tlačítka nebo jiného podobného ovládacího prvku.

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

Další informace a příklady najdete v dokumentaci ke třídě ImageIcon.

Návod

Použití ImageIcon je podobné ovládacímu prvku Image; Další informace, které platí pro ImageIcon, najdete v třídě Image. Jedním z znaménných rozdílů je, že se u ImageIconu používá pouze první snímek s více snímky (jako animovaný gif). Pokud chcete používat animované ikony, podívejte se na AnimatedIcon.

Související články

• Ikonografie v systému Windows
• ikony aplikací
• AnimovanáIkona
• Panel příkazů