شروع به کار با Avalonia UI

انتقال به دات نت ۶ ابزارهای مفیدی را پشت سر گذاشته است. جامعه منبع باز در حال به روز رسانی ایده های پشت سر خود برای دنیای جدید و چند پلتفرمی است.

زمانی که مایکروسافت در تلاش برای ارائه دنباله‌ای به ویندوز XP بود، چشم‌انداز Longhorn آن در بالای آنچه «سه ستون Longhorn» می‌نامید قرار گرفت: یک سیستم فایل شی با پایگاه داده به نام WinFS، مجموعه‌ای جدید. ابزارهای ارتباطی مبتنی بر خدمات وب با نام رمز Indigo، و یک لایه ارائه جدید بر اساس یک زبان توصیف گرافیکی با نام رمز Avalon. فقط Indigo و Avalon زنده ماندند تا بخشی از Windows Vista باشند، به عنوان چارچوب ارتباطی Windows .NET و Windows Presentation Framework (WPF).

WPF تقریباً ۲۰ سال بعد هنوز قوی است و بسیاری از برنامه‌های NET Framework را تقویت می‌کند، اما انتقال به کراس پلتفرم .NET 6 WPF را پشت سر گذاشته است. هنوز هم بخشی از توسعه .NET منبع باز است، اما فقط به پشتیبانی از برنامه های ویندوز محدود می شود. شما نمی توانید از آن برای ساخت کدی که روی لینوکس یا macOS اجرا می شود استفاده کنید. این امر انتقال کدهای مبتنی بر WPF از .NET Framework به .NET 6 و فراتر از آن را دشوار می کند، حتی با استفاده از کار برای گرد هم آوردن WPF، Universal Windows Platform (UWP) و Windows UI Library (WinUI 3) در Windows App SDK.

Avalonia: طراحی مجدد WPF برای برنامه های مدرن

این جایی است که Avalonia وارد می‌شود، و راهی را ارائه می‌دهد تا آنچه را که در مورد ساخت برنامه‌های WPF مبتنی بر XAML می‌دانید به دنیای مدرن و چند پلتفرمی به جای اینکه فقط ویندوز را هدف قرار دهد، کدهای مبتنی بر Avalonia می توانند روی macOS، Linux و Windows با پشتیبانی بومی x86 و x64 و همچنین Arm اجرا شوند. اگرچه بیشتر ساخت فعلی Avalonia برای پشتیبانی از برنامه های دسکتاپ در نظر گرفته شده است، پشتیبانی از برنامه های تلفن همراه در حال توسعه است و یک پیش نمایش عمومی در دسترس است و iOS، Android و WebAssembly را به ترکیب اضافه می کند. می‌توانید توسعه را دنبال کنید و در مخزن GitHub آن مشارکت کنید.

آوالونیا که برای برنامه های C# طراحی شده است، پورت مستقیم WPF نیست، اگرچه مفاهیم کلیدی را به اشتراک می گذارد. شما نمی توانید یک کنترل WPF موجود را در یک برنامه مجهز به Avalonia رها کنید. در عوض، قبل از اینکه بتوانید از آن استفاده کنید، باید آن را پورت کنید. این به این دلیل است که برخی از مفاهیم کلیدی Avalonia بیشتر از WPF با توسعه وب مرتبط هستند. به عنوان مثال، Avalonia همچنان بر روی زبان نشانه‌گذاری صفحه نمایش XAML ساخته می‌شود، در حالی که استایل‌سازی بیشتر شبیه CSS است، با استفاده از Styles از نحوی شبیه به CSS و مجموعه‌ای خاص خود را دریافت می‌کند. سایر تفاوت‌های کلیدی شامل نحوه عملکرد Avalonia با داده‌ها، گسترش DataTemplates به رابط‌ها و کلاس‌های مشتق‌شده، و همچنین دریافت مجموعه شخصی است.

نصب و استفاده از Avalonia

شروع به کار با Avalonia بسیار شبیه کار کردن با هر مجموعه دیگری از افزودنی‌های NET است. -ons. اگر از JetBrains Rider برای توسعه C# استفاده می کنید، Avalonia آماده است. در غیر این صورت، شما به سادگی را نصب کنید. یک برنامه افزودنی Visual Studio که شامل یک طراح XAML با پیش‌نمایش زنده است. در عمل، به عنوان یک طراح برای Rider هنوز در حال توسعه است، احتمالاً برای ساخت به هر دو ابزار نیاز دارید و آوالونیا UI برای برنامه های خود طراحی کنید. ReSharper آشنا شامل ابزارهایی برای کار با Avalonia، سرعت بخشیدن به توسعه با ابزارهای تجزیه و تحلیل و ویژگی های تکمیل کد است.

پس از نصب، می توانید استفاده از ابزارها را شروع کنید. اگر کد WPF یا UWP ساخته‌اید، باید پیاده‌سازی XAML آن را بسیار شبیه به آن پیدا کنید و از XAML برای طراحی طرح‌بندی برنامه و کد پشت آن برای افزودن تعاملات استفاده کنید. پیوندهای داده، ارتباطات بین کد و کنترل‌ها را مدیریت می‌کنند.

Avalonia اجرای کنترل‌های رایج را با یک چارچوب رویداد برای ارائه تعاملات به کد شما ارائه می‌کند. کنترل‌ها قابل گسترش هستند، با طرح‌بندی‌هایی که از موقعیت نسبی برای اندازه‌های مختلف پنجره و نمایش استفاده می‌کنند. کنترل‌ها اطلاعاتی را درباره موقعیت و فضای مورد نیاز طرح‌بندی ارائه می‌کنند (خود مجموعه‌ای از کنترل‌های سلسله مراتبی) که سپس اطلاعات مورد نیاز برای ارائه کنترل را فراهم می‌کند.

گرافیک اصلی در Avalonia یک پیکسل مستقل از دستگاه است که اندازه ثابتی دارد و به همه کنترل‌ها و عناصر گرافیکی اجازه می‌دهد مستقل از وضوح باشند. همانطور که به عنوان ۱/۹۶ اینچ تعریف شده است، به طور خودکار به DPI موجود نمایشگر نگاشت می شود. می توانید از کتابخانه شکل اصلی آن برای ساختن کنترل های خود استفاده کنید یا به سادگی طرح‌ها و انیمیشن‌های مقیاس‌پذیر را به طرح‌بندی‌های خود اضافه کنید. مدل انیمیشن Avalonia شبیه مدلی است که توسط CSS استفاده می‌شود، بنابراین می‌توانید کنترل‌ها را پویاتر کنید، تعاملات یا تغییرات پنجره را برجسته کنید.

الگوی طراحی ترجیحی مایکروسافت برای برنامه‌های مبتنی بر رابط کاربری گرافیکی مدرن، الگوی MVVM (model-view-viewmodel) است که در ابزار رابط کاربری متقاطع MAUI خود، و آوالونیا نیز همین رویکرد را اتخاذ کرده است. زمانی که نیاز دارید لایه رابط کاربری خود را از برنامه خود جدا نگه دارید و از اتصالات برای پیوند دادن لایه های view و viewmodel استفاده کنید، منطقی است. با ساختن نمای خود با استفاده از کنترل‌های آوالونیا شروع کنید، و مدل view از پیوندهایی برای پیوند دادن ویژگی‌های خود به کنترل‌های موجود در نما استفاده می‌کند. در اینجا کمی جهش مفهومی مورد نیاز است، اما این رویکرد باید به کدهایی منجر شود که نگهداری آسان‌تر و استفاده آسان‌تر با رابط‌های کاربری مختلف در کلاس‌های مختلف دستگاه‌ها باشد.

استفاده از ابزارهای DevTools مانند مرورگر Avalonia

یک ویژگی مفید گزینه افزودن پنجره DevTools شبیه مرورگر است. برای کدی که در حال آزمایش است. در قالب های پیش فرض تعبیه شده است و زمانی که برنامه در حالت اشکال زدایی کامپایل می شود فعال می شود. پس از اجرا، F12 را فشار دهید تا پنجره ابزار باز شود (همچنین می توانید یک حرکت حرکتی یا کلید دیگری را انتخاب کنید که به روش مناسب منتقل می شود). این به درختان منطقی و بصری نمای فعلی دسترسی پیدا می‌کند و کنترل‌ها و نحوه نمایش آنها را نشان می‌دهد. می‌توانید از این ابزار برای تغییر سریع ویژگی‌های یک کنترل بدون کامپایل مجدد برنامه‌تان، و همچنین برای درک اینکه چه سبک‌هایی در طرح‌بندی شما اعمال می‌شود و چرا استفاده می‌کنید.

دادن تجربه برنامه‌نویسی شبیه مرورگر به برنامه‌های NET، روشی مفید برای کار است، به خصوص اگر توسعه C# و XAML را تقسیم کرده باشید. طراحان XAML می‌توانند با یک برنامه زنده به روشی کار کنند که در یک پنجره استاندارد ویژوال استودیو غیرممکن است، و امکان ایجاد یک روش پویا و تعاملی‌تر برای طراحی کد را فراهم می‌کند که بسیار نزدیک‌تر به مدل کدگذاری اجتماعی است که از ابزارهایی مانند GitHub می‌آید. یک طراح می تواند به سرعت یک شاخه را جمع آوری کند و تغییرات را در XAML خود قبل از ارسال درخواست کشش برای هر طرح جدید آزمایش کند. تا زمانی که کنترل‌های جدیدی به برنامه اضافه نشود، نیازی به مشارکت برنامه‌نویس C# نیست.

توسعه‌دهندگان می‌توانند از DevTools برای ردیابی رویدادها استفاده کنند و اطمینان حاصل کنند که کنترل‌ها به درستی سیم‌کشی شده‌اند. می‌توانید رویدادها را به درخت بصری پیوند دهید تا نشان دهید که چگونه روی طرح‌بندی تأثیر می‌گذارند. حتی یک کنسول با C# REPL وجود دارد، بنابراین می‌توانید قطعات کد را قبل از اضافه کردن آنها به برنامه خود امتحان کنید.

مانند WPF قبل از آن، در آوالونیا چیزهای زیادی برای دوست داشتن وجود دارد. این یک بازنگری مدرن از اصول پشت WPF است که با ۲۰ سال تفکر توسعه همراه شده و آن را برای کاربردهای مدرن آماده می کند. اگرچه این یک جایگزین برای WPF نیست، اما راهی است که می‌توانید طرح‌های برنامه‌تان را از .NET Framework به .NET 6 و بیشتر از ویندوز منتقل کنید. پشتیبانی از پلتفرم‌های بیشتر در نسخه‌های آتی باید رقابت شایسته‌ای را برای MAUI مایکروسافت ایجاد کند—و با منبع باز در زیر پلتفرم، موج فزاینده همه قایق‌های NET.