استفاده از SVG در پروژه های Xamarin forms

چرا از Svg استفاده کنیم؟

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

البته Svg در تمامی اجزاء برنامه قابل استفاده نیست، برای مثال آیکون برنامه نمیتونه Svg باشد.

پلاگین Xamarin.FFImageLoading.Svg.Forms به شما کمک میکنه تا در پروژه ی Xamarin Forms تون به راحتی تصاویری با فرمت Svg استفاده کنید.

روی گیت هاب یک نمونه کد آماده قرار دادیم که در اون از پلاگین ذکر شده استفاده شده تا تصاویر Svg را به نمایش بگذاره.
مراحل زیر توضیح مختصری از انجام این کار است.

• اضافه کردن Xamarin.FFImageLoading.Svg.Forms nuget package در پروژه
• اضافه کردن کدهای زیر در کلاس AppDelegate پروژه iOS و کلاس Main Activity در Android و کلاس App پروژه UWP

 FFImageLoading.Forms.Platform.CachedImageRenderer.Init(); FFImageLoading.Svg.Forms.SvgCachedImage.Init(); 

• اضافه کردن فایل های SVG به پروژه ی مشترک. توجه کنید فایل Svg مربوطه باید Embedded Resource باشه و به خاطر این تنظیم یه خطی با مزه هر چی تو فولدر Resources بگذارین خود به خود Embedded Resource هست، پس فقط فایل تون رو بگذارین تو اون فولدر!
• کد زیر را به Xaml فرم هایی که قصد استفاده از Svg توشون دارید اضافه کنید.

xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly= FFImageLoading.Svg.Forms"

اگه فقط قصد نمایش Svg دارید:

<ffimageloadingsvg:SvgCachedImage                  
        Source="resource://XamarinFormsPrismSvgSample.Views.Resources.Apple.svg"
        WidthRequest="150"
         HeightRequest="150"  >
</ffimageloadingsvg:SvgCachedImage> 

• اگه می خواهید رویداد Tapped اش رو هم هندل کنید. (سورس)

 <ffimageloadingsvg:SvgCachedImage
        Source="resource://XamarinFormsPrismSvgSample.Views.Resources.Apple.svg">           
        <ffimageloadingsvg:SvgCachedImage.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding SayWhatsAppleCommand}" />           
        </ffimageloadingsvg:SvgCachedImage.GestureRecognizers>       </ffimageloadingsvg:SvgCachedImage> 

خب. روی سیب تپ کنید ببینید چی می شه!

امیدوارم مقاله براتون کاربردی باشه (: