کامپوننت MahApps Metro برای تکنولوژی WPF در زبان C#

با سلام و عرض خسته نباشید خدمت کاربران عزیز سایت توسعه دهندگان، در این پست قصد دارم یک کامپوننت بسیار کاربردی و Open Source به نام MahApps Metro را به شما عزیزان معرفی کنم و به آموزش آن بپردازم، این کامپوننت برای تکنولوژی WPF برای زبان های C# و VB.NET عرضه شده که (برای دات نت ۴ و ۴.۵) با استفاده از آن می توانید یک برنامه یا فرمی کامل با ظاهر Metro ویندوز ۸ آن هم بصورت بسیار آسان و با چند خط کد XAML طراحی کنید.

یکی دیگر از مزیت های این کامپوننت سبک بودن (حدود ۷۰۰ کیلوبایت)، و تک فایلی بودن آن است.

برخی از کنترل هایی که در این کامپوننت می توانید از آنها استفاده نمایید:

  1. MetroWindow
  2. Button
  3. DataGrid
  4. Dialogs (مانند MessageBox)
  5. FlipView
  6. Flyouts
  7. NumericUpDown
  8. ProgressBar
  9. ProgressRing
  10. RangeSlider
  11. Slider
  12. SplitButton & DropDownButton
  13. TabControl
  14. TextBox
  15. ToggleSwitch
  16. TransitionContentControl
  17. Tile Control (مانند کاشی های ویندوز ۸)
  18. و…

جهت نصب این کامپوننت می توانید آن را از NuGet Package Manager به سادگی دانلود کرده و به رفرنس های برنامه خود اضافه کنید.

آموزش نصب MahApps Metro:

نرم افزار Visual Studio را اجرا کرده و از منوی بالای آن به بخش ذکر شده بروید:

Tools > NuGet Package Manager > Package Manager Console

پس از اجرای Package Manager Console در پائین ویژوال استدیو، چند لظه صبر کنید تا کامل بارگزاری شود، پس از بارگزاری متن زیر را در آن وارد کرده و دکمه Enter را فشار دهید:

Install-Package MahApps.Metro

در صورتی که NuGet بر روی Visual Studio شما نصب نیست، می توانید از اینجا دانلود کنید.

حال پس از چند لحظه این کامپوننت به رفرنس Solution شما اضافه خواهد شد و به راحتی می توانید از آن استفاده نمایید.

 

آموزش استفاده از کامپوننت MahApps Metro:

 

فرم به شکل MetroWindow:

پس از ایجاد یک پروژه WPF، تمای کد های XAML بخش MainWindow را پاک کرده و کد زیر را جایگزین نمایید:

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

MahApps Metro Window

برای اضافه کردن سایه به دور فرم می توانید کد زیر را اضافه کنید:

باری استفاده از تم تاریک، کد:

را در فایل App.xaml، جایگزین:

نمایید. (از حالت Light به Dark)

Light Metro UI

Dark Metro UI


استفاده از Button ها:

SquareButton:

SquareButton

بزای استفاده از این تم در دکمه ها فقط کافیست کد:

را به بخش کد XAML دکمه خود اضافه نمایید.

 

MetroCircleButton:

CircleButtons

مانند روش قبلی عمل کنید، کد استایل:

 FlatButton:

Flat Button

برای استفاده از این تم، می بایست تکه کد:

را به بخش ResourceDictionary در فایل App.xaml اضافه نمایید.


کنترل ProgressRing:

Progress Ring

کد:


کنترل TextBox:

برای استفاده از WaterMark یا PlaceHolder در کنترل TextBox می توانید از قطعه کد زیر استفاده نمایید:

 Watermark TextBox

و برای استفاده از دکمه Clear در کنترل TextBox می توانید از کد زیر استفاده نمایید:

 Clear TextBox


کنترل Tile: (کاشی های ویندوز ۸)

کد:

 Metro Tiile


کنترل ToggleSwitch:

کد:

Toggle Switch

برای اضافه کردن لیبل های On – Off و یا …:


کنترل Dialog:

با استفاده از این کنترل می توانید Dialog هایی مانند MessageBox، InputDialog، ProgressDialog و … را بسازید.

کد MessageBox: (کد را در محیط کد نویسی C# بنویسید)

کد ProgressDialog:

Progress Dialog

توجه داشته باشید که تمامی کد های کامپوننت MahApps از تابع async و await استفاده می کنند. و برای استفاده از کد await می بایست در بخش کد private void، بین private و void کد async را اضافه کنید، به شکل زیر:

توجه: تابع Async در نسخه .NET Framework 4.5 بصورت پیشفرض وجود دارد، ولی اگر از نسخه ۴ استفاده می کنید، جهت فعال سازی می بایست آن را از پکیج NuGet Package Console به صورت دستی نصب نمایید. (روش نصب پکیج از NuGet در متن های بالاتر توضیح داده شده است)

جهت نصب Microsoft Async کد زیر را در بخش کنسول NuGet وارد کرده و دکمه Enter را فشار دهید.

Install-Package Microsoft.Bcl.Async

 


جهت دیدن تمامی آموزش ها می توانید به وبسایت رسمی MahApps Metro مراجعه نمایید.

آدرس اصلی سایت: http://mahapps.com

بخش معرفی و آموزش تمامی کنترل ها: http://mahapps.com/controls

بخش راهنمایی های مبتدی: http://mahapps.com/guides

سایت در CodePlex: کلیک کنید

سایت در GitHub: کلیک کنید (نسخه Open Source بصورت کامل در این بخش در دسترس است)

 

در صورت وجود هرگونه مشکل و سوال می توانید آن را در بخش نظرات، تماس با ما و با ارسال ایمیل شخصی بیان کنید.

 

    پاسخگو
    محمدصادق در پنج شنبه ۱۳ شهریور ۱۳۹۳ :

    سلام . من اون کد اولی رو می زنم ولی ارور می ده توی کلمه <Controls:MetroWindow(اولیش) .
    با تشکر

      پاسخگو
      محمد رشیدی در پنج شنبه ۱۳ شهریور ۱۳۹۳ :

      به روشی که گفتم اگه دقیق عمل کنید هیچ خطایی رخ نمیده! بالاخره یه خورده هم باید دانش WPF رو داشته باشید که بتونید باهاش به درستی کار کنید.

    پاسخگو
    محمد رشیدی در پنج شنبه ۱۳ شهریور ۱۳۹۳ :

    اگه دقیق به همون روشی که گفتم عمل کردین، ممکنه بخاطر کوچیک با بزرگ بودن اسم باشه، مثلا controls رو جایگزین Controls کنید.

    پاسخگو
    rezakhakpour در سه شنبه ۲۵ شهریور ۱۳۹۳ :

    سلام
    یه نمونه سورس بذارید
    ممنون

      پاسخگو
      محمد رشیدی در سه شنبه ۲۵ شهریور ۱۳۹۳ :

      با سلام، سورس بزودی در همین پست قرار میگیره.

    پاسخگو
    امیر مهدی در جمعه ۰۵ تیر ۱۳۹۴ :

    سلام لطفا سورس بزارید تشکر از سایت خوبتون

    پاسخگو
    امین در جمعه ۱۰ مهر ۱۳۹۴ :

    آقا دمت گرم
    انصافا خ عالی بود
    خ به کارم اومد
    مشتی هستی

      پاسخگو
      امیرحسین گل محمدی در جمعه ۱۰ مهر ۱۳۹۴ :

      سپاس از شما

    پاسخگو
    مرتضی در چهارشنبه ۰۲ دی ۱۳۹۴ :

    سلام. من وقتی داخل فایل xaml کد رو اضافه میکنم و یه ابزار مثلا یه تکس باکس میزارم دیگه نمیتونم ابزار دیگی ای قرار بدم یا همون رو جابجا کنم، خواهش میکنم راهنمایی کنید خیلی نیاز دارم، ممنون

    پاسخگو
    امیر در چهارشنبه ۰۸ اردیبهشت ۱۳۹۵ :

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