Windows uygulamalarındaki simgeler

Simgeler eylem, kavram veya ürün için görsel bir kısaltma sağlar. Simgeler, anlamı sembolik bir görüntüye sıkıştırarak dil engellerini aşabilir ve değerli bir kaynağın korunmasına yardımcı olabilir: ekran alanı. İyi simgeler, tipografi ve tasarım dilinin geri kalanıyla uyumludur. Metaforları karıştırmaz ve yalnızca gerekli olanları mümkün olduğunca hızlı ve basit bir şekilde iletişim kurarlar.

Simgeler uygulamaların içinde ve dışında görünebilir. Uygulamanızın içinde, metin kopyalama veya ayarlar sayfasına gitme gibi bir eylemi temsil eden simgeler kullanırsınız.

Bu makalede uygulama kullanıcı arabiriminizdeki simgeler açıklanmaktadır. Windows'ta uygulamanızı temsil eden simgeler (uygulama simgeleri) hakkında bilgi edinmek için bkz. uygulama simgeleri.

Simgelerin ne zaman kullanılacağını öğrenme

Simgeler alandan tasarruf edebilir, ancak bunları ne zaman kullanmalısınız?

Kes, kopyala, yapıştır ve kaydet gibi eylemler veya gezinti menüsündeki öğeler için bir simge kullanın. Kullanıcının simgenin ne anlama geldiğini anlaması kolaysa ve küçük boyutlarda net olacak kadar basitse bir simge kullanın.

Anlamı net değilse veya açık hale getirmek karmaşık bir şekil gerektiriyorsa simge kullanmayın.

Doğru simge türünü kullanın

Simge oluşturmanın birçok yolu vardır. Segoe Fluent Iconsyazı tipi gibi bir simge yazı tipi kullanabilirsiniz. Kendi vektör tabanlı görüntünüzü oluşturabilirsiniz. Bit eşlem görüntüsü bile kullanabilirsiniz, ancak bunu önermeyiz. Burada, uygulamanıza simge ekleme yöntemlerinin özeti yer alır.

XAML uygulamanıza simge eklemek için IconElement veya IconSourcekullanırsınız.

Bu tabloda IconElement ve IconSource'tan türetilen farklı simge türleri gösterilmektedir.

IconElement	IconSource	Açıklama
AnimatedIcon	AnimatedIconSource	Kullanıcı etkileşimi ve görsel durum değişikliklerine yanıt olarak hareketlendirebilen bir görseli görüntüleyen ve denetleyen bir simgeyi temsil eder.
BitmapIcon	BitmapIconSource	İçeriği bitmap olan bir simgeyi temsil eder.
FontIcon	FontIconSource	Belirtilen yazı tipinden bir karakter kullanan bir simgeyi temsil eder.
IconSourceElement	Geçerli Değil	İçeriği olarak IconSource kullanan bir simgeyi temsil eder.
ImageIcon	ImageIconSource	İçeriği olarak görüntü kullanan bir simgeyi temsil eder.
PathIcon	PathIconSource	İçeriği olarak vektör yolu kullanan bir simgeyi temsil eder.
SymbolIcon	SymbolIconSource	İçeriği olarak SymbolThemeFontFamily kaynağından bir karakter kullanan bir simgeyi temsil eder.

IconElement ve IconSource karşılaştırması

IconElement bir FrameworkElementolduğundan, uygulamanızın kullanıcı arabirimindeki diğer öğeler gibi XAML nesne ağacına eklenebilir. Ancak, ResourceDictionary eklenemez ve paylaşılan kaynak olarak yeniden kullanılamaz.

IconSource, IconElement'e benzer; ancak FrameworkElementolmadığından kullanıcı arabiriminizde tek başına öğe olarak kullanılamaz, ancak kaynak olarak paylaşılabilir. IconSourceElement, iconElement'e ihtiyacınız olan her yerde kullanabilmeniz için IconSource'un sarmalayan özel bir simge öğesidir. Bu özelliklere bir örnek sonraki bölümde gösterilmiştir.

IconElement örnekleri

Tek başına ui bileşeni olarak IconElementtüretilmiş bir sınıf kullanabilirsiniz.

Bu örnekte, düğmenin içeriği olarak simge karakteri ayarlama gösterilmektedir. Düğmenin FontFamilySymbolThemeFontFamily ve içerik özelliğini de kullanmak istediğiniz karakterin Unicode değerine ayarlayın.

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

Ayrıca symbolIcon gibi daha önce listelenen simge öğesi nesnelerinden birini de açıkça ekleyebilirsiniz. Bu, aralarından seçim yapabileceğiniz daha fazla simge türü sağlar. Ayrıca isterseniz simgeleri ve metin gibi diğer içerik türlerini birleştirmenizi sağlar.

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

Bu örnekte, ResourceDictionary içinde FontIconSource tanımlama ve ardından iconSourceElement kullanarak kaynağı uygulamanızın farklı yerlerinde yeniden kullanma gösterilmektedir.

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

IconElement'i uygulamada görmek için WinUI 3 Galeri uygulamasını açın

WinUI 3 Galerisi uygulaması çoğu WinUI 3 denetimine, özelliğine ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan edinin veya kaynak kodunu GitHub üzerinden alın.

Simge özellikleri

Bir simgeyi başka bir XAML öğesinin icon özelliğine atayarak genellikle kullanıcı arabiriminize simgeler yerleştirirsiniz. Adında Source geçen Icon özellikleri bir IconSource alır; aksi halde, özellik bir IconElement alır.

Bu liste, icon özelliği olan bazı yaygın öğeleri gösterir.

Komutlar/Eylemler	Navigasyon	Durum/Diğer
AppBarButton.IconAppBarToggleButton.IconAutoSuggestBox.QueryIconMenuFlyoutItem.IconMenuFlyoutSubItem.IconSwipeItem.IconSourceXamlUICommand.IconSource	NavigationViewItem.IconSelectorBarItem.IconTabViewItem.IconSource	AnimatedIcon.FallbackIconSourceAnimatedIconSource.FallbackIconSourceIconSourceElement.IconSourceInfoBadge.IconSourceInfoBar.IconSourceTeachingTip.IconSource

Bahşiş

Simgelerin nasıl kullanıldığına ilişkin örnekleri görmek için bu denetimleri WinUI 3 Galeri uygulamasında görüntüleyebilirsiniz.

Bu sayfadaki diğer örneklerde, bir denetimin icon özelliğine nasıl simge atanacak gösterilmektedir.

FontIcon ve SymbolIcon

Uygulamanıza simge eklemenin en yaygın yolu, Windows'da simge yazı tipleri tarafından sağlanan sistem simgelerini kullanmaktır. Windows 11, Fluent Design dili için tasarlanmış 1.000'den fazla simge sağlayan Segoe Fluent Icons yeni bir sistem simgesi yazı tipi sunar. Bir yazı tipinden simge almak sezgisel olmayabilir, ancak Windows yazı tipi görüntüleme teknolojisi, bu simgelerin herhangi bir ekranda, herhangi bir çözünürlükte ve her boyutta net ve keskin görüneceği anlamına gelir.

Önemli

varsayılan yazı tipi ailesi

Doğrudan bir FontFamily belirtmek yerine FontIcon ve SymbolIcon, SymbolThemeFontFamily XAML tema kaynağı tarafından tanımlanan yazı tipi ailesini kullanır. Varsayılan olarak, bu kaynak Segoe Fluent Icon yazı tipi ailesini kullanır. Uygulamanız Windows 10, sürüm 20H2 veya önceki bir sürümde çalıştırılıyorsa, Segoe Fluent Icon yazı tipi ailesi kullanılamaz ve SymbolThemeFontFamily kaynağı bunun yerine Segoe MDL2 Varlıkları yazı tipi ailesine geri döner.

Simge numaralandırması

SymbolThemeFontFamily birçok yaygın karakter Symbol numaralandırmasında yer alır. İhtiyacınız olan karakter Simge olarak kullanılabiliyorsa, varsayılan yazı tipi ailesi ile FontIcon kullanmak istediğiniz her yerde SymbolIcon kullanabilirsiniz.

Ayrıca XAML'de icon özelliğini ayarlamak için simge adlarını, gibiöznitelik söz dizimini kullanarak da kullanırsınız.

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

Bahşiş

icon özelliğini ayarlamak için yalnızca kısaltılmışöznitelik söz dizimini kullanarak Simge adlarını kullanabilirsiniz. Diğer tüm simge türleri, bu sayfadaki diğer örneklerde gösterildiği gibi daha uzunözellik öğesi söz dizimi kullanılarak ayarlanmalıdır.

Yazı tipi simgeleri

Sembol numaralandırmasında Segoe Fluent Icon gliflerinin yalnızca küçük bir alt kümesi kullanılabilir. Kullanılabilir diğer karakterlerden herhangi birini kullanmak için FontIconkullanın. Bu örnekte, SendFill simgesiyle bir AppBarButton nasıl oluşturulacağı gösterilmektedir.

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

işaret eden bir ok kafasıyla doldurulmuş bir düğme

FontFamilybelirtmezseniz veya çalışma zamanında sistemde kullanılamayan bir FontFamily belirtirseniz, FontIcon SymbolThemeFontFamily tema kaynağı tarafından tanımlanan varsayılan yazı tipi ailesine geri döner.

Bir simgeyi de herhangi bir kullanılabilir yazı tipinden bir Glif değeri kullanarak belirtebilirsiniz. Bu örnekte Segoe UI Emoji yazı tipinden bir Karakterin nasıl kullanılacağı gösterilmektedir.

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

Daha fazla bilgi ve örnek için FontIcon ve SymbolIcon sınıfı belgelerine bakın.

Bahşiş

Segoe Fluent Icons'ta bulunan tüm simgeleri görüntülemek, aramak ve kopyalamak için WinUI 3 Galeri uygulamasındaki Simgeografi sayfasını kullanın.

WinUI 3 Galeri uygulamasını simgeografi sayfasına açın

Animasyonlu Simge

Hareket, Fluent Design dilinin önemli bir parçasıdır. Animasyonlu simgeler, belirli giriş noktalarına dikkat çeker, durumdan eyalete geri bildirim sağlar ve etkileşime keyif katar.

Lottie animasyonlarını kullanarak hareketle hafif, vektör tabanlı simgeler uygulamak için animasyonlu simgeler kullanabilirsiniz.

Daha fazla bilgi ve örnek için Animasyonlu simgeler ve AnimatedIcon sınıfı belgelerine bakın.

AnimatedIcon'un çalıştığını görmek için WinUI 3 Galeri uygulamasını açın

Yolİkonu

Vektör tabanlı şekiller kullanan özel simgeler oluşturmak için PathIcon kullanabilirsiniz; bu şekilde, simgeler her zaman keskin görünür. Ancak, XAML Geometri kullanarak şekil oluşturmak karmaşıktır çünkü her noktayı ve eğriyi ayrı ayrı belirtmeniz gerekir.

Bu örnekte, PathIcon'da kullanılan Geometriyi tanımlamanın iki farklı yolu gösterilmektedir.

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

Özel şekiller oluşturmak için Geometri sınıflarını kullanma hakkında daha fazla bilgi edinmek için sınıf belgelerine bakın ve geometriler için taşıma ve çizme komutları. ayrıca WPF Geometrisi belgelerinebakın. WinUI Geometry sınıfı WPF sınıfıyla aynı özelliklere sahip değildir, ancak şekiller oluşturmak her ikisi için de aynıdır.

Daha fazla bilgi ve örnek için PathIcon sınıfı belgelerine bakın.

BitmapIcon ve ImageIcon

Bir görüntü dosyasından (PNG, GIF veya JPEG gibi) simge oluşturmak için BitmapIcon veya ImageIcon kullanabilirsiniz, ancak başka bir seçenek varsa bunu önermeyiz. Bit eşlem görüntüleri belirli bir boyutta oluşturulur, bu nedenle simgenin ne kadar büyük olmasını istediğinize ve ekranın çözünürlüğüne bağlı olarak ölçeğinin büyütülmesi veya küçültülmesi gerekir. Resmin ölçeği azaltıldığında (küçültüldü), bulanık görünebilir. Büyütüldüğünde, bloklu ve pikselli görünebilir.

BitmapIcon

Varsayılan olarak, BitmapIcon görüntüdeki tüm renk bilgilerini çıkarır ve Ön Plan rengindeki saydam olmayan tüm pikselleri işler. Tek renkli bir simge oluşturmak için PNG biçiminde saydam arka plan üzerinde düz bir resim kullanın. Diğer görüntü biçimleri görünüşte hatasız yüklenir ancak ön plan renginin düz bir bloğuyla sonuçlanır.

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

ShowAsMonochrome özelliğini falseolarak ayarlayarak varsayılan davranışı geçersiz kılabilirsiniz. Bu durumda BitmapIcon, desteklenen bit eşlem dosya türleri için ImageIcon ile aynı şekilde davranır (SVG dosyaları desteklenmez).

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

Daha fazla bilgi ve örnek için BitmapIcon sınıfı belgelerine bakın.

Bahşiş

BitmapIcon kullanımı BitmapImage kullanımına benzer; Kodda UriSource özelliğini ayarlama gibi BitmapIcon için geçerli olan daha fazla bilgi için BitmapImage sınıfına bakın.

ImageIcon

ImageIcon, ImageSourcetüretilmiş sınıflardan biri tarafından sağlanan görüntüyü gösterir. En yaygın olanı bitmapsource , ancak daha önce de belirtildiği gibi, olası ölçeklendirme sorunları nedeniyle simgeler için bit eşlem görüntüleri önermiyoruz.

Ölçeklenebilir Vektör Grafikleri (SVG) kaynakları simgeler için idealdir, çünkü her zaman herhangi bir boyuta veya çözünürlüğe keskin görünürler. ImageIcon ile birlikte, SVG belirtimindeki güvenli statik modu destekleyen ancak animasyonları veya etkileşimleri desteklemeyen SVGImageSource kullanabilirsiniz. Daha fazla bilgi için bkz. SVGImageSource ve SVG desteği.

ImageIcon, Foreground özelliğini yoksayar, bu nedenle görüntüyü her zaman özgün rengiyle gösterir. Ön plan rengi yoksayıldığından, düğmede veya benzer bir denetimde kullanıldığında simge görsel durum değişikliklerine yanıt vermez.

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

Daha fazla bilgi ve örnek için ImageIcon sınıfı belgelerine bakın.

Bahşiş

ImageIcon kullanımı Görüntü denetimine benzer; ImageIcon için geçerli olan daha fazla bilgi için Image sınıfına bakın. Önemli bir fark, ImageIcon ile çok çerçeveli bir görüntünün (animasyonlu GIF gibi) yalnızca ilk karesinin kullanılmasıdır. Animasyonlu simgeleri kullanmak için bkz. AnimatedIcon.

İlgili makaleler

• Windows 'da İkonografi
• Uygulama simgeleri
• AnimasyonluSimge
• Komut çubuğu