آموزش Microsoft Expression Blend

با سلام
من میخواستم یه تاپیک شروع کنم واسه آموزش Microsoft Expression Blend از مقدماتی تا پیشرفته.
توضیح اینکه این یه نرم افزاریه واسه طراحی UI‌بر اساس WPF که امکانات فوق العاده ای رو در اختیار برنامه نویسا قرار میده تا یه UI‌ زیبا و در عین حال در چارچوب اصول بسازن.

گفتم ببینم اگه دوستان مایل هستن شروع کنم (آخه فکر کردم شاید همه بلدن و کار بیهوده نکرده باشم) واسه همین یه نظر سنجی گذاشتم تا معلوم شه.

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

من استارتشو میزنم به امید خدا که مفید باشه.
فقط چند تا خواهش دارم از همه دوستان عزیز:

1- لطفا از ایجاد هر گونه پست در این تاپیک به هر منظوری خودداری کنید تا انسجام مطالب حفظ بشه. (به جاش یا یه تاپیک جدید بزنین یا PM‌)

2- من تا اونجایی که میتونم سعی خواهم کرد که مطالب زود به زود update‌بشن ولی اگر تاخیری بوجود اومد به بزرگواری خودتون ببخشین (خدایی سرم شلوغه)

3- اگر مطالب برای عده ای از دوستان ساده و پیش پا افتاده بود، یه کم صبر کنن تا برسیم به مراحل بالاتر.

از مدیران محترم هم تقاضا میکنم که در جهت هر چه بهتر شدن این تاپیک همکاری کنن.

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

jooje

فعلا برای شروع کار لینک دانلود Microsoft Expression Blend رو میذارم با یه عکس از محیطش.
دوستان لطفا دانلود کنند تا ادامه بدیم.

Microsoft Expression Blend 2



چند تا کتاب هم هست که بزودی uplode میکنم و لینکش رو میذارم اینجا.
ان شاالله از هفته بعد* مطالب بصورت طبقه بندی شده ارائه خواند شد.

* پ.ن.
(این هفته نیستم - میرم مسابقه‌)

jooje

ببخشین که دیر شد!

مقدمه
Microsoft Expression Blend ابزار گرافیکی و محاوره ای را برای سهولت در ایجاد برنامه های قدرتمند بر پایه

.NET Framework 3 , 3.5

در اختیار کاربران قرار میدهد. این محیط با دارا بودن ابزار ساده جهت افزایش بهره وری و نیز کاهش چرخه کارها بین designer ها و developer ها طراحی شده است.
به خصوص Expression Blend این امکان را به Designer ها می دهد تا رابط های کاربری بر پایه WPF را به سادگی ایجاد نمایند. همچنین Designer ها بدون آشنایی با XAML می توانند به طراحی المان های گرافیکی بپردازند.
Expression Blend چیزی فراتر از یک ابزار ساده جهت ایجاد animation و یا مدیاهای online‌ میباشد. Designer ها می توانند با استفاده از WPF‌ واسط های گرافیکی کاربری (GUI) بسیار جذاب و سرگرم کننده ای ایجاد نمایند. Expression Blend‌و Visual Studio با یکدیگر کاملا سازگار میباشند به گونه ای که میتوان پروژه های ایجاد شده در هر کدام را به دیگری انتقال داد که این امر سبب تسریع همکاری بین designer ها و developer‌ ها میشود.
در حالت کلی دو راه متفاوت برای ایجاد WPF App. وجود دارد، Expression Blend‌و Visual Studio. هدف Expression Blend این است تا بتواند محیطی را برای designer ها فراهم کند تا با استفاده از آن WPF App ها با استفاده از ابزار ساده و سریع و در عین حال قدرتمند ایجاد شوند. به عبارت دیگر بهترین کیفیت را در کمترین زمان ممکن فراهم آورد.
خروجی Expression Blend‌ به زبان XAML میباشد که سبب تسهیل همکاری میان Designer ها و developer ها میشود. Designer‌ها با استفاده از ابزار Expression Blend رابط گرافیکی کاربر را طراحی نموده و کدهای XAML‌حاصل را بین بخش های مختلف App‌به اشتراک می گذارد، Developer‌ها نیز میتوانند با استفاده از Visual Studio پروژه های ایجاد شده توسط Expression Blend‌ را باز کرده و کدنویسی پروژه را انجام دهند. علاوه بر این فایل های کد

(code-behind)

C#‎ و VB.NET نیز مانند کدهای XAML‌ میتوانند بین Expression Blend‌ و Visual Studio به اشتراک گذاشته شوند.
شکل زیر ارتباط میان Expression Blend و Visual Studio را نشان میدهد.

ادامه دادرد...

آموزش Microsoft Expression Blend – بخش دوم

محیط طراحی
هر پروژه در 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 موجود را بصورت مستقیم فراهم می آورد.
شکل 2-1 نمایی از محیط کار Microsoft Expression Blend 2 را نشان می دهد.

http://i38.tinypic.com/2ryk16o.jpg
شکل 1-2

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

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

http://i38.tinypic.com/2r712k5.jpg
شکل 2-2

در زیر لیستی از پانل های موجود در محیط کار و توضیح مختصری در مورد هر کدام آورده شده است:
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 ها را ایجاد کند.

ادامه دارد...

ان شاا... در قسمت بعدی نحوه ایجاد پروژه جدید و طراحی های ساده آموزش داده خواهد شد.

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

موفق باشید
jooje

مطالب بالا بصورت فایل docx.

آموزش Microsoft Expression Blend – بخش سوم

Art-board

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

http://i36.tinypic.com/v3ezaf.jpg
شکل 1-3

پانل options محیط کار (Tools > Options) امکان تنظیم میزان بزرگنمایی Art-board را فراهم می کند. تصویر 3-2 جزئیات این پانل را نشان می دهد.

http://i33.tinypic.com/wmgh6o.jpg
شکل 2-3

ساختار پروژه

ساختار پروژه های 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 را مشخص نمایید.

شکل 3-3 dialog box مربوط به Add New Item را نشان می دهد.

http://i36.tinypic.com/sgjrqh.jpg
شکل 3-3

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

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)

موفق باشید
jooje

آموزش Microsoft Expression Blend - بخش چهارم

ایجاد 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 نیز امکان پذیر میباشد.

http://i36.tinypic.com/2ewf61i.jpg
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 را از منو انتخاب کنید.
نتیجه حاصل مانند شکل زیر خواهد بود:

http://i37.tinypic.com/r926hf.jpg
Figure 2

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

ادامه دارد...

نقل قول:

---

با اون یک کلید ساختم که وقتی موس روش می ره نانجی بشه وقتی موس می ره کنار دوباره مشکی می شه
و وقتی کلیک می کنه قرمز می شه و وقتی کوس رو رها کرد دوباره مشکی کی شه
برای بار اول همه چی درسته ولی وقتی کلیک کنیم روی کلید دیگه وقتی روی کلید می ریم نارنجی نمی شه فقط نسبت به کلیک حساسه
دلیلش چیه

---

دلیل :‌ وقتی trigger‌رو بر اساس property ها انجام میدین باید برای IsMouseOver علاوه بر EnterAction و ExitAction یک Setter نیز قرار بدین.
دقیقا style‌شما این کد قرمز رو کم داشت :‌

<

Trigger Property="IsMouseOver" Value="True">

								<Trigger.ExitActions>

									<BeginStoryboard Storyboard="{StaticResource Storyboard_Copy1}" x:Name="Storyboard_Copy1_BeginStoryboard"/>

								</Trigger.ExitActions>

								<Trigger.EnterActions>

									<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>

								</Trigger.EnterActions>

								<Setter Property="Fill" TargetName="rectangle">

									<Setter.Value>

										<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

											<GradientStop Color="#FFBFBDBD" Offset="0"/>

											<GradientStop Color="#FFFFF9F9" Offset="1"/>

										</LinearGradientBrush>

									</Setter.Value>

								</Setter>

							</Trigger>

البته برنامه شما ظاهرا یه ایرادای دیگه ای هم داشت ولی دلیل اصلیش این بود.
من یه نمونه style ساده نوشتم برای button‌ که افکت animation داره. هم با property trigger نوشتم و هم با event trigger.
دقت کنید که کد بالا که گذاشتم فقط با property trigger باید باشه و event trigger‌احتیاجی به اون نداره.

مدیران محترم ببخشید که من اینجا واب رو دادم گفتم شاید مطلب به درد بخوری باشه و با جواب دادن تو pm خیلی از دوستان نتونن ازش استفاده کنن.
بقیه دوستان هم لطفا برای سوالاتشون یا نظراتشون pm‌بدن یا در صورت نیاز تاپیک جدیدی ایجاد کنن.
با تشکر از همه دوستان عزیز.

موفق باشید
jooje

pdf بخش چهارم

با تشکر از جناب کیانی عزیز که نظم دادن به تاپیک.

توضیح مهم: من قسمت های قبلی رو بصورت ترجمه براتون میذاشتم که باعث میشد وقت زیادی روش صرف کنم و سرعت به روز کردن مطالب بسیار پایین می اومد. از این به بعد سعی میکنم مطالبی رو که مطالعه کردم از منابع مختلف بصورت مفید و مختصر و بیشتر کاربردی در اختیارتون قرار بدم.

آموزش Microsoft Expression Blend - بخش پنجم

در این قسمت میخوایم در مورد پانل ها بصورت اجمالی صحبت کنیم.

Transform Panel

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

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

http://i39.tinypic.com/212trn7.jpg

Brushes Panel

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

http://i41.tinypic.com/rl9b1h.jpg

با توجه به تصویر قسمت های مخلف رو توضیح میدیم:
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 کنید.

http://i39.tinypic.com/20f8d9t.jpg

بصورت Linear Gradient

http://i44.tinypic.com/262wsr6.jpg

بصورت Radial Gradient

http://i41.tinypic.com/15q66f9.jpg

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

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

ادامه دارد...

آموزش Microsoft Expression Blend - بخش 6

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

مقدمه

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


شروع کار

ابتدا یک پروژه WpfApplication ایجاد کنید.
شکلی را که میخواهید Button شما به آن شکل باشد را رسم کنید. در این مثال ما از یک مستطیل استفاده کردیم که گوشه های آن را گرد کرده ایم. برای گرد کردن گوشه های یک مستطیل می توانید از Property با نام های Radius X و Radius Y آن استفاده کنید. (شکل 1)

http://i29.tinypic.com/330eiiw.jpg
شکل 1

برای تبدیل شکل رسم شده به Button از منوی Tools گزینه Make Button را انتخاب نمایید. (شکل2)

http://i30.tinypic.com/15xli7m.jpg
شکل 2

با این کار پنجره ای باز می شود که در آن نام Style ای را که این Button دارا خواهد بود می نویسیم و نیز مشخص می کنیم که این Style در کدام قسمت های برنامه فابل دسترسی باشد. با انتخاب Application، این Style در کل برنامه قابل استفاده خواهد بود. (شکل 3)

http://i28.tinypic.com/mtbhpu.jpg
شکل 3

حال شکل رسم شده به یک Button تبدیل شده است: (شکل 4)

http://i30.tinypic.com/2iqjv45.jpg
شکل 4

این Button ایجاد شده تمام ویژگی های یک Button را دارد با این تفاوت که هیچ افکت تصویری ندارد، مثلا زمانی که mouse را بر روی آن ببرید هیچ تغییری در ظاهر Button مشاهده نخواهید کرد. برای حل این مشکل باید Style ای را که در ابتدا برای button ایجاد شد تعییر دهیم تا به نتیجه مطلوب خود برسیم.


Style

برای تغییر style مربوط به button بر روی آن right click کرده و Edit Control Parts (template) -> Edit Template را انتخاب کنید. (شکل 5)

http://i28.tinypic.com/j6n3mt.jpg
شکل 5

با این کار ما وارد محیط درونی button می شویم و می توانیم اجزای تشکیل دهنده ان را ببینیم. (شکل 6)

http://i32.tinypic.com/nbqb2o.jpg
شکل 6

توضیحات:
1- اجزای تشکیل دهنده Button را نشان می دهد.
> Rectangle : به عنوان زمینه button قرار می گیرد و مشخص کننده رنگ آن است. (شکل 7)

http://i28.tinypic.com/2cn8ole.jpg
شکل 7

> Content Presenter : نمایش دهنده Text مربوط به button می باشد. (شکل 8)

http://i28.tinypic.com/2cn8ole.jpg
شکل 8

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

http://i32.tinypic.com/2pqw8wj.jpg
شکل 9

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


برای تغییر رنگ رمینه Button باید رنگ زمینه مستطیل داخل آن را تغییر دهیم. برای این منظور ابتدا مستطیل را انتخاب کنید.حال در پانل Properties مربوط به مستطیل با استفاده از قسمت Brushes می توانید عمل تغییر رنگ را انجام دهید.
قبل از شروع برای روشن تر شدن قضیه به شکل 10 دقت کنید:

http://i31.tinypic.com/2d8gb2h.jpg
شکل 10

توضیحات:
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 ها نخواهیم داشت زیرا آن ها بر روی لایه دوم قرار دارند.

مراحل نشان داده شده در شکل 11 را انجام دهید:

http://i32.tinypic.com/al3gvl.jpg
شکل 11

یک مستطیل به داخل grid اضافه کنید و نام آن را effectLayer بگذارید و مراحل شکل 12 را انجام دهید:

http://i28.tinypic.com/kalbpy.jpg
شکل 12

مقادیر Gradient Stop ها به شکل زیر خواهد بود: (شکل های 13-14-15-16)

http://i28.tinypic.com/29m2lur.jpg
شکل 13

http://i32.tinypic.com/ezikrb.jpg
شکل 14

http://i25.tinypic.com/fth35k.jpg
شکل 15

http://i26.tinypic.com/2unx7oz.jpg
شکل 16

حال زمان آن است که Button خود را تست کنیم. برای خارج شدن از محیط ویرایش Style، بر روی دکمه Return Scope to Window کلیک کنید تا به پنجره اصلی بر گردید و button خود را مشاهده کنید. (شکل 17-18)

http://i31.tinypic.com/20ae36g.jpg
شکل 17

http://i29.tinypic.com/oqgnrp.jpg
شکل 18


از این Style بر روی button های دیگر نیز می توان استفاده کرد. مانند شکل 19 یک button به window اضافه کنید.

http://i27.tinypic.com/2r3ui9u.jpg
شکل 19

برای اعمال Style خودتان روی این button مانند شکل 20 عمل کنید:

http://i29.tinypic.com/mvtagm.jpg
شکل 20

و این هم نتیجه:

http://i31.tinypic.com/24o3l1j.jpg
شکل 21

برای اجرای برنامه F5 کلید را فشار دهید. ماوس را بر روی button ساخته شده ببرید، خواهید دید که هیچ تغییری در ظاهر آن مشاهده نمی شود. بر روی button کلیک کنید، باز هم تغییری در button نخواهید دید. زیرا Style ای که برای آن ایجاد کردیم تعریفی برای این حالت ها ندارد. برای تعریف افکت برای این حالت ها از Trigger استفاده می کنیم.
به شکل زیر توجه کنید:

http://i31.tinypic.com/2v26y6h.jpg
شکل 22

در قسمت شماره 1 تعدادی property وجود دارند که شرط trigger شدن آن ها در مقابلشان نوشته شده است، به عنوان مثال در شکل IsMouseOver = True به این معنی است که کارهایی در صورت True بودن مقدار IsMouseOver انجام خواهد گرفت و به اصطلاح trigger خواهد شد که این کار ها در قسمت شماره 5 قرار می گیرند.
قسمتی که با فلش زرد نشان داده شده است مشخص می کند اکنون در حالت ضبط trigger هستیم و هر گونه تغییری در مقادیر property های اجزای button (مانند رنگ زمینه backgroundLayer) به عنوان عملی که در این trigger باید انجام شود، ثبت می شود. مثلا اگر ما در این حالت رنگ زمینه backgroundLayer (لایه اول) را روشن تر کنیم، این رنگ برای حالتی که ماوس بر روی button باشد ثبت می شود و در صورت قرار گرفتن موس بر روی button، رنگ button تغییر خواهد کرد.
بنابراین به عنوان یک روش کلی، ابتدا trigger مورد نظر را انتخاب می کنیم، سپس کنترلی را که میخواهیم دچار تغییر شود انتخاب کرده و تغییرات مورد نظر را انجام می دهیم و سراغ trigger بعدی می رویم.
برای حذف یک trigger شماره 6 و برای افزودن trigger جدید شماره 7 را انتخاب نمایید.

حال برای کامل تر شدن style خودمان مراحل 1 تا 4 را انجام دهید. در پایان می توانید تغییراتی را که با این trigger رخ خواهند داد در قسمت شماره 5 مشاهده کنید.

می توانید برای Trigger های دیگر نیز به همین شکل عمل نمایید.

به window اصلی برگردید و برنامه را اجرا کنید. ماوس را روی button برده و تغییرات را مشاهده کنید.

در بخش بعدی نحوه ایجاد Storyboard و قرار دادن آن به عنوان افکت بر روی یک button آموزش داده خواهد شد.

موفق باشید