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

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

برای شروع ابتدا Font Icon مد نظر خود را دانلود کنید. در این مطلب از Material Design Icons استفاده خواهیم کرد. این فونت اپن سورس بوده و برای پروژه های شخصی و تجاری قابل استفاده است.

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

در بخش Solution Explorer بر روی اسم پروژه کلیک راست کرده و سپس از منوی Add گزینه Add Exisiting Item را انتخاب کنید. سپس در پنجره باز شده فایل فونت را انتخاب کنید تا به پروژه اضافه شود.

نکته: در صورتی که فایل فونت را نمی‌توانید انتخاب کنید. در پایین پنجره مطمئن شوید گزینه All Files انتخاب شده باشد.

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

دسترسی به Font Family

برای دسترسی به فونت مورد نظر باید در فایل App.xaml فونت اضافه شده را تعریف کنیم.

<FontFamily x:Key="FontIcon">pack://application:,,,/#Material Design Icons</FontFamily>

نکته: مطمئن شوید کد فوق در داخل تگ Application.Resources قرار گرفته باشد.

توجه داشته باشید اسمی که در این تگ قرار می‌گیرد اسم حقیقی فونت است نه اسم فایل آن. برای مشاهده اسم حقیقی فونت، در ویندوز فونت را باز کرده و در پنجره پیش نمایش اسم آن را می‌توانید مشاهده کنید.

نحوه استفاده

شما می‌توانید به روش های مختلفی از این فونت استفاده کنید. به عنوان مثال برای استفاده در TextBlock به این صورت عمل کنید:

<TextBlock FontFamily="{StaticResource FontIcon}" Text="&#x000f0001;" />

و یا برای استفاده در Button:

<Button Content="&#x000f0001;" FontFamily="{StaticResource FontIcon}" />

همانطور که مشاهده کردید استفاده از آن ساده است اما شما باید یونیکد آیکون مورد نظر را پیدا کرده تا بتوانید از آن استفاده کنید. در ادامه نحوه ساده‌تر کردن این مورد را بررسی خواهیم کرد.

تولید کد های سی‌شارپ

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

همانند تصویر زیر، با انتخاب فونت مورد نظر، وب سایت کد های سی‌شارپ مورد نیاز را برای ما تولید خواهد کرد. کد ها را کپی کرده و در پروژه خود اضافه کنید.

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

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

xmlns:helper="clr-namespace:WpfApp4.Helpers"

سپس به صورت زیر به آیکون های مورد نظر دسترسی خواهیم داشت:

<TextBlock FontFamily="{StaticResource FontIcon}" Text="{x:Static helper:IconFont.InformationOutline}" />