نحوه استفاده از Font Icon در اپلیکیشن های دات نت MAUI

در این مطلب با نحوه اضافه کردن Font Icon به یک پروژه دات نت MAUI آشنا خواهیم شد.

دانلود فونت

برای شروع ابتدا Font Icon مد نظر خود را دانلود کنید.

در این مطلب از فونت Material Design Icons Light (فایل ttf) استفاده خواهیم کرد. این فونت اپن سورس بوده و استفاده از آن در پروژه های شخصی و تجاری آزاد است.

دانلود فونت از گیت هاب

اضافه کردن فایل فونت به پروژه

برای اضافه کردن فایل فونت به پروژه مراحل زیر را دنبال کنید:

• در Solution Explorer بر روی پوشه Fonts که در پوشه Resources قرار دارد کلیک راست کنید.
• سپس در منوی باز شده بر روی Open Folder in File Explorer کلیک کنید تا در ویندوز باز شود.
• فایل فونت آیکون دانلود شده را در پوشه کپی کنید.
• به ویژوال استودیو برگشته مطمئن شوید که فونت در پوشه Fonts قرار گرفته باشد.

همچنین با کلیک راست بر روی فونت جدید و انتخاب گزینه Properties مطمئن شوید که Build Action بر روی MauiFont قرار داشته باشد.

دسترسی به FontFamily

برای تنظیم فونت جدید فایل MauiProgram.cs را باز کرده و در لیست فونت ها، فونت جدید را اضافه کنید.

fonts.AddFont("materialdesignicons-light-webfont.ttf", "FontIcon");

پارامتر اول نام فایل فونت و پارامتر دوم نام مستعار (Alias) فونت است که به عنوان FontFamily در ادامه از آن استفاده خواهیم کرد.

نتیجه مشابه زیر خواهد بود:

var builder = MauiApp.CreateBuilder();

builder
    .UseMauiApp<App>()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+       fonts.AddFont("materialdesignicons-light-webfont.ttf", "FontIcon");
    });

نحوه استفاده (توسط Glyph)

در وب سایت فونت، نام آیکون مورد نظر را جستجو و سپس Glyph آن را کپی کنید. سپس آن را در تگ Text کنترل مورد نظر قرار دهید:

<Label FontFamily="FontIcon" Text="&#x000f028;" />
<Button FontFamily="FontIcon" Text="&#x000f028;" />

در این روش با توجه به اینکه لازم است یونیکد آیکون را مستقیماً استفاده کنید ویرایش و نگهداری آن در آینده سخت خواهد بود. در ادامه روشی جایگزین را بررسی خواهیم کرد.

نحوه استفاده (تولید کد های سی شارپ)

برای استفاده آسان‌تر از فونت آیکون در XAML ابتدا باید اسم و یونیکد آیکون های مختلف را استخراج کرده و سپس کد های سی‌شارپ آن را تولید کنیم.

برای این منظور از وب سایت IconFont2Code استفاده خواهیم کرد:

• با استفاده از Browse فونت مورد نظر را انتخاب کنید.
• در پایین صفحه بر روی Copy to clipboard کلیک کنید.
• کلاس کپی شده را به پروژه خود اضافه کنید.

پس از اضافه کردن، به namespace و نام کلاسی که ایجاد کردید دقت کنید. در فایل XAMLی که می‌خواهید از این فونت آیکون استفاده کنید namespace کلاس کمکی خود را اضافه کنید:

xmlns:u="clr-namespace:MauiApp1.Utilities"

سپس برای استفاده به شکل زیر می‌توانید عمل کنید:

<Label FontFamily="FontIcon" Text="{x:Static u:IconFont.Information}" />
<Button FontFamily="FontIcon" Text="{x:Static u:IconFont.Information}" />

نتیجه همانند تصویر زیر خواهد بود:

لینک های مفید

• Fonts in .NET MAUI