آموزش Microsoft Expression Blend

[آبجی]

دوستان لطفا دانلود کنند تا ادامه بدیم.

Microsoft Expression Blend 2

[آبجی]

محیط طراحی
هر پروژه در Expression Blend دارای تعدادی فایل می باشد که اکثر آن ها فایل های متداول در پروژه های WPF هستند. مانند فایل های Windows, Pages, User Controls و Resource Library ها. محیط Expression Blend دو view‌ برای طراحان در نظر گرفته است، Design view‌ و XAML code view.
با استفاده از Design view شما می توانید با استفاده از ابزارها و کنترل های موجود در پانل ها و art-board، بصورت visually اقدام به ایجاد و مدیریت element های مورد نظر خود نمایید.
در قسمت XAML code view نیز امکان تغییر دادن کد های XAML موجود را بصورت مستقیم فراهم می آورد.

همچنین محیط کار Expression Blend دارای دو حالت، برای طراحی و نیز برای ایجاد Animation می باشد که برای منتقل شدن از یک حالت به دیگری از کلیدهای F6 و F7 استفاده می کنیم.

پانل های محیط کار
پانل های موجود در محیط کار شما را قادر خواهند ساخت تا ابزارها و اطلاعات مربوط به object‌ های موجود در Art-board را مدیریت کنید. پانل های مختلف امکان کنترل properties و appearance مریوط به element های موجود را نیز برای شما فراهم می کنند. هر پانل دارای تعدادی زیرپانل می باشد که اعمال مختلف آن پانل را دسته بندی می کنند.
شما می توانید با نشان دادن یا پنهان کردن پانل های مختلف، محیط کار خود را customize‌ نمایید. برای این کار می توانید از منوی Window استفاده کنید. برای بازگرداندن پانل ها به وضعیت قبلی گزینه Reset را از منوی Window انتخاب نمایید. Windows > Reset
همه پانل های محیط کار Expression Blend بصورت پیش فرض و به ترتیبی که شما انتخاب می کنید به اطراف محیط کار dock می شوند. البته شما می توانید پانل ها را به دلخواه خود undock کنید.

در زیر لیستی از پانل های موجود در محیط کار و توضیح مختصری در مورد هر کدام آورده شده است:
Toolbox
شامل لیستی از ابزار می باشد که برای ایجاد و دستکاری element ها بر روی art-board استفاده می شوند. این ابزار شما را قادر می سازد تا بصورت visually اشکال و object های برداری (vector) ایجاد نمایید.
Project
شامل لیستی از component ها، کنترل ها و متعلقات پروژه و نیز reference های خارجی اضافه شده به پروژه می باشد.
Properties
شما را قادر می سازد تا property های مربوط به ظاهر و موقعیت element های Art-board‌ را (مانند opacity, stroke, fill color , …‌) تنظیم نمایید.
Resources
شامل لیستی از تمام resource های موجود در پروژه است. مانند style ها ، template ها و brush ها.
Interaction
شامل زیرپانل هایی است که designer با استفاده از آن ها می تواند trigger ها و animation ها را ایجاد کند.

[آبجی]

Art-board

Art-board محیط اصلی طراحی تمام اشیا در expression blend است. با استفاده از محیط ترکیبی Art-board، بین طراحی ها و animation ها هماهنگی ایجاد می شود و هر صحنه ای که شما ایجاد می کنید به راحتی به معرض نمایش در می آید.
Art-board این امکان را به شما می دهد تا بین Design view و XAML code view تغییر حالت دهید.البته بیشترین زمان شما در حالت Design view‌ سپری خواهد شد زیرا تمام جزئیات XAML مورد نیاز توسط Designer بصورت خودکار ایجاد می شوند.


ساختار پروژه

ساختار پروژه های Expression Blend شبیه به پروژه های Visual Studio می باشد. در واقع هر دو محیط از نوع فایل های یکسانی استفاده می کنند از این رو هر فایل پروژه را می توان در هر کدام از این دو محیط باز کرده و به این ترتیب یک side-by-side development شکل داد.تنها تفاوت میان این دو محیط این است که Expression Blend در صورت افزودن یک folder جدید به پروژه، namespace جدیدی برای آن ایجاد نمی کند و همه فایل های پروژه در یک namespace مدیریت می شوند.
در یک پروژه Expression Blend، هر Screen توسط page ها ساخته می شود. هر page نیز در قالب یک فایل XAML تعریف شده و نگهداری می شود. یک فایل XAML چیزی بیش از یک نمای serialize‌ شده از همه صحنه ها و فرزندان یک Element در قالب XML‌ نیست. همچنین هر page‌ دارای یک فایل code-behind می باشد که شامل کدهایی برای مدیریت و کنترل تمامی event ها و سایر اعمال برنامه نویسی در Application است.

ایجاد یک فایل جدید پروژه

چهار نوع فایل مختلف وجود دارند که می توانند به یک پروژه Expression Blend اضافه شوند. مراحل زیر اعمال لازم برای ایجاد و افزودن یک نوع فایل جدید را به پروژه توضیح می دهد:
1- منوی File > New Item را انتخاب کنید. اکنون از شما خواسته می شود تا یکی از گزینه های زیر را انتخاب نمایید:
Window – یک top-level window و یا یک dialog window‌ به پروژه اضافه می کند.
Page – یک page به پروژه شما اضافه می کند که این page توسط عمل navigation قالب دسترسی خواهد بود.
UserControl – یک user control به پروژه اضافه می کند.
ReourceDictionary – یک فایل XAML تولید می کند که شامل resource هایی مانند Style ها و control template ها می باشد که می توانند در میان پروژه ها به اشتراک گذتشته شوند.
2- یک نام برای پروژه تعیین کنید.
3- اگر یکی از گزینه های Window, Page‌و یا UserControl را انتخاب کرده اید می توانید در این قسمت اضافه شدن یک فایل code-behind را مشخص نمایید.


ساخت و گسترش یک پروژه

Expression Blend یک designer‌ با امکانات بسیار ساده و اساسی برای build یک پروژه در اختیار شما قرار می دهد. از طریق گزینه های موجود در منوی Project‌، designer می تواند اعمال build, clean و test را بر روی پروژه نجام دهد. انتخاب گزینه Test از منوی Project یا فشار دادن کلید F5 موجب build‌ شدن پروژه و اجرای آن برای تست های visual خواهد شد.
از آنجایی که Blend اصولا یک ابزار طراحی است، مدیریت جزئیات deployment پروژه را به عهده Visual Studio می گذارد.

برای deployment پروژه Expression Blend توسط Visual Studio به ترتیب زیر عمل کنید:

1- بر روی folder پروژه در پانل project راست کلیک کرده و گزینه Edit Externally را انتخاب نمایید. اگر Visual Studio‌ بر روی کامپیوتر شما نصب شده باشد،پروژه بصورت خودکار توسط آن باز می شود.

2- تنظیمات مربوط به deploying و security را در صورت نیاز تغییر داده و پروژه را deploy نمایید.
به دلیل این که هر پروژه Expression Blend اساسا یک WPF application است تنظیمات مربوط به deployment و security آن مانند پروژه های WPF ایجاد شده توسط Visual Studio می باشد و معمولا نیاز به تغییر نخواهد داشت.

[آبجی]

ایجاد Vector Object ها

Expression Blend امکان ایجاد اشکال گرافیکی و نیز UI را بصورت Vector (برداری) فراهم میکند. این نوع از UI‌ ها نسبت به Raster Graphic دارای برتری هایی می باشد.
یک Raster Image یک فایل یا ساختاری است که از مجموعه ای از grid ها یا pixel ها تشکیل می شود. این نوع از تصویر شدیدا به Resolution وابسته بوده و در صورت تغییر در ابعاد تصویر، ناصافی هایی در آن به وجود خواهد آمد.
و اما یک Vector Image اشکال گرافیکی را به صورت مجموعه ای از عناصر هندسی پایه، مانند نقطه، خط و منحنی نگهداری می کند که این امر امکان محاسبه مجدد مقیاس تصویر را تا زمانی که ظاهری صاف و شفاف حاصل شود،‌ فراهم میکند.
بنابراین UI های ایجاد شده توسط تصاویر Vector دارای مزیت هایی نسبت به Raster Image می باشد. به عنوان مثال UI‌ شما در هر مونیتوری و با هر Resolution‌ ی به خوبی نمایش داده می شود در صورتیکه اگر UI شما با Raster Image طراحی شده باشد،‌ دارای ابعاد ثابت خواهد بود و اگر در یک Resolution بالاتر از Resolution خودش قرار بگیرد ناصافی هایی در آن ایجاد میشود و ممکن است چیدمان کنترل ها نیز دچار تغییر شود. البته راهکارهایی برای مقابله با این مشکل Raster Image وجود دارد که یکی از معمول ترین آن ها استفاده از چندین تصویر است که دارای Resolution های محتلفی می باشند (مانند icon ها).
در Expression Blend، Vector Object ها میتوانند خطوط، اشکال گرافیکی و یا کنترل ها باشند که به راحتی قابل ایجاد و تغییر خواهند بود.

Shape ها

Expression Blend دارای ابزارهایی برای ایجاد اشکال پایه ای بر اساس Vector می باشد. این اشکال عبارتند از:
- مستطیل
- بیضی
- خط

البته این اشکال قابلیت تغییر و تبدیل به اشکال پیچیده تر را خواهند داشت.

تغییر اشکال

راه های مختلفی برای تغییر یک شکل ایجاد شده در Expression Blend وجود دارد. به عنوان نمونه برای تغییر شعاع گوشه یک مستطیل میتوانید با استفاده از فلش های موجود در گوشه بالای سمت چپ و drag کردن آن ها شعاع دلخواه را بدست آورید. البته این امر با استفاده از panel نیز امکان پذیر میباشد.

Figure 1

برای اعمال تغییرات بیشتر بر روی یک شکل پایه، باید آن را به یک Path تبدیل کرد. برای این کار از منو گزینه زیر را انتخاب کنید:
Object➪Path➪Convert to Path

توجه داشته باشید که شکل تبدیل شده به Path ویژگیهای قبلی خود (که به دلیل شکل بودن داشت) را نخواهد داشت.

Path ها:

هر شکل Vector متشکل از path های مجزا است که مختص به خود آن شکل می باشند. این اشکال بسیار انعطاف پذیر بوده و قابل تبدیل به همه اشکال مورد نیاز شما هستند. Path ها از نقطه ها، خطوط و منحنی ها تشکیل شده اند و برای ایجاد شکل های خاص برای کنترل ها مورد استفاده قرار می گیرند. همچنین از path ها می توان به عنوان مسیری که مشخص کننده مسیر حرکت در یک animation خواهد بود، استفاده کرد.
ابزارهای Pen, Pencil و Line در نوار ابزار برای ایجاد path مورد استفاده قرار می گیرند. Path های رسم شده توسط این ابزارها را می توان با ااستفاده از ابزارهای Select با هم ترکیب کرده و اشکال جدیدی بوجود آورد.

Path ها را می توان در سه دسته اصلی دسته بندی کرد:

- Straight Lines: قطعه خط های مستقیم که ممکن است توسط Pen و یا Line ایجاد شده باشند.
- Curves: قطعه خط های دارای انحنایی هستند که شامل یک handle برای کنترل میزان انحنای آن می باشند.
- Freeform: این path ها توسط ابزار Pencil ‌ ایجاد می شوند و مانند نقاشی کردن می باشند. این path ها میتوانند به هر شکلی باشند.

Path های ترکیبی:

شما میتوانید با ترکیب دو یا چند path مختلف، path های مرکب بوجود بیاورید. در path های ترکیبی،‌ تمام نقاط محل تلاقی دو path حذف خواهند شد. یعنی اگر دو path قبل از ترکیب دارای نقاط تلاقی باشند، در صورت ترکیب آن ها، این نقاط از path حاصل حذف خواهند شد. نکته دیگر این که path ترکیبی حاصل، ویژگی های گرافیکی زیری ترین path ‌ را خواهد داشت.
برای ترکیب کردن یک شکل با یک path ، آن شکل ابتدا باید به path تبدیل شود و بعد از آن عمل ترکیب انجام شود.

مثال زیر مراحل لازم برای ایجاد یک path ترکیبی را نشان میدهد:
1- ابتدا ابزار بیضی (Ellipse) را از toolbox انتخاب کنید و یک دایره بر روی صفحه رسم کنید. برای اینکه شکل شما دقیقا یک دایره باشد هنگام رسم، کلید shift را فشار دهید. سپس آن را به path تبدیل کنید.
2- یک کپی از دایره رسم شده ایجاد کنید و آنرا طوری روی دایره قبلی قرار دهید تا مقداری با هم همپوشانی ایجاد کنند.
3- هر دو دایره را انتخاب کرده و Object➪Path➪Make Compound Path را از منو انتخاب کنید.
نتیجه حاصل مانند شکل زیر خواهد بود:

Figure 2

هر path ترکیبی که ایجاد میشود را می توان دوباره به اجزای تشکیل دهنده اش تجزیه نمود. برای این کار Object➪Path➪Release Compound Path را از منو انتخاب نمایید.

[آبجی]

Transform Panel

با استفاده از این پانل میتونیم ویژگی های مربوط به Transform یک object رو کنترل کنیم. قسمت های مختلف این پانل عبارتند از:

Position or Translate : موقعیت یک object رو بر اساس مختصات x و y اون رو صفحه Artboard تنظیم میکنه.
Rotation: زاویه قرار گرفتن یک object رو بر حسب درجه مشخص میکنه.
Scale: مقیاس یک object رو در راستای محورهای x و y مشخص میکنه.
Skew: میزان کج بودن object رو میشه تنظیم کرد که میتونه در عرض یا در ارتفاع باشه (width or height).
Flip: میشه یه object رو بصورت افقی یا عمودی منعکس کرد. (مثل آینه).

Brushes Panel

با استفاده از این قسمت میتونین تنظیمات مربوط به رنگ و گرافیک یک object رو تغییر بدین. رنگ background، رنگ بردار، رنگ foreground و ...

با توجه به تصویر قسمت های مخلف رو توضیح میدیم:
Fill: رنگ Background
Stroke: رنگ حاشیه
OpasityMask: رنگی که به عنوان Transparent Color انتخاب میشه.

حالا برای هر کدوم از این قسمت ها میشه به روش های مختلفی رنگ اختصاص داد:
No Brush: بدون رنگ.
Solid Brush: تک رنگ (مثل فقط آبی یا فقط قرمز!)
Gradient Brush: رنگ طیفی (مثلا یه طرف آبی باشه و رفته رفته تبدیل بشه به رنگ سفید)
Tile Brush: یه شکلی رو انتخاب می کنید و اون بصورت tile شده به عنوان brush انتخاب میشه.
Resource Brush: یه brush که قبلا تو Resource های پروژه بوده انتخاب میشه.

همه قسمت ها به اندازه کافی ساده هستند و نیازی به توضیح ندارند. فقط توضیحات مختصری در مورد Gradient Brush میدم .

Gradient Stops
مکان هایی هستند که یک طیف رنگ اونجا تموم میشه و طیف رنگ بعدی از اونجا شروع میشه.

در ابتدا که حالت Gradient Brush رو از پانل انتخاب میکنید دو Gradient Stop وجود داره که به این معنیه که دو طیف رنگ داریم. برای تعیین رنگ هر کدوم، رو Gradient Stop کلیک میکنیم و رنگ مورد نظر رو انتخاب میکنیم.
برای ایجاد یک Gradient Stop جدید کافیه که رو نوار طیف (که Gradient Stop ها روی اون هستن) کلیک کنید تا در اون نقطه یک Gradient Stop جدید ایجاد بشه.
برای جابجا کردنشون هم کافیه با موس بگیرین و جابجاشون کنید.
برای حذف یک Gradient Stop اونو با موس بگیرید و به بیرون drag کنید.

بصورت Linear Gradient



بصورت Radial Gradient

تصویر بالا یک Rectangle رو نشون میده که سه طیف رنگش قرمز، آبی و زرد داره.

برای اضافه کردن یک Brush که خودمون تنظیمات رنکشو انجاو دادیم به Resource ها، کافیه که رو دکمه Add to Resources کلیک کنید.

[آبجی]

ساخت Button های سفارشی با Style های مختلف

مقدمه

در این مقاله قصد داریم تا با استفاده از اشکال دلخواه، Button ایجاد کنیم که تمام ویژگی های Button را داشته باشد. برای این کار در ابتدا با استفاده از ابزار طراحی مثل Pen یا Rectangle و ... شکل مورد نظر خود را رسم می کنیم که در واقع به عنوان شکلی پایه برای Button ما خواهد بود. سپس این شکل پایه را به Button ای تبدیل می کنیم که تمام ویژگی های یک Button استاندارد را دارد اما افکت های گرافیکی نخواهد داشت. برای حل این مشکل نیز از Style ها استفاده خواهیم کرد و با ایجاد یک Style دلخواه، به Button خود ظاهری مناسب با افکت های زیبا خواهیم داد.


شروع کار

ابتدا یک پروژه WpfApplication ایجاد کنید.
شکلی را که میخواهید Button شما به آن شکل باشد را رسم کنید. در این مثال ما از یک مستطیل استفاده کردیم که گوشه های آن را گرد کرده ایم. برای گرد کردن گوشه های یک مستطیل می توانید از Property با نام های Radius X و Radius Y آن استفاده کنید.
رای تبدیل شکل رسم شده به Button از منوی Tools گزینه Make Button را انتخاب نمایید.
ا این کار پنجره ای باز می شود که در آن نام Style ای را که این Button دارا خواهد بود می نویسیم و نیز مشخص می کنیم که این Style در کدام قسمت های برنامه فابل دسترسی باشد. با انتخاب Application، این Style در کل برنامه قابل استفاده خواهد بود.
حال شکل رسم شده به یک Button تبدیل شده است
این Button ایجاد شده تمام ویژگی های یک Button را دارد با این تفاوت که هیچ افکت تصویری ندارد، مثلا زمانی که mouse را بر روی آن ببرید هیچ تغییری در ظاهر Button مشاهده نخواهید کرد. برای حل این مشکل باید Style ای را که در ابتدا برای button ایجاد شد تعییر دهیم تا به نتیجه مطلوب خود برسیم.

Style

برای تغییر style مربوط به button بر روی آن right click کرده و Edit Control Parts (template) -> Edit Template را انتخاب کنید
با این کار ما وارد محیط درونی button می شویم و می توانیم اجزای تشکیل دهنده ان را ببینیم
توضیحات:
1- اجزای تشکیل دهنده Button را نشان می دهد.
> Rectangle : به عنوان زمینه button قرار می گیرد و مشخص کننده رنگ آن است.

> Content Presenter : نمایش دهنده Text مربوط به button می باشد.

> Grid : به عنوان اسکلت کلی button بوده و در واقع نقش container را برای Rectangle و Content Presenter بازی می کند

2- StoryBoard های موجود را (در صورت وجود نشان میدهد)
3- Trigger های مربوط به button را نشان می دهد (توضیحات کامل در ادامه همین بخش)
4- قسمت انتخاب شده از اجزای button را مشخص می کند.


برای تغییر رنگ رمینه Button باید رنگ زمینه مستطیل داخل آن را تغییر دهیم. برای این منظور ابتدا مستطیل را انتخاب کنید.حال در پانل Properties مربوط به مستطیل با استفاده از قسمت Brushes می توانید عمل تغییر رنگ را انجام دهید.
وضیحات:
1- Fill: رنگ داخل Stroke: رنگ حاشیه
2- نوع brush (در بخش ها قبلی توضیح داده شده است)
3- Gradient Stop ها را نشان میدهد (اگر نوع brush را gradient انتخاب کرده باشیم) (در بخش ها قبلی توضیح داده شده است)

اگر دقت کنید خواهید دید که Gradient Stop A و B، در رنگ مستطیل چگونه تاثیر دارند.

اکنون می توانیم شروع کنیم:
می خواهیم رنگ زمینه button را gradient کنیم. برای این کار می توان مانند روش بالا عمل کرد و با انتخاب نوع brush به gradient brush، و تنظیم gradient stop ها به هدف مورد نظر رسید. اما این روش یک عیب بزرگ دارد و آن این است: فرض کنید شما تعدادی gradient stop ایجاد کرده اید و رنگ هر کدام را مشخص نموده اید. شاید پس از چند دقیقه خواستید طیف رنگ زمینه را تغییر دهید، مثلا از آبی به سبز! پس مجبور هستید رنگ تک تک gradient stop ها را دوباره تغییر دهید که کاری زمان بر می باشد. اما راه چاره چیست؟
برای رفع این مشکل از دو لایه برای رنگ زمینه استفاده خواهیم کرد که لایه ها همان مستطیل ها هستند.
لایه اول یک solid brush است که طیف کلی زمینه را مشخص می کند، مانند آبی یا سبز و لایه دوم به عنوان لایه افکت بر روی لایه اول قرار گرفته و به آن حالت gradient زیبایی خواهد داد. یکی از مزایای این روش این است که با تغییر رنگ لایه اول، طیف کل gradient تغییر خواهد کرد و نیازی به تغییر رنگ gradient stop ها نخواهیم داشت زیرا آن ها بر روی لایه دوم قرار دارند.