Ikonok Windows alkalmazásokban

Az ikonok vizuális rövidítést biztosítanak egy művelethez, koncepcióhoz vagy termékhez. A jelentés szimbolikus képbe való tömörítésével az ikonok átléphetik a nyelvi korlátokat, és segítenek megőrizni egy értékes erőforrást: a képernyőteret. A jó ikonok harmonizálnak a tipográfiával és a többi tervezési nyelvvel. Nem keverik a metaforákat, és csak azt kommunikálják, amire szükség van, a lehető leggyorsabban és egyszerűen.

Az ikonok az alkalmazásokban és azon kívül is megjelenhetnek. Az alkalmazásban ikonokkal jelölhet egy műveletet, például szöveget másolhat vagy a beállítások lapjára léphet.

Ez a cikk az alkalmazás felhasználói felületén belüli ikonokat ismerteti. Az alkalmazást Windows (alkalmazásikonok) ábrázoló ikonokról a App-ikonok című témakörben olvashat.

Az ikonok használatának ismerete

Az ikonok helyet takaríthatnak meg, de mikor érdemes használni őket?

Használjon ikont műveletekhez, például kivágáshoz, másoláshoz, beillesztéshez és mentéshez, illetve navigációs menü elemeihez. Használjon ikont, ha a felhasználó könnyen megértheti, hogy mit jelent az ikon, és elég egyszerű ahhoz, hogy kis méretekben egyértelmű legyen.

Ne használjon ikont, ha a jelentése nem egyértelmű, vagy ha egyértelművé tétele összetett alakzatot igényel.

A megfelelő ikontípus használata

Az ikonok számos módon hozhatók létre. Használhat szimbólum betűtípust, például a Segoe Fluent Icons betűtípust. Létrehozhat saját vektoralapú képet. Bitképet is használhat, bár nem javasoljuk. Az alábbiakban összefoglaljuk, hogyan adhat hozzá ikont az alkalmazáshoz.

Ha ikont szeretne hozzáadni az XAML-alkalmazáshoz, használhat egy IconElement vagy egy IconSource.

Ez a táblázat az IconElement és az IconSource különböző ikontípusait mutatja be.

IconElement	IconSource	Description
AnimatedIcon	AnimatedIconSource	Olyan ikont jelöl, amely megjelenít és vezérel egy olyan vizualizációt, amely képes animálni a felhasználói interakcióra és a vizualizáció állapotának változásaira reagálva.
BitmapIcon	BitmapIconSource	Egy bitképet használó ikont jelöl tartalomként.
FontIcon	FontIconSource	Egy ikont jelöl, amely a megadott betűtípusból származó karakterjelet használ.
IconSourceElement	N/A	Ikont jelöl, amely az IconSource-t használja tartalomként.
ImageIcon (KépIkon)	ImageIconSource	Egy képet tartalomként használó ikont jelöl.
PathIcon	PathIconSource	Olyan ikont jelöl, amely egy vektor elérési útját használja tartalomként.
SymbolIcon	SymbolIconSource	Olyan ikont jelöl, amely az SymbolThemeFontFamily erőforrásból származó karakterjelet használja tartalomként.

IconElement és IconSource

IconElement egy FrameworkElement, így az alkalmazás felhasználói felületének bármely más eleméhez hasonlóan hozzáadható az XAML objektumfához. Azonban nem adható hozzá a ResourceDictionary-hez, és nem használható újra megosztott erőforrásként.

IconSource hasonló az IconElementhez; mivel azonban nem FrameworkElement, nem használható önálló elemként a felhasználói felületen, de erőforrásként megosztható. IconSourceElement egy speciális ikonelem, amely körbefuttat egy IconSource-t, így bárhol használhatja, ahol szüksége van egy IconElementre. Ezekre a funkciókra a következő szakaszban mutatunk be példát.

IconElement példák

A IconElement-származtatott osztályt önálló felhasználói felületi összetevőként használhatja.

Ez a példa bemutatja, hogyan állíthat be ikonjelet egy gomb tartalmaként. Állítsa be a gomb FontFamilySymbolThemeFontFamily és tartalomtulajdonságát a használni kívánt karakterjel Unicode-értékére.

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

Explicit módon is hozzáadhatja a korábban felsorolt ikonelem-objektumok egyikét, például a SymbolIcont. Így több ikontípus közül választhat. Lehetővé teszi az ikonok és más tartalomtípusok, például a szöveg kombinálását is, ha szeretné.

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

Ez a példa bemutatja, hogyan definiálhat egy FontIconSource-t egy ResourceDictionary-ban, majd egy IconSourceElement használatával újra felhasználhatja az erőforrást az alkalmazás különböző helyeiben.

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

Nyissa meg a WinUI 3 Katalógus alkalmazást az IconElement működés közbeni megtekintéséhez

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.

Ikon tulajdonságai

Gyakran helyez el ikonokat a felhasználói felületen egy másik XAML-elem icon tulajdonságához rendelve. Icon nevű tulajdonságok, amelyek tartalmazzák a Source-et, IconSource-t vesznek fel; ellenkező esetben az ilyen tulajdonságok egy IconElement-et vesznek fel.

Ez a lista néhány olyan gyakori elemet mutat be, amelyek icon tulajdonságot tartalmaznak.

Parancsok / műveletek	Navigáció	Állapot/Egyéb
AppBarButton.IconAppBarToggleButton.IconAutoSuggestBox.QueryIconMenuFlyoutItem.IconMenuFlyoutSubItem.IconSwipeItem.IconSourceXamlUICommand.IconSource	NavigationViewItem.IconSelectorBarItem.IconTabViewItem.IconSource	AnimatedIcon.FallbackIconSourceAnimatedIconSource.FallbackIconSourceIconSourceElement.IconSourceInfoBadge.IconSourceInfoBar.IconSourceTeachingTip.IconSource

Jótanács

Ezeket a vezérlőket a WinUI 3 Katalógus alkalmazásban tekintheti meg, hogy példákat találjon az ikonok használatára.

A lap további példái azt mutatják be, hogyan rendelhet ikont egy vezérlő icon tulajdonságához.

FontIcon és SymbolIcon

Az ikonok alkalmazáshoz való hozzáadásának leggyakoribb módja a Windows ikonok betűtípusai által biztosított rendszerikonok használata. Windows 11 bevezet egy új rendszerikon betűtípust, Segoe Fluent Icons, amely több mint 1000 ikont biztosít a Fluent Design nyelvhez. Lehet, hogy nem intuitív egy ikont kapni egy betűtípusból, de Windows betűtípus megjelenítési technológiája azt jelenti, hogy ezek az ikonok élesen és élesen fognak kinézni bármilyen kijelzőn, bármilyen felbontásban és bármilyen méretben.

Fontos

Alapértelmezett betűtípuscsalád

Ahelyett, hogy közvetlenül FontFamily adna meg, a FontIcon és a SymbolIcon a SymbolThemeFontFamily XAML-témaerőforrás által definiált betűtípuscsaládot használja. Ez az erőforrás alapértelmezés szerint a Segoe Fluent Icon betűtípuscsaládot használja. Ha az alkalmazás a 20H2-es vagy korábbi verziójú Windows 10 fut, a Segoe Fluent Icon betűtípuscsalád nem érhető el, és a SymbolThemeFontFamily erőforrás visszakerül a Segoe MDL2 Assets betűtípuscsaládra.

Szimbólumok számbavétele

A SymbolThemeFontFamily számos gyakori karakterjele szerepel a szimbólum felsorolásában. Ha a szükséges karakter elérhető mint szimbólum, használhatja a SymbolIcon bárhol, ahol az alapértelmezett betűtípuscsaládot használná.

Szimbólumnevek használatával is beállíthat egy icon tulajdonságot az XAML-ben attribútumszintaxishasználatával, például ez

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

Jótanács

Csak szimbólumnevek használatával állíthat be icon tulajdonságot a rövidített attribútumszintaxishasználatával. Az összes többi ikontípust a hosszabb tulajdonságelemszintaxissal kell beállítani, ahogyan az ezen a lapon látható más példákban is látható.

Betűtípus ikonok

A Szimbólum enumerálásban csak a Segoe Fluent ikonjelek egy kis része érhető el. A többi elérhető karakterjel használatához használjon egy FontIcon. Ez a példa bemutatja, hogyan hozhat létre AppBarButton a SendFill ikonnal.

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

Ha nem ad meg FontFamily, vagy olyan FontFamilyt ad meg, amely futásidőben nem érhető el a rendszeren, a FontIcon visszaesik a SymbolThemeFontFamily témaerőforrás által definiált alapértelmezett betűtípuscsaládra.

Bármely elérhető betűtípusból megadhat egy ikont egy Glyph-érték használatával. Ez a példa bemutatja, hogyan használható glyph a Segoe UI Emoji betűtípusból.

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

További információkért és példákért tekintse meg a FontIcon és SymbolIcon osztály dokumentációját.

Jótanács

A WinUI 3 Katalógus alkalmazás Ikonográfia lapján megtekintheti, keresheti és másolhatja a Segoe Fluent-ikonokban elérhető összes ikon kódját.

A WinUI 3 Katalógus alkalmazás megnyitása az Ikonográfia lapra

AnimatedIcon

A mozgás a Fluent Design nyelv fontos része. Az animált ikonok felhívják a figyelmet bizonyos belépési pontokra, állapotról állapotra vonatkozó visszajelzést adnak, és örömet adnak az interakcióknak.

Animált ikonokkal egyszerű, vektoralapú ikonokat valósíthat meg mozgással Lottie animációk használatával.

További információ és példák: Animált ikonok és az AnimatedIcon osztály dokumentációja.

Nyissa meg a WinUI 3 Katalógus alkalmazást az AnimatedIcon működés közbeni megtekintéséhez

PathIcon

A PathIcon használatával vektoralapú alakzatokat használó egyéni ikonokat hozhat létre, így mindig élesen jelennek meg. Az alakzatok XAML-Geometria használatával történő létrehozása azonban bonyolult, mert minden pontot és görbét külön kell megadnia.

Ez a példa két különböző módszert mutat be a PathIconban használt geometria meghatározására.

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

Az Geometria osztályok egyéni alakzatok létrehozására való használatáról bővebben az osztály dokumentációjában olvashat, valamint a geometriákhoz tartozó Mozgatás és rajzolás parancsok részletes leírásában. Lásd a WPF Geometria dokumentációját. A WinUI Geometry osztály nem rendelkezik ugyanazokkal a funkciókkal, mint a WPF osztály, de az alakzatok létrehozása mindkettőhöz ugyanaz.

További információkért és példákért tekintse meg a PathIcon osztály dokumentációját.

BitmapIcon és ImageIcon

Egy BitmapIcon vagy ImageIcon használatával létrehozhat egy ikont egy képfájlból (például PNG, GIF vagy JPEG), bár nem javasoljuk, hogy egy másik lehetőség is elérhető legyen. A bitképképek egy adott méretben jönnek létre, ezért az ikon méretétől és a képernyő felbontásától függően fel- vagy le kell skálázni őket. Ha a kép le van skálázva (zsugorodott), elmosódottnak tűnhet. Ha nagyítva van, blokkos és pixeles lehet.

BitmapIcon

Alapértelmezés szerint egy BitmapIcon az összes színinformációt eltávolítja a képből, és megjeleníti az előtérben színben lévő összes nem átlátszó képpontot. Monokróm ikon létrehozásához használjon egy egyszínű képet egy átlátszó háttéren PNG formátumban. Más képformátumok látszólag hiba nélkül töltődnek be, de az előtérszín egyszínű blokkját eredményezik.

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

Az alapértelmezett viselkedés felülbírálható úgy, hogy a ShowAsMonochrome tulajdonságot falseértékre állítja. Ebben az esetben a BitmapIcon ugyanúgy viselkedik, mint az ImageIcon a támogatott bitképfájl-típusok esetében (az SVG-fájlok nem támogatottak).

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

További információkért és példákért lásd a BitmapIcon osztály dokumentációját.

Jótanács

A BitmapIcon használata hasonló a BitmapImage használatához; A BitmapIconra vonatkozó további információkért tekintse meg a BitmapImage osztályt, például az UriSource tulajdonság kódban való beállítását.

ImageIcon (KépIkon)

A ImageIcon az egyik ImageSource-származtatott osztály által biztosított képet jeleníti meg. A leggyakoribb az BitmapSource, de ahogy korábban említettük, a bitképképeket nem javasoljuk az ikonokhoz a lehetséges méretezési problémák miatt.

A méretezhető vektorgrafika (SVG) erőforrások ideálisak az ikonokhoz, mert mindig élesen néznek ki bármilyen méretben vagy felbontásban. Használhat egy SVGImageSource ImageIkonnal, amely támogatja az SVG-specifikációból származó biztonságos statikus mód használatát, de nem támogatja az animációkat vagy az interakciókat. További információért lásd: SVGImageSource és SVG támogatás.

Az ImageIcon figyelmen kívül hagyja az Előtér tulajdonságot, így mindig az eredeti színében jeleníti meg a képet. Mivel az előtérszín figyelmen kívül van hagyva, az ikon nem reagál a vizuális állapot változásaira, ha gombban vagy más hasonló vezérlőelemben használják.

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

További információkért és példákért tekintse meg az ImageIcon osztály dokumentációját.

Jótanács

Az ImageIcon használata hasonló a Kép vezérlőelemhez; Az ImageIconra vonatkozó további információkért tekintse meg a Kép osztályt. Az egyik lényeges különbség az, hogy az ImageIcon esetében csak a több képből álló kép első képkockáját (például egy animált GIF-et) használja a rendszer. Animált ikonok használatához lásd: AnimatedIcon.

Kapcsolódó cikkek

• Ikonográfia Windows
• alkalmazásikonok
• AnimatedIcon
• Parancssáv