بررسی DataBinding در WPF

سیستم Data Binding در WPF یک راه ساده و قدرتمند برای نمایش و کار با داده ها را برای برنامه نویس فراهم می کند. کنترل های مختلف مثل Button و ListView به صورت توکار دارای قابلیت های قدرتمند Data Binding در WPF هستند که به برنامه نویس اجازه می دهد تا یک داده واحد یا مجموعه ای از داده ها را به خصوصیات یک کنترل Bind کند. قابلیت Data Binding در WPF  فواید زیادی نسبت به مدل های پیشین دارد، که از این فواید می توان به محدوده بیشتری از خصوصیات کنترل ها از data binding پشتیبانی می کنند، نمایش انعطاف پذیر داده ها در رابط کاربری و جداسازی شفاف منطق برنامه از رابط کاربری اشاره نمود.

مفهوم Data Binding

بدون در نظر گرفتن اینکه چه عنصری قرار است به چه منبع داده ای بایند شود، Data Binding همیشه مدل زیر را دنبال می کند :

Data Binding diagramشکل بالا مشخص می کند که عمل Data Binding مانند پلی است میان یک منبع داده و یک پراپرتی مقصد که البته همیشه دو طرفه نیست. به صورت معمول هر بایندینگ شامل چهار مولفه است : منبع داده، شیء مقصد، پراپرتی مقصد و مسیری در منبع داده که مقدار از آن خوانده می شود. به طور مثال اگر می خواهید پراپرتی Title در شیء Customer را در یک TextBox نمایش دهید، منبع داده شما شیء Customer، شیء مقصد نام آن TextBox، پراپرتی مقصد Text و مسیر منبع داده Title خواهند بود. پراپرتی مقصد باید یک Dependency Property باشد. بسیاری از پراپرتی های UIElement در WPF یک Dependency Property هستند و اکثر آن ها اگر read only نباشند، از data binding به صورت پیش فرض پشتیبانی می کنند.

جهت جریان داده ها

در WPF جریان داده در سیستم Data Binding می تواند یک طرفه (One Way)، دو طرفه (Two Way) و یا یک طرفه به سمت منبع (OneWayToSource) باشد. وجود این روش ها باعث می شود تا شما به عنوان یک برنامه نویس قادر به ساخت فرم های ورود داده بسیار انعطاف پذیر باشید. تنظیم حالت بایندینگ با تغییر پراپرتی Mode در آبجکت Binding مورد نظر قابل انجام است. شکل زیر به درک بهتر این روش ها کمک می کند :

Data flow directions

  • OneWay : تغییر در منبع داده باعث به روز رسانی پراپرتی مقصد می شود اما تغییر در پراپرتی مقصد باعث به روز رسانی منبع داده نخواهد شد. این حالت بایندینگ برای نمایش داده ها به صورت فقط خواندنی کاربرد دارد. به طور مثال شما می خواهید لیستی از محصولات را به مشتری نمایش دهید تا او بتوانید یکی از آن ها را انتخاب کند. این روش برای کنترل هایی که قابلیت ویرایش به کاربر نمی دهند (مثل ListView) کاربرد دارد.
  • TwoWay : تغییر در منبع داده باعث به روز رسانی پراپرتی مقصد و تغییر در پراپرتی مقصد باعث به روز رسانی منبع داده خواهد شد. این نوع بایندینگ مناسب فرم های ورود و ویرایش داده ها هستند که به صورت کامل با کاربر تعامل دارند. پیش فرض حالت بایندینگ اکثر پراپرتی ها حالت OneWay است اما برخی پراپرتی ها (مثل پراپرتی Text در TextBox) به صورت پیش فرض حالت TwoWay دارند.
  • OneWayToSource : این حالت برعکس حالت OneWay است به این صورت که با تغییر پراپرتی مقصد منبع داده به روز رسانی خواهد شد.
  • OneTime : برای مقدار دهی اولیه به پراپرتی مقصد بکار می رود. همانطور که از نامش پیداست فقط یک بار و برای اولین بار پراپرتی مقصد را مقدار دهی می کند و تغییرات بعدی منبع داده را بر روی پراپرتی مقصد اعمال نخواهد کرد. این حالت برای مواقعی مناسب است که منبع داده استاتیک است، یا در طول عمر یک شیء احتمال تغییر کردن آن وجود ندارد.

فقط توجه داشته باشید که برای اینکه در حالت های OneWay و TwoWay بتواند تغییرات را تشخیص دهد باید یک مکانیزم آگاه سازی تغییرات مثل INotifyPropertyChanged را برای منبع داده ها پیاده سازی کرده باشید.

چه زمانی منبع داده به روز خواهد شد؟

بایندینگ در حالت های TwoWay و OneWayToSource به تغییرات مقدار پراپرتی مقصد حساس می شوند و باید با تغییر مقدار در پراپرتی مقصد، منبع داده را آپدیت کنند. فرض کنید یک TextBox داریم که می خواهیم هنگامی کاربر مقدارش را تغییر داد، منبع داده ما بر اساس آن آپدیت شود. حال به نظر شما چه زمانی منبع داده باید آپدیت شود؟ بلافاصله بعد از اینکه کاراکترها را در TextBox وارد کرد یا هنگامی که کنترل Focus را از دست داد یا زمانی که کاربر بر روی یک Button کلیک کرد؟ پراپرتی UpdateSourceTrigger در بایندینگ مشخص می کند که چه زمانی منبع داده باید به روز رسانی شود. این پراپرتی می تواند یکی از چهار مقدار زیر باشد :

  • PropertyChanged : به محض اینکه مقدار پراپرتی تغییر کند، سورس آپدیت می شود.
  • LostFocus : زمانی که Focus کنترل به کنترل دیگری منتقل می شود، سورس آپدیت خواهد شد.
  • Default : حالت پیش فرض یک کنترل است که به طور مثال برای کنترل TextBox برابر LostFocus و برای کنترل CheckBox برابر PropertyChanged است.
  • Explicit : تا زمانی که متد UpdateSource صدا زده نشود، سورس آپدیت نخواهد شد.

اگر UpdateSourceTrigger یک TextBox را به PropertyChanged تغییر دهید ممکن است برنامه شما با مشکل مواجه شود، زیرا هر بار که کاربر کاراکتری را در TextBox وارد می کند منبع داده به روز رسانی خواهد شد و این سر بار زیادی (مخصوصاً اگر منبع داده دیتابیس باشد) به برنامه تحمیل خواهد کرد. در اکثر مواقع استفاده از Explicit مرقون به صرفه تر و بهتر از دیگر روش هاست، زیرا بهتر است تا کاربر دستور ذخیره را صادر نکرده، منبع داده به روز رسانی نشود.

یک مثال ساده

بهتر است یک مثال کوچک را برای درک بهتر موضوع اجرا کنید. یک اپلیکیشن WPF جدید بسیازید و کدهای XAML زیر را بین تگ های <Grid> و </Grid> پنجره خود قرار دهید :

<TextBox Name="textBox1" Width="167" />
<Label Content="{Binding ElementName=textBox1,Path=Text,UpdateSourceTrigger=PropertyChanged, Mode=OneWay}" Name="label1" />

همانطور که مشاهده می کنید در اینجا پراپرتی Content (پراپرتی مقصد) از شیء label1 (شیء مقصد) را به پراپرتی Text (مسیر منبع داده) منبع داده (شیء textBox1) بایند کرده ایم و با تغییر UpdateSourceTrigger به PropertyChanged مشخص کرده ایم که به هنگام تایپ کردن کاربر در TextBox متن Label تغییر کند. اگر برنامه را اجرا کنید مشاهده خواهید کرد که با تایپ کاراکتر درون TextBox متن Label بلافاصله تغییر خواهد کرد.

farasun.wordpress.com

منبع این نوشته : MSDN

Subcribe to Farasun feedمشترک فراسان شويد

مزیت های استفاده از WPF به عنوان رابط کاربری

WPF یک زیر سیستم گرافیکی جدید برای توسعه رابط کاربری در ویندوز است که برای اولین بار به عنوان بخشی از دات نت فریم ورک 3.0 عرضه شد. WPF برای رندر کردن گرافیک صفحه به جای استفاده از سیستم GDI از DirectX استفاده می کند و به همین دلیل قادر به ایجاد گرافیک های پیچیده تری است. در این مطلب به برخی از مزیت های استفاده از WPF به عنوان رابط کاربری اشاره خواهیم کرد.

1) ظاهر زیبای رابط کاربری طراحی شده : تمام اجزای رابط کاربری در WPF با استفاده از Direct3D رندر می شوند و می توانند دارای گرافیک بسیار پیچیده ای باشند که از اجزای مختلفی تشکیل شده اند. با WPF می توانید عکس، صدا، ویدئو و متن های گرافیکی پیچیده را در رابط کاربری خود داشته باشید، بدون اینکه سرعت پاسخگویی UI به کاربر را تحت تاثیر قرار دهید. اجازه استفاده از فایل های مالتی مدیا در پنجره های ویندوز و قابلیت هایی مثل Styles و Templates به طراحان اجازه می دهد تا یک رابط کاربری گرافیکی زیبا و چشم نواز بسازند. نرم افزارهایی که رابط کاربری شان را با WPF توسعه داده اند، از ظاهر بسیار زیبایی برخوردار هستند. شما می توانید یک رابط کاربری طراحی شده توسط WPF را به راحتی از بقیه تشخیص دهید. مثال قابل درک یک رابط کاربری زیبا و انطاف پذیر که با WPF توسعه داده شده، Visual Studio 2010 و Expression blend هستند. در شکل زیر نمایی از برنامه Family Show را مشاهده می کنید که UI آن با WPF طراحی شده است.

Family Show

2) جداسازی رابط کاربری از منطق برنامه : تعریف اجزای رابط کاربری در WPF در یک فایل جداگانه و به زبان تعریفی XAML انجام می گیرد. کدهای C#یا VB شما که منطق برنامه را شکل می دهند در فایل جداگانه ای قرار می گیرند. WPF جداسازی شفافی میان رابط کاربری و دیگر اجزای برنامه ایجاد می کند. این قابلیت به شما اجازه می دهد تا به راحتی از الگوهای طراحی MVP یا MVVM برای طراحی نرم افزار خود استفاده کنید. این جداسازی کار توسعه و نگهداری نرم افزار را در دراز مدت بسیار آسان می کند.

3) قالبیت اجرا در مرورگر : اپلیکیشن های WPF علاوه بر اجرا به صورت stand alone قادر به اجرا درون یک مرورگر به صورت هاست شده، هستند. شما با استفاده از قابلیت XBAP می توانید اپلیکیشن WPF خود را در مرورگرهای IE و Firefox به همان صورت که در دسکتاپ اجرا می شود، اجرا کنید. در حقیقت مایکروسافت با ایجاد این قابلیت یک قدم به یکپارچه سازی توسعه ویندوز و وب نزدیک تر شده است. اپلیکیشن های XBAP همان قابلیت های یک اپلیکیشن تحت دسکتاپ WPF را به شما در قالب یک برنامه هاست شده در مرورگر ارائه می کنند.

4) استفاده از XAML برای تعریف اجزای UI : موفقیت یک زبان نشانه گذاری به نام HTML برای توسعه رابط کاربری وب، باعث شد تا مایکروسافت به فکر ایجاد یک زبان نشانه گذاری برای طراحی UI در ویندوز بیفتد. نتیجه این تلاش، زبان XAML است که هم اکنون در WPF و Silverlight مورد استفاده قرار می گیرد. XAML یک زبان تعریفی بر اساس XML است که منطق برنامه را از رابط کاربری جدا می کند و یادگیری آن آسان است. تعریف تمام اجزای رابط کاربری در WPF با زبان XAML انجام می گیرد. شما می توانید خصوصیات و رفتار هر یک از کنترل های ویژوال و غیر ویژوال رابط کاربری خود را به جای استفاده از برنامه نویسی روالی، با یک زبان declarative  انجام دهید. در آخر کدهای XAML می توانند به عنوان یک اسمبلی مدیریت شده کامپایل شوند.

Visual Studio StartPage XAML source

5) سازگاری با WinForms : در WPF می توانید از فرم های ویندوزی معمولی هم استفاده کنید و در واقع WPF سازگاری کاملی با WinForms و API ویندوز دارد. با استفاده از کلاس های ElementHost و WindowsFormsHost قادر به استفاده از اجزای WinForms در WPF خواهید بود. همچنین در پروژه های WinForms خود می توانید از اجزای WPF به خوبی استفاده کنید.

6) سرعت رندر بالا : WPF به جای استفاده از GDI+ برای رندر کردن رابط کاربری، به صورت مستقیم از DirectX استفاده می کند. در این حالت رندر کردن گرافیک های بکار رفته در رابط کاربری به جای اینکه بر عهده CPU باشد، بر عهده GPU خواهد بود. WPF با استفاده از شتاب دهنده سخت افزاری گرافیک ها و افکت های رابط کاربری را با سرعت بیشتری اجرا می کند.

7) Data Binding قوی و انعطاف پذیر : WPF به صورت توکار دارای قابلیت های Data Binding فوق العاده انعطاف پذیر و موثری است. شما در WPF تقریباً می توانید هر منبع داده ای را به مشخصه های مختلف کنترل های پنجره bind کنید. به طور مثال کوئری های LINQ یا مجموعه ای از کلاس های شامل داده می توانند به کنترل هایی مثل ListView و DataGrid بدون احتیاج به نوشتن کد اضافی Bind شوند. WPF از سه حالت Data binding پشتیبانی می کند: 1- One Way : کلاینت دسترسی فقط خواندنی به اطلاعات دارد و زمانی که سورس آپدیت می شود خودش را آپدیت می کند 2- TwoWay : تغییر کردن سورس باعث آپدیت شدن کلاینت و تغییر کردن اطلاعات کلاینت باعث آپدیت شدن سورس می شود. این روش برای فرم های Editable بسیار مناسب است 3- OneWayToSource : بر عکس روش OneWay است، زمانی که اطلاعات کلاینت توسط کاربر تغییر می کند، سورس را آپدیت می کند.

8 ) سرویس های مالتی مدیا : در پنجره های WPF شما می توانید از فایل های image, audio و video به راحتی استفاده کنید. WPF یک سیستم انیمیشن خوب به علاوه قابلیت رندر کردن دو بعدی و سه بعدی فراهم می کند. قابلیت های 3 بعدی در WPF زیر مجموعه ای از قابلیت های فراهم شده توسط Direct3D هستند که این باعث می شود شما توانایی طراحی رابط کاربری 3 بعدی را داشته باشید.

9) Templates & Styles : در WPF شما می توانید ظاهر یک عنصر را با استفاده از مشخصاتش تعریف کنید یا اینکه از Template و Style برای این کار استفاده کنید. Style مجموعه ای از مقادیر propertyهاست که می تواند بر روی یک عنصر اعمال شود. Style در WPF همان نقشی را که CSS در صفحات وب بازی می کند، بر عهده دارد. تمپلیت ها نیز مکانیزمی برای سفارشی کردن ظاهر کنترل های ویژوال رابط کاربری در WPF است که به همراه سیستم Style یک راه حل جامع و مناسب برای شکل دهی ظاهر UI به شما ارائه می کنند.

10) توانایی کار کردن برنامه نویسان و طراحان با همدیگر : WPF به صورتی پیاده سازی شده است که یک برنامه نویس بتواند بدون داشتن کد XAML یک پنجره برای آن برنامه نویسی کند. همانطور که اشاره شد، در WPF جداسازی شفافی از منطق برنامه و رابط کاربری وجود دارد که این امر باعث می شود تا ما بتوانیم طراحی رابط کاربری را به یک طراح بسپاریم و در همان حال منطق برنامه را بدون نیاز به داشتن UI پیاده سازی کنیم. طراحان می توانند با ابزاری مثل Expression blend پنجره های رابط کاربری را به خوبی طراحی کنند، و توسعه دهندگان به پیاده سازی منطق برنامه در ویژوال استادیو مشغول باشند.

farasun.wordpress.com

Subcribe to Farasun feedمشترک فراسان شويد

Kaxaml یک ویرایشگر خوب برای فایل های xaml

اگر با WPF یا سیلورلایت آشنایی داشته باشید حتماً می دانید فایل های xaml به چه دردی میخورند! Xaml یک زبان بر مبنای XML است که برای طراحی رابط کاربری اپلیکیشن های WPF و Silverlight مورد استفاده قرار می گیرد. با استفاده از این زبان، می توانید رابط های کاربری بسیار زیبایی خلق کنید.

kaxaml

برنامه نویسانی که از WPF در پروژه هایشان استفاده می کنند حتماً از قابلیت های ویرایشگر های ویژوال استادیو و Expression Blend برای ویرایش فایل های Xaml باخبرند. نرم افزارهای فوق امکانات خوبی برای این کار در اختیار شما قرار می دهند. اما یک برنامه نویس همیشه به جز یک محیط توسعه خوب، یک ابزار سبک هم برای ویرایش فایل های برنامه اش کنار می گذارد. به طور مثال من از ویژوال استادیو استفاده میکنم اما برای ویرایش فقط یک فایل سورس سی شارپ هیچ وقت ویژوال استادیو رو باز نمی کنم، بلکه با Notepad++ کارم را انجام می دهم.

kaxaml-shot
برای ویرایش فایل های xaml نیز می توان از ابزارهای سبک تر از ویژوال استادیو و Expression Blend استفاده کرد. Kaxaml یک ویرایشگر بسیار مناسب و سبک برای این منظور است. Kaxaml هم رایگان است و هم اوپن سورس و هم خودش بر مبنای WPF و دات نت فریم ورک 3.0 توسعه یافته است. این برنامه امکانات خوبی همچون پیشنهاد عبارات مرتبط شبیه به Intellisense دارد. چندین فایل xaml را می توانید در تب های جداگانه ویرایش کنید. در حین تایپ کدهایتان می توانید پیش نمایش زنده ای از طرح تان ببینید.
یکی از ویژگی های خوب این برنامه، ویژگی Snippets است که شامل کدهای نمونه xaml است که با آن ها می توانید به یادگیری زبان xaml بپردازید. حتی می توانید قطعه کدهای خود را نیز به Snippets اضافه کنید. ویژگی مناسب دیگر آن، قابلیت ذخیره کردن طرح شما در قالب PNG است.

Kaxaml توسط یکی از اعضای اصلی تیم توسعه WPF مایکروسافت نوشته شده و سورس کد آن در سایت CodePlex در دسترس است.

Kaxaml در نسخه جدید و بتای خود از سیلورلایت 2 پشتیبانی می کند. نسخه بتا را از اینجا و نسخه 1.0 (قدیمی تر) را اینجا دریافت کنید. نسخه بدون نیاز به نصب را نیز از اینجا دریافت کنید.

farasun.wordpress.com

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

مطالب مرتبط :