khaledbelal
03-07-2010, 02:26 AM
بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .
سنحاول في هذا الدرس تعلم كيفية استخدام مجموعة Microsoft Expression Studio لانتاج اكواد XAML احترافيه يمكن استخدامها لاحقاً في تطبيقاتنا ، سنركز بالطبع على Blend لإنه الأشهر والأكثر استخداماً ، ولكن قبل ذلك سنتعرف على عناصر هذه المجموعة :
Microsoft Expression Web :
يتيح لك هذا البرنامج تصميم صفحاتك بطريقة مميزة ويساعدك على عمل صفحتك بأي صيغة موجودة مثل XHTML, CSS, XML, XSLT . الواجهة الرئيسية له بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/01214773770.jpg
يمكنك استخدام اي من الادوات التي تجدها لديك لتصميم صفحتك والتعديل على الخصائص ، هناك ايضاً مدقق HTML لمراقبة الأخطاء ، هناك خصائص لتسهيل التعامل مع ال styles مثلاً ، ليس هذا فقط بل يتيح لك البرنامج البرمجة من خلاله سواء من خلال Asp.net أو من خلال php .
للمزيد يمكنك البدء من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=web
Microsoft Expression Design
يسهل لك هذا البرنامج حلولاً مميزة لتسهيل تركيب الصور والرسوميات وخلافه ، الواجهة الرئيسية له بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/11214819385.jpg
المزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=design
Microsoft Expression Media
يتيح لك هذا البرنامج تعديل وتركيب وتكوين أفلامك المختلفة ، هذه صورة للواجهة :
http://vb4arab.com/vb/uploaded/3/01214819385.jpg
والمزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=media
Microsoft Expression Encoder :
يتيح لك السماح للزائر بالتفاعل مع عروضك ، يشكل البرنامج الأساسي لادارة Silver Light التقنية الجديدة من مايكروسوفت والمشابهة لتقنية Flash من Micromeida سابقاً ومن Adobe حالياً .
الواجهة الرئيسية للبرنامج :
http://vb4arab.com/vb/uploaded/3/01214820181.jpg
يمكنك البدء بمزيد من التفصيل هنا :
http://www.microsoft.com/expression/features/default.aspx?key=encoder
Expression Blend :
لتصميم واجهات برنامجك المختلفة ، حيث يوفر لك وسائل متعددة للتصميم ، سنحاول معرفة المزيد عنه بتفصيل في هذا الدرس ...
سنحاول الآن عمل تطبيق بسيط من خلال Expression Blend قم بتحميله أولاً من الروابط السابقة ، قم بتشغيله ومن ثم اختيار New Project ومن ثم WPF Application (*.exe) بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/01214832040.jpg
يمكنك اختيار اللغة التي تريد العمل عليها وال framework اضافة للاسم ومكان التخزين بالطبع .
من View اختر Active ******** View ومن ثم اختر الوضع Split لتتمكن من عرض XAML و العرض العادي في نفس الوقت بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/11214832040.jpg
على جانب الشاشة ، ستجد كل الأدوات التي تحتاج إليها للتصميم سواء القلم والفرشاة وخلافه ، أو أزرار الأوامر ومربعات النصوص وخلافه من الأدوات التي ستستخدمها في برنامجك ، ايضاً يمكنك الضغط على آخر عناصر القائمة ليستعرض لك جميع الأدوات بالشكل التالي مثلاً :
http://vb4arab.com/vb/uploaded/3/21214832040.jpg
خلال عملياتك في الرسم ، ستجد لأي اداة مجموعة من الخصائص على الجانب ، تستطيع منها التحكم بالمظهر وخلافه :
http://vb4arab.com/vb/uploaded/3/31214832040.jpg
الآن كتطبيق سريع ، قم باضافة Canvas وقم بتحديد ابعاده ، هذا هو ال Canvas الذي سنضع فيه صورة خاصة بنا ونطبق عليها بعض التأثيرات :
<Canvas>
<Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">
الآن قم باضافة MediaElement ولنضع فيه صورة مثلاً ، سيكون ناتج XAML بالشكل التالي :
<MediaElement x:Name="MainImage" Source="c:/example/futex.jpg" Width="300" Height="300" >
</MediaElement>
والآن سنقوم بتطبيق بعض التأثيرات على ال Canvas حيث نطبق عملية الميل من خلال الخصائص ، سيكون ناتج XAML بالشكل التالي :
<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>
الآن قم بالضغط على F5 لتجربة العرض والذي سيكون بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/41214832040.jpg
سنحاول تطبيق نظرية الظل للصورة أيضاً ، لذا سنقوم بعمل Canvas ونضع فيه الصورة أيضاً ولكن مع زوايا ميل مختلفة هذه المرة بحيث تحاذي اطراف الصورة ، سيكون ناتج XAML بالشكل التالي :
<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">
<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>
وسيكون الناتج للصورة بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/51214832040.jpg
آخر نقطة سنتعامل معها هي اضافة الشفافية لصورة الظل ، من ضمن الخصائص أيضاً ، لذا ستجد ناتج ال XAML في النهاية بالشكل التالي :
<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">
<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>
قم بضبط بعض اعدادات ال Left وال Top يدوياً او من الكود لجعل صورة الظل منطبقة على الصورة الاصلية ، سيكون ناتج الصورة :
http://vb4arab.com/vb/uploaded/3/01214832482.jpg
الكود الكامل XAML :
<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>
لا تنس ان MediaElement يمكن ان تكون اي شيء ، لذا جرب مثلاً وضع فيديو وستجد ان نفس التأثير ينطبق عليه تماماً ...
طبعاً يمكنك نقل الكود كما هو إلى الفيجوال ستوديو وسيعمل بنفس الصورة .
قبل النهاية ، احب ان اذكرك بأنك كمبرمج لست مطالباً بمعرفة الكثير عن هذا العالم عالم Microsoft Expression فهو موجه اصلاً للمصممين ، كل ما يهمك هو التعامل مع ال XAML الناتجة فقط .
لتعلم كل ما تريد عن هذه المجموعة يمكنك البدء من هنا :
http://expression.microsoft.com/en-us/cc136522.aspx
إلى هنا تكون دروسنا حول WPF و XAML قد انتهت ، نلتقي في درس قادم غالباً بعنوان Object Serlization .
والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .
السلام عليكم ورحمة الله وبركاته .
سنحاول في هذا الدرس تعلم كيفية استخدام مجموعة Microsoft Expression Studio لانتاج اكواد XAML احترافيه يمكن استخدامها لاحقاً في تطبيقاتنا ، سنركز بالطبع على Blend لإنه الأشهر والأكثر استخداماً ، ولكن قبل ذلك سنتعرف على عناصر هذه المجموعة :
Microsoft Expression Web :
يتيح لك هذا البرنامج تصميم صفحاتك بطريقة مميزة ويساعدك على عمل صفحتك بأي صيغة موجودة مثل XHTML, CSS, XML, XSLT . الواجهة الرئيسية له بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/01214773770.jpg
يمكنك استخدام اي من الادوات التي تجدها لديك لتصميم صفحتك والتعديل على الخصائص ، هناك ايضاً مدقق HTML لمراقبة الأخطاء ، هناك خصائص لتسهيل التعامل مع ال styles مثلاً ، ليس هذا فقط بل يتيح لك البرنامج البرمجة من خلاله سواء من خلال Asp.net أو من خلال php .
للمزيد يمكنك البدء من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=web
Microsoft Expression Design
يسهل لك هذا البرنامج حلولاً مميزة لتسهيل تركيب الصور والرسوميات وخلافه ، الواجهة الرئيسية له بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/11214819385.jpg
المزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=design
Microsoft Expression Media
يتيح لك هذا البرنامج تعديل وتركيب وتكوين أفلامك المختلفة ، هذه صورة للواجهة :
http://vb4arab.com/vb/uploaded/3/01214819385.jpg
والمزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=media
Microsoft Expression Encoder :
يتيح لك السماح للزائر بالتفاعل مع عروضك ، يشكل البرنامج الأساسي لادارة Silver Light التقنية الجديدة من مايكروسوفت والمشابهة لتقنية Flash من Micromeida سابقاً ومن Adobe حالياً .
الواجهة الرئيسية للبرنامج :
http://vb4arab.com/vb/uploaded/3/01214820181.jpg
يمكنك البدء بمزيد من التفصيل هنا :
http://www.microsoft.com/expression/features/default.aspx?key=encoder
Expression Blend :
لتصميم واجهات برنامجك المختلفة ، حيث يوفر لك وسائل متعددة للتصميم ، سنحاول معرفة المزيد عنه بتفصيل في هذا الدرس ...
سنحاول الآن عمل تطبيق بسيط من خلال Expression Blend قم بتحميله أولاً من الروابط السابقة ، قم بتشغيله ومن ثم اختيار New Project ومن ثم WPF Application (*.exe) بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/01214832040.jpg
يمكنك اختيار اللغة التي تريد العمل عليها وال framework اضافة للاسم ومكان التخزين بالطبع .
من View اختر Active ******** View ومن ثم اختر الوضع Split لتتمكن من عرض XAML و العرض العادي في نفس الوقت بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/11214832040.jpg
على جانب الشاشة ، ستجد كل الأدوات التي تحتاج إليها للتصميم سواء القلم والفرشاة وخلافه ، أو أزرار الأوامر ومربعات النصوص وخلافه من الأدوات التي ستستخدمها في برنامجك ، ايضاً يمكنك الضغط على آخر عناصر القائمة ليستعرض لك جميع الأدوات بالشكل التالي مثلاً :
http://vb4arab.com/vb/uploaded/3/21214832040.jpg
خلال عملياتك في الرسم ، ستجد لأي اداة مجموعة من الخصائص على الجانب ، تستطيع منها التحكم بالمظهر وخلافه :
http://vb4arab.com/vb/uploaded/3/31214832040.jpg
الآن كتطبيق سريع ، قم باضافة Canvas وقم بتحديد ابعاده ، هذا هو ال Canvas الذي سنضع فيه صورة خاصة بنا ونطبق عليها بعض التأثيرات :
<Canvas>
<Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">
الآن قم باضافة MediaElement ولنضع فيه صورة مثلاً ، سيكون ناتج XAML بالشكل التالي :
<MediaElement x:Name="MainImage" Source="c:/example/futex.jpg" Width="300" Height="300" >
</MediaElement>
والآن سنقوم بتطبيق بعض التأثيرات على ال Canvas حيث نطبق عملية الميل من خلال الخصائص ، سيكون ناتج XAML بالشكل التالي :
<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>
الآن قم بالضغط على F5 لتجربة العرض والذي سيكون بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/41214832040.jpg
سنحاول تطبيق نظرية الظل للصورة أيضاً ، لذا سنقوم بعمل Canvas ونضع فيه الصورة أيضاً ولكن مع زوايا ميل مختلفة هذه المرة بحيث تحاذي اطراف الصورة ، سيكون ناتج XAML بالشكل التالي :
<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">
<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>
وسيكون الناتج للصورة بالشكل التالي :
http://vb4arab.com/vb/uploaded/3/51214832040.jpg
آخر نقطة سنتعامل معها هي اضافة الشفافية لصورة الظل ، من ضمن الخصائص أيضاً ، لذا ستجد ناتج ال XAML في النهاية بالشكل التالي :
<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">
<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>
قم بضبط بعض اعدادات ال Left وال Top يدوياً او من الكود لجعل صورة الظل منطبقة على الصورة الاصلية ، سيكون ناتج الصورة :
http://vb4arab.com/vb/uploaded/3/01214832482.jpg
الكود الكامل XAML :
<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>
لا تنس ان MediaElement يمكن ان تكون اي شيء ، لذا جرب مثلاً وضع فيديو وستجد ان نفس التأثير ينطبق عليه تماماً ...
طبعاً يمكنك نقل الكود كما هو إلى الفيجوال ستوديو وسيعمل بنفس الصورة .
قبل النهاية ، احب ان اذكرك بأنك كمبرمج لست مطالباً بمعرفة الكثير عن هذا العالم عالم Microsoft Expression فهو موجه اصلاً للمصممين ، كل ما يهمك هو التعامل مع ال XAML الناتجة فقط .
لتعلم كل ما تريد عن هذه المجموعة يمكنك البدء من هنا :
http://expression.microsoft.com/en-us/cc136522.aspx
إلى هنا تكون دروسنا حول WPF و XAML قد انتهت ، نلتقي في درس قادم غالباً بعنوان Object Serlization .
والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .