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

در این مطلب با نحوه اضافه کردن Font Icon به یک پروژه Xamarin.Forms آشنا خواهیم شد. برای شروع ابتدا Font Icon مد نظر خود را دانلود کنید. در این مطلب از Material Design Icons استفاده خواهیم کرد. این فونت اپن سورس بوده و برای پروژه های شخصی و تجاری قابل استفاده است.اضافه کردن فایل فونت به پروژه هادر این مرحله فایل فونت را به پروژه ها اضافه خواهیم کرد. در صورتی که Solution شما شامل دو پروژه اندروید و iOS است، باید فونت را به هر دو پروژه اضافه کنیم:در پروژه اندروید فایل فونت باید در پوشه Assets قرار گیرد.در پروژه iOS فایل فونت باید در پوشه Resources قرار گیرد.در بخش Solution Explorer بر روی اسم یکی از پوشه های ذکر شده کلیک راست کرده و سپس از منوی Add گزینه Add Existing Item را انتخاب کنید. سپس در پنجره باز شده فایل فونت را انتخاب کنید تا به پروژه اضافه شود. در صورتی که پروژه iOS را نیز دارید همین مرحله را برای آن پروژه تکرار کنید.دسترسی به Font Familyبرای دسترسی به فونت مورد نظر باید در فایل App.xaml فونت اضافه شده را تعریف کنیم.<OnPlatform x:Key=&quotFontIcon&quot x:TypeArguments=&quotx:String&quot> <On Platform=&quotiOS&quot Value=&quotMaterial Design Icons&quot /> <On Platform=&quotAndroid&quot Value=&quotmaterialdesignicons-webfont.ttf#Material Design Icons&quot /> <On Platform=&quotUWP&quot Value=&quotAssets/Fonts/materialdesignicons-webfont.ttf#Material Design Icons&quot /></OnPlatform>نکته: مطمئن شوید کد فوق در داخل تگ های Application.Resources و ResourceDictionary قرار گرفته باشد.نحوه استفادهشما می‌توانید به روش های مختلفی از این فونت استفاده کنید. به عنوان مثال برای استفاده در Label به این صورت عمل کنید:<Label FontFamily=&quot{StaticResource FontIcon}&quot Text=&quot?&quot />و یا برای استفاده در FontImageSource:<FontImageSource FontFamily=&quot{StaticResource FontIcon}&quot Glyph=&quot?&quot Size=&quot44&quot />نکته: یونیکد آیکون در XAML به صورت زیر است و ویرایشگر پس از ذخیره آن را تبدیل می‌کند.تبدیل خودکار یونیکد در ویژوال استودیوهمانطور که مشاهده می‌کنید استفاده از آن ساده است اما شما باید یونیکد گلیف مورد را پیدا کرده تا بتوانید از آن استفاده کنید. در ادامه نحوه ساده‌تر کردن این مورد را بررسی خواهیم کرد.تولید کد های سی‌شارپبرای استفاده آسان‌تر از این نوع فونت‌ها در XAML ابتدا باید اسم و یونیکد آیکون های مختلف را استخراج کرده و سپس کد های سی‌شارپ را تولید کنیم. برای این منظور از وب سایت IconFont2Code استفاده خواهیم کرد.همانند تصویر زیر، با انتخاب فونت مورد نظر، وب سایت کد های سی‌شارپ مورد نیاز را برای ما تولید خواهد کرد. کد ها را کپی کرده و در پروژه خود اضافه کنید.ایجاد کد های سی شارپ برای آیکون های مورد نظرنکته: شما می‌تونید جهت کاهش حجم کلاس، تنها مواردی که به آنها نیاز دارید را اضافه کنید و از اضافه کردن بقیه مقادیر صرف نظر کنید.پس از اضافه کردن، به namespace و نام کلاسی که ایجاد کردید دقت کنید. نمونه کلاس ایجاد شده و namespace آندر فایل XAML که قرار است از این آیکون ها استفاده کنیم namespace کلاس کمکی خود را اضافه می‌کنیم:xmlns:helper=&quotclr-namespace:App2.Helpers&quotسپس به صورت زیر به آیکون های مورد نظر دسترسی خواهیم داشت:<FontImageSource FontFamily=&quot{StaticResource FontIcon}&quot Glyph=&quot{x:Static helper:IconFont.InformationOutline}&quot Size=&quot44&quot />نتیجهدر این مطلب با نحوه اضافه کردن فونت آیکون به یک پروژه زامارین آشنا شدیم و توانستیم با استفاده از ابزار های در دسترس از فونت آیکون دلخواه خود استفاده کنیم.? لینک ها و منابع:Using Font Icons in Xamarin.Forms: Goodbye Images, Hello Fonts!?‍? در صورتی که سوال و یا نظری دارید از طریق بخش نظرات با من در ارتباط باشید.