آموزش استفاده از متریال دیزاین (Material Design) در WPF

  • یکشنبه ۴ آذر ۱۳۹۷
  • بازدید ۸۸۴ نفر

how to use material design in wpf 4800 تصویر

آموزش استفاده از متریال دیزاین (Material Design) در WPF

متریال دیزاین چیست؟

سبک طراحی متریال دیزاین (Material Design) اولین بار در ماه ژوئن سال ۲۰۱۴ توسط کمپانی گوگل معرفی شد و بسیار مورد توجه طراحان رابط کاربری قرار گرفت. در این متد طراحی، بیش از حد به انیمیشن ها، سیستم گرید و عمق سایه های استفاده شده برای عناصر مختلف اهمیت داده می شود. در این بخش قصد داریم تا آموزش متریال دیزاین در سی شارپ (WPF) را بررسی کنیم.

آیکون و رنگ های متریال

در طراحی متریال از آیکون و رنگ های خاصی استفاده می شود. برای مشاهده آیکون و رنگ های مورد استفاده از طراحی Material می توانید به لینک های زیر مراجعه کنید:

( مرجع انگلیسی برای رنگ هامرجع فارسی برای رنگ هامرجع انگلیسی برای آیکون ها )

 

material design in wpf 4800 1 تصویر

استفاده از Material Design در WPF

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

  • ایجاد یک پروژه WPF
  • نصب بسته Material Design in XAML از NuGet
  • افزودن Resource های مربوط به تم و رنگ های Material Design
  • تنظیم حالت پیش فرض

مرحله اول: ایجاد یک پروژه WPF

نرم افزار ویژوال استودیو (Visual Studio) را اجرا کنید سپس از قسمت منوی نرم افزار گزینه File > New > Project را انتخاب کنید.

material design in wpf 4800 2 تصویر

یک پروژه از نوع WPF ایجاد کنید.

material design in wpf 4800 3 تصویر

مرحله دوم: نصب بسته Material Design in XAML از NuGet

از قسمت منوی نرم افزار گزینه Tools > NuGet Package Mananger > NuGet Package Manager For Solution را انتخاب کنید.

material design in wpf 4800 4 تصویر

در پنجره باز شده، عبارت Material Design in XAML را وارد کنید تا لیست بسته های موجود فیلتر شود. سپس بسته  Material Design Themeرا انتخاب کرده و بر رو دکمه Install کلیک کنید تا نصب این بسته شروع شود.

material design in wpf 4800 5 تصویر

بعد از نصب کامل متریال دیزاین در WPF پیغام زیر نمایش داده خواهد شد.

material design in wpf 4800 6 تصویر

مرحله سوم: افزودن Resource ها

برای افزودن فایل های مربوط به Material Design فایل App.xaml موجود در پروژه را باز کنید.

material design in wpf 4800 7 تصویر

و سپس کد زیر را در قسمت Application.Resources اضافه کنید.

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

این خط از کد بالا برای تنظیم استایل پیشفرض Material برای کنترل های موجود استفاده می شود:

این خط از کد بالا برای تنظیم تم برنامه استفاده می شود. و می تواند به صورت Light یا Dark تنظیم شود.

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

برای مشاهده لیست رنگ های اصلی و تاکیدی موجود در بسته Material Design می توانید به لینک مربوطه مراجعه کنید( رنگ های اصلی در متریال دیزاینرنگ های تاکیدی در متریال دیزاین ).

مرحله چهارم: تنظیم حالت پیش فرض

با اضافه کردن Resource های بالا، اکثر کنترل های WPF با استایل Material Design نمایش داده خواهند شد. با این حال، برای این که رنگ ها به درستی رندر شوند، باید برخی از خاصیت های موجود را خودمان تنظیم کنیم. خاصیت Background و Foreground را به صورت زیر تنظیم کنید:

 

نکته! توجه داشته باشید که هر دو این خاصیت ها را باید به صورت DynamicResource تنظیم کنید تا در صورت تغییر کردن تم نرم افزار در زمان اجرا، این رنگ ها به طور خودکار به روز شوند.

نکته! برای استفاده از کنترل های متریال دیزاین باید از namespace زیر استفاده کنید:

xmlns:materialDesign=”http://materialdesigninxaml.net/winfx/xaml/themes”

مثال

مثال زیر نحوه ایجاد یک دکمه به صورت Material Design را نشان می دهد:

خروجی کد بالا:

material design in wpf 4800 8 تصویر

ساخت یک فرم ثبت نام به روش Material Design در WPF

 material design in wpf 4800 9 تصویر

در فیلم زیر نحوه ساخت فرم ثبت نام در WPF با استفاده از متد طراحی Material نشان داده شده است:


باکس دانلود
شناسه:
۴۸۰۰
فرمت فایل:
rar
اندازه فایل:
۱۳٫۱۶ مگابایت
مطالب مرتبط
تفاوت WPF با Windows Forms چیست
ثبت نظر
ریفریش کنید!
نظرات کاربران (۸ مورد)
  1. تصویر آواتار کاربر 0
    fatemeh چهارشنبه , ۲۶ دی

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

    • تصویر آواتار کاربر 124
      AmRoچهارشنبه , ۲۶ دی

      سلام...برای اینکه فقط استایل متریال دیزاین (یا هر استایل دیگه ای) روی یه فرم اعمال بشه، به جای اضافه کردن Resource های متریال دیزاین تو فایل App.xaml اونا رو تو همون پنجره ایی که میخواین اعمال بشه اضافه کنید. مثلا اگر بخواید فقط روی WinLogin.xaml اعمال بشه، باید Resource ها رو به تگ Window اضافه کنید (اگه مثال گفته شده رو ببنید، نحوه اضافه کردن به Window هم نشون داده شده). برای سوال دوم هم...رو solution کلیک راست کنید و از بخش Add گزینه Existing Project رو انتخاب کنید.

  2. تصویر آواتار کاربر 0
    silver یکشنبه , ۳۰ دی

    سلام ببخشید چطوری میشه آیکن به دکمه اضافه کرد؟ من طبق فیلم هایی که دیدم میخواستم از {materialDesign iconpack} استفاده کنم ولی اصلا همچین چیزی برام نمیاره. باید کد خاصی توی resource ها یا app.xaml وارد کنم؟ لطفا راهنماییم کنین ممنون

    • تصویر آواتار کاربر 124
      AmRoسه شنبه , ۲ بهمن

      سلام...همونطور که تو آموزش هم گفته شده، باید فضای نام (namespace) متریال دیزاین رو به تگ window اضافه کنید. اگر این فضای نام رو اضافه کنید، کنترل ها رو میاره:xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

  3. تصویر آواتار کاربر 0
    اصغر یکشنبه , ۲۱ بهمن

    سلام نمیتونم فیلم اموزشی دانلود کنم.روی +G میزنم صفحه گوگل میاد روی اون هم میزنم ولی باز لینک رو نمیاره

    • تصویر آواتار کاربر 124
      AmRoپنج شنبه , ۲۵ بهمن

      بعد از اینکه رو G+ کلیک کردید، می تونید از لینکی که در بخش دانلود گذاشتم فایل ها رو دانلود کنید.

  4. تصویر آواتار کاربر 0
    سجاد یکشنبه , ۲۱ بهمن

    سلام. datepicker متریال دیزاین رو چجوری میشه فارسی کرد؟ ممنون میشم راهنمایی کنید!

    • تصویر آواتار کاربر 124
      AmRoپنج شنبه , ۲۵ بهمن

      فعلا datepicker از تاریخ فارسی پشتیبانی نمی کنه