.net毛伊图标
.NET MAUI ICONS是一个综合的库馆藏,可在.NET MAUI框架内促进图标和字体图标管理。该库包括无缝整合三个标志性设计系统的控件:流利的,材料,库比蒂诺和fontawesome。这些控件可完全访问上述图标集合,为.NET MAUI应用提供丰富而多功能的图像解决方案。
| 包裹 | 最新稳定 | 最新预览 | 描述 |
|---|---|---|---|
AathifMahir.Maui. MauiIcons .SegoeFluent |
MAUI图标 – Segoe Fluent包装包含内置的Windows Segoe Fluent图标的完整集合。 | ||
AathifMahir.Maui. MauiIcons .Fluent
|
MAUI图标 – Fluent包装包含Microsoft的开源版Fluent图标的完整收集。 | ||
AathifMahir.Maui. MauiIcons .Fluent.Filled
|
MAUI图标 – 流利的包装包含Microsoft的全部开源版Fluent图标的完整收集。 | ||
AathifMahir.Maui. MauiIcons .Material
|
MAUI图标 – 材料包装包含完整的材料常规图标收集。 | ||
AathifMahir.Maui. MauiIcons .Material.Outlined
|
MAUI图标 – 材料概述的包装包含完整的材料概述图标的收集。 | ||
AathifMahir.Maui. MauiIcons .Material.Rounded
|
MAUI图标 – 材料圆包包含完整的材料圆形图标的收集。 | ||
AathifMahir.Maui. MauiIcons .Material.Sharp
|
MAUI图标 – 材料锋利的包装包含完整的材料锋利图标的收集。 | ||
AathifMahir.Maui. MauiIcons .Cupertino
|
MAUI ICONS -Cupertino软件包包含开源版框架7的iOS图标的完整集合。 | ||
AathifMahir.Maui. MauiIcons .FontAwesome
|
MAUI ICONS- Fontawesome包装包含常规Fontawesome 6个图标的免费和开源版本的完整收集。 | ||
AathifMahir.Maui. MauiIcons .FontAwesome.Solid
|
MAUI图标 – Fontawesome固体包装包含完整的免费和开源版本的Solid Fontawesome 6个图标。 | ||
AathifMahir.Maui. MauiIcons .FontAwesome.Brand
|
MAUI ICONS- Fontawesome品牌包装包含完整的免费和开源版本的品牌Fontawesome 6个图标。 |
开始
为了使用.NET MAUI图标,您需要在
MauiProgram.cs文件中调用扩展方法,如下所示:
MauiIcons()
// Initialises the .Net Maui Icons – Material
.UseMaterial MauiIcons ()
// Initialises the .Net Maui Icons – Cupertino
.UseCupertino MauiIcons ();
}
}\”>
public static class MauiProgram { public static MauiApp CreateMauiApp ( ) { var builder = MauiApp . CreateBuilder ( ) ; // Maui App Builder that Comes with Default Maui App builder . UseMauiApp < App > ( ) // Initialises the .Net Maui Icons - Fluent . UseFluent MauiIcons ( ) // Initialises the .Net Maui Icons - Material . UseMaterial MauiIcons ( ) // Initialises the .Net Maui Icons - Cupertino . UseCupertino MauiIcons ( ) ; } }
目录
- 用法
- 高级设置
- V4的新更改
- 解决方法(必须阅读)
- 内置控制用法
- XAML扩展使用情况
- 数据绑定用法
- C#标记用法
- onplatform和onidiom使用
- 打破变化
- 版本3至4
- 版本2至3
- 版本1至2
- 高级用法
- 贡献
- 执照
用法
为了使用.NET MAUI图标,您可以使用以下名称空间:
xmlns:mi=\"http://www.aathifmah***ir.com/dotnet/2022/maui/icons\"
高级设置
您可以使用Use MauiIcons Core Builder扩展名设置默认图标大小,字体覆盖和默认字体自动尺度,如下所示:
MauiIconsCore(x =>
{
x.SetDefaultIconSize(30.0);
x.SetDefaultFontOverride(true);
x.SetDefaultFontAutoScaling(true);
})\”>
builder . Use MauiIcons Core ( x => { x . SetDefaultIconSize ( 30.0 ) ; x . SetDefaultFontOverride ( true ) ; x . SetDefaultFontAutoScaling ( true ) ; } )
解决方法
如果您遇到此问题dotnet/maui#7503使用新名称空间时,请确保在CodeBehind中创建一个丢弃的saved supper实例
public MainPage ( ) { InitializeComponent ( ) ; // Temporary Workaround for url styled namespace in xaml _ = new MauiIcon ( ) ; }
内置控制用法
Xaml
< mi : MauiIcon Icon = \" {mi:Cupertino Airplane} \" /> < mi : MauiIcon Icon = \" {mi:material ABC} \" /> < mi : MauiIcon Icon = \" {mi:fluent Accounts} \" />
C#
// Traditional C# new MauiIcon ( ) { Icon = CupertinoIcons . AppBadge , IconColor = Colors . Green } ; new MauiIcon ( ) { Icon = FluentIcons . Accounts , IconColor = Colors . Blue } ; new MauiIcon ( ) { Icon = MaterialIcons . ABC , IconColor = Colors . Yellow } ; // C# Markup new MauiIcon ( ) . Icon ( CupertinoIcons . AntFill ) . IconColor ( Colors . Purple ) ; new MauiIcon ( ) . Icon ( FluentIcons . Accounts ) . IconColor ( Colors . Magenta ) ; new MauiIcon ( ) . Icon ( MaterialIcons . ABC ) . IconColor ( Colors . Violet ) ;
XAML扩展使用情况
< Image Aspect = \" Center \" mi:MauiIcon.Value= \" {mi:Cupertino Icon=ArchiveboxFill} \" /> < Label mi:MauiIcon.Value= \" {mi:Fluent Icon=Accounts, FontOverride=True} \" /> < ImageButton mi:MauiIcon.Value= \" {mi:Material Icon=AccessAlarm} \" /> < Entry mi:MauiIcon.Value= \" {mi:FontAwesome Icon=AddressBook, FontOverride=True} \" /> < Button mi:MauiIcon.Value= \" {mi:SegoeFluent AdjustHologram, IconSize=Large, IconColor=Pink} \" />
数据绑定用法
下面的示例与Myicon和Mycolor属性结合,这些属性在后面的代码中存在,但在此示例中不包含。
MauiIcons.Sample.BindingPage\”
xmlns=\”http://schemas.micr***osoft.com/dotnet/2021/maui\”
xmlns:x=\”http://schemas.m*icro*so*ft.com/winfx/2009/xaml\”
xmlns:local=\”clr-namespace: MauiIcons .Sample\”
xmlns:mi=\”http://www.aathifmah***ir.com/dotnet/2022/maui/icons\”
x:Name=\”thisRoot\”>
<HorizontalStackLayout>
<Label mi:MauiIcon.Value=\”{mi:Fluent Icon={Binding MyIcon},
IconColor={Binding MyColor}, FontOverride=True}\” />
<Image>
<Image.Source>
<FontImageSource
Glyph=\”{mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor}}\” />
</Image.Source>
</Image>
<Image mi:MauiIcon.Value=\”{mi:Fluent Icon={Binding MyIcon},
IconColor={Binding MyColor}}\” />
<ImageButton mi:MauiIcon.Value=\”{mi:Fluent Icon={Binding MyIcon},
IconColor={Binding MyColor}\” />
<mi:MauiIcon Icon=\”{mi:Fluent Icon={Binding MyIcon}}\” />
<mi:MauiIcon mi:MauiIcon.Value=\”{mi:Fluent Icon={Binding MyIcon}}\”>
</HorizontalStackLayout>
</ContentPage>\”>
< ContentPage x : Class = \" MauiIcons .Sample.BindingPage \" xmlns = \" http://schemas.micr***osoft.com/dotnet/2021/maui \" xmlns : x = \" http://schemas.m*icro*so*ft.com/winfx/2009/xaml \" xmlns : local = \" clr-namespace: MauiIcons .Sample \" xmlns : mi = \" http://www.aathifmah***ir.com/dotnet/2022/maui/icons \" x : Name = \" thisRoot \" > < HorizontalStackLayout > < Label mi:MauiIcon.Value= \" {mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor}, FontOverride=True} \" /> < Image > < Image .Source> < FontImageSource Glyph = \" {mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor}} \" /> </ Image .Source> </ Image > < Image mi:MauiIcon.Value= \" {mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor}} \" /> < ImageButton mi:MauiIcon.Value= \" {mi:Fluent Icon={Binding MyIcon}, IconColor={Binding MyColor} \" /> < mi : MauiIcon Icon = \" {mi:Fluent Icon={Binding MyIcon}} \" /> < mi : MauiIcon mi:MauiIcon.Value= \" {mi:Fluent Icon={Binding MyIcon}} \" > </ HorizontalStackLayout > </ ContentPage >
C#标记用法
new ImageButton ( ) . Icon ( FluentIcons . Accounts ) ; new Image ( ) . Icon ( CupertinoIcons . AntFill ) ; new Label ( ) . Icon ( MaterialIcons . Home , fontOverride : true ) . IconSize ( 40.0 ) . IconColor ( Colors . Red ) ; new Entry ( ) . Icon ( CupertinoIcons . AntFill , fontOverride : true ) . IconSize ( 20.0 ) . IconColor ( Colors . Aqua ) ; new SearchBar ( ) . Icon ( MaterialIcons . ABC , fontOverride : true ) ;
将图标应用于文字或占位符
支持占位持有人的控件可以将图标分配给占位符或文本,默认值为占位符,但可以通过将目标名参数设置为文本,将其设置为Text
new Entry ( ) . Icon ( CupertinoIcons . AntFill , fontOverride : true , targetName : \"Text\" ) . IconSize ( 20.0 ) . IconColor ( Colors . Aqua ) ; new SearchBar ( ) . Icon ( MaterialIcons . ABC , fontOverride : true , targetName : \"PlaceHolder\" ) ; // Setting TargetName PlaceHolder is Redundant as it\'s Default
免责声明:重要的是要注意,我们正在对输入控件的字体覆盖,以设置可能导致意外行为和渲染问题的图标。
图标后缀
内置的Mauiicon控件确实支持IconSuffix及其自定义,您可以通过以下以下示例使用图标后缀功能
Xaml
< mi : MauiIcon Icon = \" {mi:Material Icon=AirplanemodeActive} \" IconSuffixTextColor = \" Red \" IconSuffix = \" Off \" IconSuffixFontSize = \" 16 \" /> < mi : MauiIcon Icon = \" {mi:FontAwesomeBrand Icon=Github} \" IconSuffixTextColor = \" Cyan \" IconSuffix = \" Repo \" IconSuffixFontSize = \" 16 \" />
C#
new MauiIcon ( ) . Icon ( FontAwesomeBrandIcons . Pinterest ) . IconColor ( Colors . Red ) . IconSuffix ( \"Pin\" ) . IconSuffixBackgroundColor ( Colors . White ) ; new MauiIcon ( ) . Icon ( CupertinoIcons . Airplane ) . IconColor ( Colors . Cyan ) . IconSuffix ( \"Flying\" ) ;
动画用法
Xaml
<mi:MauiIcon Icon=\”{mi:Cupertino Airplane}\” EntranceAnimationType=\”Fade\”/>
<mi:MauiIcon Icon=\”{mi:material ABC}\” EntranceAnimationType=\”Rotate\” EntranceAnimationDuration=\”4000\”/>
<mi:MauiIcon Icon=\”{mi:fluent Accounts}\” EntranceAnimationType=\”Scale\”/>
<mi:MauiIcon Icon=\”{mi:Cupertino Airplane}\” OnClickAnimationType=\”Fade\”/>
<mi:MauiIcon Icon=\”{mi:material ABC}\” OnClickAnimationType=\”Rotate\” OnClickAnimationDuration=\”4000\”/>
<mi:MauiIcon Icon=\”{mi:fluent Accounts}\” OnClickAnimationType=\”Scale\”/>\’>
<!-- Entrance Animation --> < mi : MauiIcon Icon = \" {mi:Cupertino Airplane} \" EntranceAnimationType = \" Fade \" /> < mi : MauiIcon Icon = \" {mi:material ABC} \" EntranceAnimationType = \" Rotate \" EntranceAnimationDuration = \" 4000 \" /> < mi : MauiIcon Icon = \" {mi:fluent Accounts} \" EntranceAnimationType = \" Scale \" /> <!-- OnClick Animation --> < mi : MauiIcon Icon = \" {mi:Cupertino Airplane} \" OnClickAnimationType = \" Fade \" /> < mi : MauiIcon Icon = \" {mi:material ABC} \" OnClickAnimationType = \" Rotate \" OnClickAnimationDuration = \" 4000 \" /> < mi : MauiIcon Icon = \" {mi:fluent Accounts} \" OnClickAnimationType = \" Scale \" />
C#
// Entrance Animation new MauiIcon ( ) . Icon ( CupertinoIcons . AntFill ) . EntranceAnimationType ( AnimationType . Fade ) ; new MauiIcon ( ) . Icon ( FluentIcons . Accounts ) . EntranceAnimationType ( AnimationType . Rotate ) ; new MauiIcon ( ) . Icon ( MaterialIcons . ABC ) . EntranceAnimationType ( AnimationType . Scale ) . EntranceAnimationDuration ( 4000 ) ; // OnClick Animation new MauiIcon ( ) . Icon ( CupertinoIcons . AntFill ) . OnClickAnimationType ( AnimationType . Fade ) ; new MauiIcon ( ) . Icon ( FluentIcons . Accounts ) . OnClickAnimationType ( AnimationType . Rotate ) ; new MauiIcon ( ) . Icon ( MaterialIcons . ABC ) . OnClickAnimationType ( AnimationType . Scale ) . OnClickAnimationDuration ( 4000 ) ;
onplatform和onidiom使用
Xaml
< mi : MauiIcon Icon = \" {mi:Cupertino Airplane} \" OnPlatforms = \" WinUI, Android, MacCatalyst \" /> < mi : MauiIcon Icon = \" {mi:material ABC} \" OnIdioms = \" Desktop, Phone, Tablet \" /> < mi : MauiIcon Icon = \" {mi:fluent Accounts} \" OnPlatforms = \" Android \" OnIdioms = \" Phone \" />
C#
new MauiIcon ( ) . Icon ( CupertinoIcons . AntFill ) . OnPlatforms ( new List < string > { \"WinUI\" , \"Android\" } ) ; new MauiIcon ( ) . Icon ( FluentIcons . Accounts ) . OnIdioms ( new List < string > { \"Desktop\" , \"Phone\" } ) ; new MauiIcon ( ) . Icon ( MaterialIcons . ABC ) . OnPlatforms ( new List < string > { \"WinUI\" , \"Android\" } ) . OnIdioms ( new List < string > { \"Desktop\" , \"Phone\" } ) ;
打破变化
版本3至4
- 图标将不会应用于输入,搜索栏等的控件。默认情况下,V4会引发异常,需要将Fontoverride设置为True以将图标应用于构建器扩展级别或控制级别
- 通过使用新的
Use MauiIcons CoreBuilder扩展名并使用SetDefaultFontOverride方法,可以将此行为恢复为V3的行为
- 通过使用新的
MauiIconsCore(x =>
{
x.SetDefaultFontOverride(true);
})\”>
builder . Use MauiIcons Core ( x => { x . SetDefaultFontOverride ( true ) ; } )
- 图标尺寸现在设置为默认情况下控制的字体,以前设置为默认情况下为30.0
- 可以通过使用新的
Use MauiIcons CoreBuilder扩展名并使用SetDefaultIconSize方法将此行为恢复为V3的行为。
- 可以通过使用新的
MauiIconsCore(x =>
{
x.SetDefaultIconSize(30.0);
})\”>
builder . Use MauiIcons Core ( x => { x . SetDefaultIconSize ( 30.0 ) ; } )
版本2至3
- 删除TypeArgument并内置的onplatform和OnIdioM支持,使用MauiIcons的onplatform和onidioms功能
- 删除dotnet 7支持
版本1至2
Old (v1)
MauiIcons .Fluent\”
<fluent:MauiIcon Icon=\”AppFolder48\”/>\”>
xmlns:fluent=\"clr-namespace: MauiIcons .Fluent;assembly= MauiIcons .Fluent\" < fluent : MauiIcon Icon = \" AppFolder48 \" />
New (v2)
xmlns:mi=\"http://www.aathifmah***ir.com/dotnet/2022/maui/icons\" < mi : MauiIcon Icon = \" {mi:Fluent AppFolder48} \" />
V4的新更改
- 我们有一种新的方式来分配/设置图标,为图标引入新的附件,新的附件带来了支持触发器,行为,样式等的支持。
/// Old < Image Aspect = \" Center \" Source = \" {mi:Fluent Icon=Accessibility48} \" /> // New < Image Aspect = \" Center \" mi:MauiIcon.Value= \" {mi:Fluent Icon=Accessibility48} \" />
免责声明:旧的XAML标记扩展名仍然得到支持并且可以使用,但是建议使用新的附件属性以获得更好的支持和可读性,我们计划将来将旧的XAML标记扩展扩展在未来使用,以支持附件属性
使用样式的示例
< Style x : Key = \" ButtonStyle \" TargetType = \" Button \" > < Setter Property = \" mi:MauiIcon.Value \" Value = \" {mi:Fluent Icon=AppFolder48} \" /> </ Style > < Button Style = \" {StaticResource ButtonStyle} \" />
- 引入新的
Use MauiIcons CoreBuilder扩展程序,以设置默认图标大小,字体覆盖,默认字体自动缩放等等。查看高级设置以获取更多信息
- 改进的内置图像和onidiims具有约束力的改进和增强的性能
- 新的
OnClickAnimation支持Mauiicon Control,检查动画使用量以获取更多信息
高级用法
- 如果您遇到了控件确实具有多个应用图标源的情况,则您希望在附加属性上设置的图标将其应用于所有来源,也可以执行此操作,也可以将目标名称设置为“ TargetName”
.,这将把图标应用于所有来源
< Tab mi:MauiIcon.Value= \" {mi:Fluent Icon=Home32, TargetName=\'.\'} \" > < ShellContent Title = \" Xaml \" ContentTemplate = \" {DataTemplate local:MainPage} \" Route = \" MainPage \" /> </ Tab >
- 如果您遇到要将图标应用于MauiIcons设置的默认源的情况,您也可以执行此操作,将目标名设置为源属性名称,则将图标应用于该特定源
< Tab mi:MauiIcon.Value= \" {mi:Fluent Icon=Home32, TargetName=\'FlyoutIcon\'} \" > < ShellContent Title = \" Xaml \" ContentTemplate = \" {DataTemplate local:MainPage} \" Route = \" MainPage \" /> </ Tab >
- 如果您遇到了控件确实具有多个应用图标的情况,则需要为这些其他来源使用不同的图标,可以通过直接将图标应用于source使用XAML标记,例如如下示例
< Tab mi:MauiIcon.Value= \" {mi:Fluent Icon=Home32} \" FlyoutIcon = \" {mi:Fluent Icon=Accessibility48} \" > < ShellContent Title = \" Xaml \" ContentTemplate = \" {DataTemplate local:MainPage} \" Route = \" MainPage \" /> </ Tab >
总体目标名称的行为就像源属性名称一样,如果要将图标应用于特定源,请将目标名称设置为源属性名称,如果要将图标应用于所有源,请将目标名称设置为“目标名称.
特性
| 参数 | 类型 | 描述 |
|---|---|---|
| 图标 | Enum |
获取或设置图标枚举值 |
| 偶像 | double |
获取或设置图标的大小 |
| IconColor | Color
|
获取或设置图标的颜色 |
| IconbackgroundColor | Color
|
获取或设置图标的背景颜色 |
| Iconautsoscal | bool
|
获取或设置一个值,指示图标是否应自动扩展 |
| ICONSUFFIX | string
|
获取或设置图标的后缀文本 |
| Iconsuffixfontfontlamily | string
|
获取或设置字体系列的图标后缀 |
| IconSuffixFontSize | double
|
获取或设置图标后缀的字体大小 |
| IconSuffixTextColor | Color
|
获取或设置图标后缀的文本颜色 |
| IconSuffixbackgroundColor | Color
|
获取或设置图标后缀的背景颜色 |
| IconandSuffixbackgroundColor | Color
|
获取或设置图标和后缀的背景颜色,将颜色应用于整个控制 |
| IconSuffixAutoscal | bool
|
获取或设置一个指示图标后缀是否应自动扩展的值。 |
| entranceanimationtype | AnimationType
|
获取或设置元素的入口动画类型 |
| 侵入式饮食 | uint |
获取或设置元素入口动画的持续时间 |
| OnclickanimationType | AnimationType
|
获取或设置该元素的点击动画类型 |
| OnclickanimationDuration | uint
|
获取或设置点击动画的持续时间 |
| 平台 | IList<string> |
获取或设置受支持的平台 |
| Onidiims | IList<string>
|
获取或设置受支持的成语 |
执照
MauiIcons已获得MIT许可证的许可。
Fluent UI系统图标已根据MIT许可获得许可。
材料设计图标是根据Apache许可证2.0许可的。
Segoe Fluent Icons已获得Microsoft的许可,并获得了几个许可证。
Cupertino Icons已获得MIT许可证的许可。
Fontawesome Icons已获得Fontawesome的许可,并在几个许可证下获得许可
贡献
如果您想为该项目做出贡献,请随时创建问题或请求。您的意见和反馈非常感谢。此外,如果您有兴趣通过提供资源或成为赞助商来支持该项目,那么您的贡献将受到欢迎并在其持续发展和成功方面发挥作用。感谢您对为这项努力做出贡献的兴趣。
