|
#1
|
||||
|
||||
الدرس التاسع والخمسون : Microsoft Expression Studio - دورة .net 2008
بسم الله الرحمن الرحيم . السلام عليكم ورحمة الله وبركاته . سنحاول في هذا الدرس تعلم كيفية استخدام مجموعة Microsoft Expression Studio لانتاج اكواد XAML احترافيه يمكن استخدامها لاحقاً في تطبيقاتنا ، سنركز بالطبع على Blend لإنه الأشهر والأكثر استخداماً ، ولكن قبل ذلك سنتعرف على عناصر هذه المجموعة : Microsoft Expression Web : يتيح لك هذا البرنامج تصميم صفحاتك بطريقة مميزة ويساعدك على عمل صفحتك بأي صيغة موجودة مثل XHTML, CSS, XML, XSLT . الواجهة الرئيسية له بالشكل التالي : يمكنك استخدام اي من الادوات التي تجدها لديك لتصميم صفحتك والتعديل على الخصائص ، هناك ايضاً مدقق HTML لمراقبة الأخطاء ، هناك خصائص لتسهيل التعامل مع ال styles مثلاً ، ليس هذا فقط بل يتيح لك البرنامج البرمجة من خلاله سواء من خلال Asp.net أو من خلال php . للمزيد يمكنك البدء من هنا : http://www.microsoft.com/expression/...t.aspx?key=web Microsoft Expression Design يسهل لك هذا البرنامج حلولاً مميزة لتسهيل تركيب الصور والرسوميات وخلافه ، الواجهة الرئيسية له بالشكل التالي : المزيد يمكنك معرفته من هنا : http://www.microsoft.com/expression/...spx?key=design Microsoft Expression Media يتيح لك هذا البرنامج تعديل وتركيب وتكوين أفلامك المختلفة ، هذه صورة للواجهة : والمزيد يمكنك معرفته من هنا : http://www.microsoft.com/expression/...aspx?key=media Microsoft Expression Encoder : يتيح لك السماح للزائر بالتفاعل مع عروضك ، يشكل البرنامج الأساسي لادارة Silver Light التقنية الجديدة من مايكروسوفت والمشابهة لتقنية Flash من Micromeida سابقاً ومن Adobe حالياً . الواجهة الرئيسية للبرنامج : يمكنك البدء بمزيد من التفصيل هنا : http://www.microsoft.com/expression/...px?key=encoder Expression Blend : لتصميم واجهات برنامجك المختلفة ، حيث يوفر لك وسائل متعددة للتصميم ، سنحاول معرفة المزيد عنه بتفصيل في هذا الدرس ... سنحاول الآن عمل تطبيق بسيط من خلال Expression Blend قم بتحميله أولاً من الروابط السابقة ، قم بتشغيله ومن ثم اختيار New Project ومن ثم WPF Application (*.exe) بالشكل التالي : يمكنك اختيار اللغة التي تريد العمل عليها وال framework اضافة للاسم ومكان التخزين بالطبع . من View اختر Active ******** View ومن ثم اختر الوضع Split لتتمكن من عرض XAML و العرض العادي في نفس الوقت بالشكل التالي : على جانب الشاشة ، ستجد كل الأدوات التي تحتاج إليها للتصميم سواء القلم والفرشاة وخلافه ، أو أزرار الأوامر ومربعات النصوص وخلافه من الأدوات التي ستستخدمها في برنامجك ، ايضاً يمكنك الضغط على آخر عناصر القائمة ليستعرض لك جميع الأدوات بالشكل التالي مثلاً : خلال عملياتك في الرسم ، ستجد لأي اداة مجموعة من الخصائص على الجانب ، تستطيع منها التحكم بالمظهر وخلافه : الآن كتطبيق سريع ، قم باضافة Canvas وقم بتحديد ابعاده ، هذا هو ال Canvas الذي سنضع فيه صورة خاصة بنا ونطبق عليها بعض التأثيرات : كود بلغة HTML:
[font=Tahoma]<Canvas>[/font] [font=Tahoma] <Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">[/font] [font=Tahoma][/font] كود بلغة HTML:
[font=Tahoma]<MediaElement x:Name="MainImage" Source="c:/example/futex.jpg" Width="300" Height="300" >[/font] [font=Tahoma] </MediaElement>[/font] [font=Tahoma][/font] كود بلغة HTML:
[font=Tahoma]<Canvas.RenderTransform>[/font] [font=Tahoma] <TransformGroup>[/font] [font=Tahoma] <SkewTransform x:Name="MainSkewTransform" AngleY="-19" AngleX="0" CenterX="0" CenterY="0"/> [/font] [font=Tahoma] <ScaleTransform x:Name="MainScaleTransform" ScaleY="1" ScaleX = "1" CenterX="0" CenterY="0"/>[/font] [font=Tahoma] </TransformGroup>[/font] [font=Tahoma] </Canvas.RenderTransform>[/font] [font=Tahoma] </Canvas>[/font] [font=Tahoma][/font] سنحاول تطبيق نظرية الظل للصورة أيضاً ، لذا سنقوم بعمل Canvas ونضع فيه الصورة أيضاً ولكن مع زوايا ميل مختلفة هذه المرة بحيث تحاذي اطراف الصورة ، سيكون ناتج XAML بالشكل التالي : كود بلغة HTML:
[font=Tahoma]<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">[/font] [font=Tahoma] <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0">[/font] [font=Tahoma] </MediaElement>[/font] [font=Tahoma] <Canvas.RenderTransform>[/font] [font=Tahoma] <TransformGroup>[/font] [font=Tahoma] <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" />[/font] [font=Tahoma] <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" />[/font] [font=Tahoma] </TransformGroup>[/font] [font=Tahoma] </Canvas.RenderTransform>[/font] [font=Tahoma] [/font] [font=Tahoma] </Canvas>[/font] [font=Tahoma][/font] آخر نقطة سنتعامل معها هي اضافة الشفافية لصورة الظل ، من ضمن الخصائص أيضاً ، لذا ستجد ناتج ال XAML في النهاية بالشكل التالي : كود بلغة HTML:
[font=Tahoma]<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">[/font] [font=Tahoma] <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0">[/font] [font=Tahoma] </MediaElement>[/font] [font=Tahoma] <Canvas.RenderTransform>[/font] [font=Tahoma] <TransformGroup>[/font] [font=Tahoma] <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" />[/font] [font=Tahoma] <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" />[/font] [font=Tahoma] </TransformGroup>[/font] [font=Tahoma] </Canvas.RenderTransform>[/font] [font=Tahoma] <Canvas.OpacityMask>[/font] [font=Tahoma] <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">[/font] [font=Tahoma] <GradientStop Offset="0.345" Color="#00000000" x:Name="ReflGradientStop1" />[/font] [font=Tahoma] <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" />[/font] [font=Tahoma] </LinearGradientBrush>[/font] [font=Tahoma] </Canvas.OpacityMask>[/font] [font=Tahoma] </Canvas>[/font] [font=Tahoma][/font] الكود الكامل XAML : كود بلغة HTML:
<Canvas> <Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120"> <MediaElement x:Name="MainImage" Source="c:/example/FUTEX.JPG" Width="300" Height="300" > </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="MainSkewTransform" AngleY="-19" AngleX="0" CenterX="0" CenterY="0"/> <ScaleTransform x:Name="MainScaleTransform" ScaleY="1" ScaleX = "1" CenterX="0" CenterY="0"/> </TransformGroup> </Canvas.RenderTransform> </Canvas> <Canvas x:Name="ReflectionImageCanvas" Canvas.Left="267" Canvas.Top="645"> <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0"> </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" /> <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /> </TransformGroup> </Canvas.RenderTransform> <Canvas.OpacityMask> <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0"> <GradientStop Offset="0.345" Color="#00000000" x:Name="ReflGradientStop1" /> <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" /> </LinearGradientBrush> </Canvas.OpacityMask> </Canvas> </Canvas> طبعاً يمكنك نقل الكود كما هو إلى الفيجوال ستوديو وسيعمل بنفس الصورة . قبل النهاية ، احب ان اذكرك بأنك كمبرمج لست مطالباً بمعرفة الكثير عن هذا العالم عالم Microsoft Expression فهو موجه اصلاً للمصممين ، كل ما يهمك هو التعامل مع ال XAML الناتجة فقط . لتعلم كل ما تريد عن هذه المجموعة يمكنك البدء من هنا : http://expression.microsoft.com/en-us/cc136522.aspx إلى هنا تكون دروسنا حول WPF و XAML قد انتهت ، نلتقي في درس قادم غالباً بعنوان Object Serlization . والله الموفق ... والسلام عليكم ورحمة الله وبركاته .
|
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
الدرس السابع والخمسون : Wpf 2d - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 2 | 03-05-2010 06:57 PM |
الدرس التاسع والأربعون : System.IO - دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 02-28-2010 10:15 PM |
الدرس التاسع والعشرون : IComparable interface دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 02-24-2010 02:25 PM |
الدرس التاسع عشر : ال Encapsulation دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 02-20-2010 03:07 PM |
الدرس التاسع : ال Enumeration دورة .net 2008 | khaledbelal | دورة .NET 2008 من منتدى فيجوال بيسك للعرب | 0 | 02-18-2010 04:27 PM |