آموزش برنامه نویسی xaml و طراحی گرافیک و ui

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

آینده برنامه نویسان || (چه زبانی یاد بگیریم + از کجا شروع کنیم) * (WPF,WP7,Silverlight) چیست؟
هر آنچه که باید درباره WPF بدانید

:Gol:

بنام خدا.
سلام.
پیش نیاز فعلاً فقط ویزوال استادیو هست.
اگه زور اینترنتتون میرسه حدود بیش از دو گیگه میتونید مستقیم دانلود کنید:

• دانلود پارت 1 از لینک مستقیم - 1 گیگابایت
• دانلود پارت 2 از لینک مستقیم - 1 گیگابایت
• دانلود پارت 3 از لینک مستقیم - 263 مگابایت

بنام خدا.
سلام.

بنام خدا.
سلام.

بنام خدا.
سلام.

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

بنام خدا.
سلام.
XAML چیست؟
XAML، یک زبان نشانه دار تعریفی (declarative markup language) است. این زبان، همانگونه که به مدل برنامه نویسی .NET Framework اعمال شده است، ایجاد user interface برای برنامه .NET Framework را ساده می کند. می توان عنصرهای UI قابل رویتی در مارک آپ تعریفی XAML ایجاد کرد، و سپس با استفاده از فایل های پشت کد، که از طریق تعاریف کلاس جزیی به مارک آپ ملحق شده اند، تعریف UI را از منطق زمان اجرا جدا کرد. این زبان بطور مستقیم فرایند ایجاد اشیا در مجموعه ای معین از تایپ های پشتیبان تعریف شده در اسمبلی ها ارائه می کند. این کار برعکس اکثر زبان های مارک آپ است، که معمولاً زبانی تعبیر شده و بدون چنین رابطه مستقیمی با سیستم تایپ پشتیبان هستند. XAML، یک جریان کاری (workflow) را که بخش های مستقل می توانند روی UI ومنطق برنامه، با استفاده از ابزارهای مختلف کار می کنند، فعال می کند.

فایل های XAML، وقتی بصورت متن ارائه می شوند، فایل هایی هستند که معمولاً دارای اکتنشن .xaml هستند. این فایل ها را می توان توسط هر انکدینگ XAMLیی کدگذاری (encode) کرد. اما انکدینگ UTF-8 رایج ترین است.

بچه ها UI یا User Interface همون رابط کاربری و گرافیک نرم افزارتون هست که به کاربر نشون داده میشه.راحت بگم بهتون که این مهمترین بخش برنامه نویسیه.یعنی شما اگه کدهاتون پیچیده باشه ولی برنامهتون گرافیک خوبی داشته باشه مخاطب بیشتری جذب میشن.بیشتر مخاطبین نرم افزار رو بخاطر گرافیک زیباشون دوست دارن.اگه نرم افزاری هم گرافیک خوبی داشته باشه و هم کاربرد خوب و مناسبی داشته باشه میتونه خیلی زود مخاطب جذب کنه:ok:.

مثال زیر چگونگی ایجاد یک دکمه بعنوان یک UI را نشان می دهد. هدف این مثال تنها این است که نشان دهد XAML چگونه استعاره های (metaphor) رایج برنامه نویسی UI را نمایش می دهد.

<br />
[=Times New Roman]<StackPanel><br />
  <Button Content="Click Me"/><br />
</StackPanel><br />

اگر شما آشنایی قبلی با XAML داشته باشید، اغلب موضوعات بخش های بعدی، برای شما مبتدی خواهد بود. این موضوع نتیجه یکی از اصول اولیه طراحی XAML است. این زبان مفاهیم خودش را تعریف می کند، اما این مفاهیم در زبان XAML و فرم مارک آپ کارایی دارند.
:ok:

بنام خدا.
سلام.

بنام خدا.
سلام.

بنام خدا.
سلام.
ببینید XAML و سی شارپ مثل Asp.Net و HTML میمونن.
HTML برای سمت کلاینت یعنی کاربران نوشته میشه اما کدهای سی شارپ یا ASP.NET برای سمت سرور.
کد های XAML برای UI و رابط گرافیکی نوشته میشن.اما کدهای سی شارپ برای برنامه نویسی و هسته نرم افزار نوشته میشن.
شما با XAML میتونی طرح های سه بعدی خودتو به صورت انیمیشن یا هر فکر گرافیکی که به ذهنتون برسه انجام بدید.نا محدوده.هر بلایی دوست دارید میتونید سرش بیارید.
اما مثلاً اگه بخواهید یک فایل رو از روی سیستم کاربر حذف کنید یا بسازید باید از کد سی شارپ استفاده کنید.
شما توی وب برای طراحی گرافیک سمت کلاینت میتونی از css و جاوا و jquery و html و ... استفاده کنی اما توی WPF فقط کد xaml میتونه همه کارا رو برات انجام بده.
شما توی کد های سی شارپ به صورت نا محدود هرکاری دوست دارید میتونید انجام بدید. امام توی xaml تنها کارهای گرافیکی نرم افزار رو انجام میدید.با سی شارپ هم میتونید کارهای گرافیکی رو انجام میدید اما باید کدهای بیشتری بنویسید و سرعتتون گرفته میشه.
با xaml سریعتر میتونید یک گرافیک خوب برای نرم افزارتون طراحی کنید.

بنام خدا.
سلام.
دوستان ببخشید من این چند وقته کمی سرم شلوغ هست به همین خاطر کمتر سر میزنم.
ان شالله که خیره:khandeh!::Gol::Gol:.

عنصرهای شی:

معمولاً عنصر شی نمونه ای (instanceS) از یک type را تعریف می کند. این type در اسمبلی هایی که تایپ های پشتیبان را برای تکنولوژی ای که از XAML بعنوان زبان استفاده می کنند، تعریف می شود.

سینتکس عنصر شی همیشه با علامت بگذارید. در عوض می توانید از یک فرم که خودش بسته می شود و دارای هیچ محتوایی نیست استفاده کنید و این کار را می توانید باوسیله تگی با forward slash و علامت /> در ادامه اش انجام دهید. مثلاً نگاهی دوباره به مارک آپ مثال قبلی بیاندازید.

این مثال دو عنصر شی را معین می کند: ( با content، و سپس تگ انتهایی)؛ و

( فرمی که خودش بسته می شود، با چندین اتریبیوت). عنصرهای شی StackPanel و Button هر کدام با نام کلاسی که توسط WPF و بخشی از اسمبلی های WPF تعریف شده اند، مساوی می شوند. وقتی یک تگ عنصر شی تعیین می کنید، در واقع دستورالعملی برای پردازش XAML ایجاد می کنید تا نمونه ای جدید ایجاد کنید. هر نمونه توسط فراخوانی constructor پیش فرض، هنگام parse یا load کردن تایپ اصلی ایجاد می شود.

بنام خدا.
خوب ادامه آموزش قسمت اول:Gol:.
پس از ساخت پروژه و کلیک روی دکمه OK پروژه شما ساخته شده و به شکل زیر به شما نمایش داده خواهد شد:

اول کادر های دایره ای قمز رنگ که دورش خط کشیدم رو براتون توضیح بسیار مختصری میدم.
ToolBox:این پنجره شما کنترل ها و کامپوننت های موجود و اماده در دات نت هست که شما میتونید توی نرم افزارتون ازشون استفاده کنید.
مثلاً دکمه ها کادر متن ها و...برای استفاده میتونید اونو انتخاب و روی فرم یا در قسمت کد درگ کنید یا اینکه روش دابل کلیک کنید.
Solution Explorer:شامل فایل ها و فرم ها و کلاس ها و .... پروژه شما هست.مثلاً پنجره هایی که در پروژه تون میسازید از این قسمت میتونید به همشون دسترسی داشته باشید.
Properties:این قسمت شامل مشخصات کنترل انتخاب شده در فرم شما میباشد.مثلاً شما اگر بخواهید رنگ یک دکمه را تغییر دهید ابتدا دکمه خود را در فرم انتخاب سپس از این پنجره مشخصاتش را تغییر میدهید.

این سه پنجره که گفته شد از مهمترین و پر کاربردترین پنجره های ویژوال استادیو میباشند.که از منوی View میتونید اونارو نمایان کنید.
و اما شماره گذاری هایی که کردم:
1.این قسمت نمایی از فرم یا کلاس یا ... شما میباشد که از قسمت Solution Explorer انتخاب میکنید.
2.این قسمت هم که خیلی باهاش سرو کار داریم و هدف اصلی آموزش ما اینجاست کدهای XAML فرم یا پنجره شماست.که به صورت پیشفرض کدهایی درونش هست.
ادامه آموزش ها در قسمت بعدی....ان شالله.
:Gol:

بنام خدا.
سلام.
دیگه فکر کنم باید سرمو از توی لاکم در بیارم:Khandidan!:.
واقعاً شرمنده هستم از اینکه اینقدر دیر به دیر پست میدم.آخه برخی دوستان خبر دارن توی چه وضعیت و چه فشارهای استرسی در حال بسر بردن هستم.
فقط هم التماس دعا دارم دوستان.
آموزش XAML قسمت دوم:
دوستان در کد های XAML همه نشانه ها و آیتم ها یا کنترل ها یا آبجکت ها یا ریسورس ها یا هرچی که فکرشو بکنید:khandeh!: از یک تگ یا کاراکتر > شروع شده و با یک تگ یا دو کاراکتر تموم میشه.
من میخوام بیشتر به زبان خودتون آموزش رو بدم که همه بتونند بخونند.
مثلاً ما یه سری کتاب داریم و در این کتاب صفحاتی داریم.
کتاب و صفحات همه با تگ های خودشون شروع و پایان پیدا میکنند.
مثلاً
/کتاب علوم پزشکی>
/کتاب ریاضی>
حال آنکه اگر بخواهیم مدل XAML ای آنرا بنویسیم اینطور میشود:
مثلاً یک دکمه:
<Button/>یا یک کادر متن:
<TextBox/>حال ما اگر بخواهیم در این کتاب ها صفحاتی ایجاد کنیم باید تگ ها را بشکافیم و داخل آنها صفحات را وارد کنیم تا متوجه شویم کدام صفحه مربوط به کدام کتاب است.
ما تگ ابتدایی را باید اینگونه بنویسیم: و تگ انتهایی را اینگونه بنویسیم:نام آیتم>

برای مثال:

صفحه 1>

یا

صفحه 1>

توجه مینمویی؟:khandeh!:

حال این را به صرورت XAML می نویسیم:
مثلاً میخواهیم یک دکمه بسازیم و متن داخل آن را کلیک کنید قرار دهیم:

<br />
            <Button><br />
                کلیک کنید<br />
            </Button><br />

خوب ما در کد بالا یک کتاب را با تگ ابتدایی شروع کردیم و در داخل آن خصوصیت صفحه 1 را مقدار دادیم.و صفحه 1 را با تگ انتهایی آن بستیم و بعد از آن هم کتاب را با تگ انتهایی آن بستیم.
تمامی خصوصیات با یک کاراکتر دات (.) یا نقطه از هم جدا میشوند.میتوانید برای مقدار دهی از = استفاده کنید و آنرا بین دو کاراکتر "مقدار" قرار دهید که در جلوتر توضیح خواهیم داد ان شالله...
مثلاً:
علی.قد="170"
علی.سن="14"

حالا به صورت کد XAML:

<br />
            <Button><br />
                <Button.Content><br />
                    لطفاً کلیک کنید<br />
                </Button.Content><br />
            </Button><br />

<br />
            <Button><br />
                <Button.Content><br />
                    لطفاً کلیک کنید<br />
                </Button.Content><br />
                <Button.Width><br />
                    100<br />
                </Button.Width><br />
            </Button><br />

<br />
<Button Content="لطفاً کلیک کنید" Width="100"/><br />

<br />
            <Button Content="لطفاً کلیک کنید"><br />
                <Button.Width><br />
                    100<br />
                </Button.Width><br />
            </Button><br />

بنام خدا.
سلام.
کسانی که نمیتوانند به هر دلیلی ویژوال استادیو نصب کنند میتوانند نرم افزار زیر را دانلود مثل نت پد هست ولی یک ویراشگر قدرمتند XAML هست هرچند به پای ویژوال استادیو نمیرسه.

بنام خدا.
سلام.

[="Tahoma"][="Green"]بنام خدا.
سلام.
هرچی ورژن بالاتر بهتر.
موفق باشید.[/]

[="Tahoma"][="Green"]بنام خدا.
سلام.
آره همینه.
ولی نسخه کرک شده نیست امکان داره بعد از مدتی از کار بیوفته بهتره که سایت ایرانی بگیری.[/]

[="Tahoma"][="Green"]بنام خدا.
سلام.
نه دانلود کن مشکلی نداره نسخه RC رایگانه.
من نسخه developer preview و همچنین بتاشو دانلود کردم همش رایگان بود نسخه RC رایگانه ولی نسخه Ultimate بعد از مدتی ازت سریال میخواد و از کار میوفته.
دانلود نسخه RC ویژوال استادیو 2012[/]