تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الدرس التاسع والخمسون - Microsoft Expression Studio
#1
كاتب الموضوع : أحمد جمال

بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .

سنحاول في هذا الدرس تعلم كيفية استخدام مجموعة Microsoft Expression Studio لانتاج اكواد XAML احترافيه يمكن استخدامها لاحقاً في تطبيقاتنا ، سنركز بالطبع على Blend لإنه الأشهر والأكثر استخداماً ، ولكن قبل ذلك سنتعرف على عناصر هذه المجموعة :
}}}
تم الشكر بواسطة:
#2
Microsoft Expression Web :
يتيح لك هذا البرنامج تصميم صفحاتك بطريقة مميزة ويساعدك على عمل صفحتك بأي صيغة موجودة مثل XHTML, CSS, XML, XSLT . الواجهة الرئيسية له بالشكل التالي :


يمكنك استخدام اي من الادوات التي تجدها لديك لتصميم صفحتك والتعديل على الخصائص ، هناك ايضاً مدقق HTML لمراقبة الأخطاء ، هناك خصائص لتسهيل التعامل مع ال styles مثلاً ، ليس هذا فقط بل يتيح لك البرنامج البرمجة من خلاله سواء من خلال Asp.net أو من خلال php .

للمزيد يمكنك البدء من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=web
}}}
تم الشكر بواسطة:
#3
Microsoft Expression Design
يسهل لك هذا البرنامج حلولاً مميزة لتسهيل تركيب الصور والرسوميات وخلافه ، الواجهة الرئيسية له بالشكل التالي :



المزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=design
}}}
تم الشكر بواسطة:
#4
Microsoft Expression Media

يتيح لك هذا البرنامج تعديل وتركيب وتكوين أفلامك المختلفة ، هذه صورة للواجهة :


والمزيد يمكنك معرفته من هنا :
http://www.microsoft.com/expression/features/default.aspx?key=media
}}}
تم الشكر بواسطة:
#5
Microsoft Expression Encoder :

يتيح لك السماح للزائر بالتفاعل مع عروضك ، يشكل البرنامج الأساسي لادارة Silver Light التقنية الجديدة من مايكروسوفت والمشابهة لتقنية Flash من Micromeida سابقاً ومن Adobe حالياً .


الواجهة الرئيسية للبرنامج :


يمكنك البدء بمزيد من التفصيل هنا :
http://www.microsoft.com/expression/features/default.aspx?key=encoder
}}}
تم الشكر بواسطة:
#6
Expression Blend :

لتصميم واجهات برنامجك المختلفة ، حيث يوفر لك وسائل متعددة للتصميم ، سنحاول معرفة المزيد عنه بتفصيل في هذا الدرس ...

سنحاول الآن عمل تطبيق بسيط من خلال Expression Blend قم بتحميله أولاً من الروابط السابقة ، قم بتشغيله ومن ثم اختيار New Project ومن ثم WPF Application (*.exe) بالشكل التالي :


يمكنك اختيار اللغة التي تريد العمل عليها وال framework اضافة للاسم ومكان التخزين بالطبع .
من View اختر Active Document View ومن ثم اختر الوضع Split لتتمكن من عرض XAML و العرض العادي في نفس الوقت بالشكل التالي :


على جانب الشاشة ، ستجد كل الأدوات التي تحتاج إليها للتصميم سواء القلم والفرشاة وخلافه ، أو أزرار الأوامر ومربعات النصوص وخلافه من الأدوات التي ستستخدمها في برنامجك ، ايضاً يمكنك الضغط على آخر عناصر القائمة ليستعرض لك جميع الأدوات بالشكل التالي مثلاً :


خلال عملياتك في الرسم ، ستجد لأي اداة مجموعة من الخصائص على الجانب ، تستطيع منها التحكم بالمظهر وخلافه :


الآن كتطبيق سريع ، قم باضافة Canvas وقم بتحديد ابعاده ، هذا هو ال Canvas الذي سنضع فيه صورة خاصة بنا ونطبق عليها بعض التأثيرات :


كود :
[FONT=Tahoma][color=#000080]<Canvas>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">[/color][/FONT]
الآن قم باضافة MediaElement ولنضع فيه صورة مثلاً ، سيكون ناتج XAML بالشكل التالي :

كود :
[FONT=Tahoma][color=#000080]<MediaElement x:Name="MainImage" Source=[COLOR=#0000ff]"c:/example/futex.jpg"[/color] Width=[color=#0000ff]"300"[/color] Height=[color=#0000ff]"300"[/color] >[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</MediaElement>[/color][/FONT]
والآن سنقوم بتطبيق بعض التأثيرات على ال Canvas حيث نطبق عملية الميل من خلال الخصائص ، سيكون ناتج XAML بالشكل التالي :

كود :
[FONT=Tahoma][color=#000080]<Canvas.RenderTransform>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<SkewTransform x:Name="MainSkewTransform" AngleY=[COLOR=#0000ff]"-19"[/color] AngleX=[color=#0000ff]"0"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color]/>[/COLOR] [/FONT]
[FONT=Tahoma] [color=#000080]<ScaleTransform x:Name="MainScaleTransform" ScaleY=[COLOR=#0000ff]"1"[/color] ScaleX = "1" CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color]/>[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas.RenderTransform>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas>[/color][/FONT]
الآن قم بالضغط على F5 لتجربة العرض والذي سيكون بالشكل التالي :


سنحاول تطبيق نظرية الظل للصورة أيضاً ، لذا سنقوم بعمل Canvas ونضع فيه الصورة أيضاً ولكن مع زوايا ميل مختلفة هذه المرة بحيث تحاذي اطراف الصورة ، سيكون ناتج XAML بالشكل التالي :


كود :
[FONT=Tahoma][color=#000080]<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">[/color][/FONT]
[FONT=Tahoma] [color=#000080]<MediaElement x:Name="ReflImage" Source=[COLOR=#0000ff]"c:/example/futex.jpg"[/color] Width=[color=#0000ff]"300"[/color] Height=[color=#0000ff]"300"[/color] Volume=[color=#0000ff]"0"[/color]>[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</MediaElement>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<Canvas.RenderTransform>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<SkewTransform x:Name="ReflectionSkewTransform" AngleY=[COLOR=#0000ff]"19"[/color] AngleX=[color=#0000ff]"-41"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]<ScaleTransform x:Name="ReflectionScaleTransform" ScaleY=[COLOR=#0000ff]"-1"[/color] ScaleX=[color=#0000ff]"1"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas.RenderTransform>[/color][/FONT]

[FONT=Tahoma] [color=#000080]</Canvas>[/color][/FONT]
وسيكون الناتج للصورة بالشكل التالي :


آخر نقطة سنتعامل معها هي اضافة الشفافية لصورة الظل ، من ضمن الخصائص أيضاً ، لذا ستجد ناتج ال XAML في النهاية بالشكل التالي :


كود :
[FONT=Tahoma][color=#000080]<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640">[/color][/FONT]
[FONT=Tahoma] [color=#000080]<MediaElement x:Name="ReflImage" Source=[COLOR=#0000ff]"c:/example/futex.jpg"[/color] Width=[color=#0000ff]"300"[/color] Height=[color=#0000ff]"300"[/color] Volume=[color=#0000ff]"0"[/color]>[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</MediaElement>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<Canvas.RenderTransform>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<SkewTransform x:Name="ReflectionSkewTransform" AngleY=[COLOR=#0000ff]"19"[/color] AngleX=[color=#0000ff]"-41"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]<ScaleTransform x:Name="ReflectionScaleTransform" ScaleY=[COLOR=#0000ff]"-1"[/color] ScaleX=[color=#0000ff]"1"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</TransformGroup>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas.RenderTransform>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<Canvas.OpacityMask>[/color][/FONT]
[FONT=Tahoma] [color=#000080]<LinearGradientBrush StartPoint=[COLOR=#0000ff]"0.5,0.0"[/color] EndPoint=[color=#0000ff]"0.5,1.0"[/color]>[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]<GradientStop Offset=[COLOR=#0000ff]"0.345"[/color] Color=[color=#0000ff]"#00000000"[/color] x:Name="ReflGradientStop1" />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]<GradientStop Offset=[COLOR=#0000ff]"1.0"[/color] Color=[color=#0000ff]"#CC000000"[/color] x:Name="ReflGradientStop2" />[/COLOR][/FONT]
[FONT=Tahoma] [color=#000080]</LinearGradientBrush>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas.OpacityMask>[/color][/FONT]
[FONT=Tahoma] [color=#000080]</Canvas>[/color][/FONT]

قم بضبط بعض اعدادات ال Left وال Top يدوياً او من الكود لجعل صورة الظل منطبقة على الصورة الاصلية ، سيكون ناتج الصورة :



الكود الكامل XAML :


كود :
[color=#000080]<Canvas>[/color]
[color=#000080]<Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">[/color]

[color=#000080]<MediaElement x:Name="MainImage" Source=[COLOR=#0000ff]"c:/example/FUTEX.JPG"[/color] Width=[color=#0000ff]"300"[/color] Height=[color=#0000ff]"300"[/color] >[/COLOR]
[color=#000080]</MediaElement>[/color]
[color=#000080]<Canvas.RenderTransform>[/color]
[color=#000080]<TransformGroup>[/color]
[color=#000080]<SkewTransform x:Name="MainSkewTransform" AngleY=[COLOR=#0000ff]"-19"[/color] AngleX=[color=#0000ff]"0"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color]/>[/COLOR]
[color=#000080]<ScaleTransform x:Name="MainScaleTransform" ScaleY=[COLOR=#0000ff]"1"[/color] ScaleX = "1" CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color]/>[/COLOR]
[color=#000080]</TransformGroup>[/color]
[color=#000080]</Canvas.RenderTransform>[/color]
[color=#000080]</Canvas>[/color]
[color=#000080]<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="267" Canvas.Top="645">[/color]
[color=#000080]<MediaElement x:Name="ReflImage" Source=[COLOR=#0000ff]"c:/example/futex.jpg"[/color] Width=[color=#0000ff]"300"[/color] Height=[color=#0000ff]"300"[/color] Volume=[color=#0000ff]"0"[/color]>[/COLOR]
[color=#000080]</MediaElement>[/color]
[color=#000080]<Canvas.RenderTransform>[/color]
[color=#000080]<TransformGroup>[/color]
[color=#000080]<SkewTransform x:Name="ReflectionSkewTransform" AngleY=[COLOR=#0000ff]"19"[/color] AngleX=[color=#0000ff]"-41"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR]
[color=#000080]<ScaleTransform x:Name="ReflectionScaleTransform" ScaleY=[COLOR=#0000ff]"-1"[/color] ScaleX=[color=#0000ff]"1"[/color] CenterX=[color=#0000ff]"0"[/color] CenterY=[color=#0000ff]"0"[/color] />[/COLOR]
[color=#000080]</TransformGroup>[/color]
[color=#000080]</Canvas.RenderTransform>[/color]
[color=#000080]<Canvas.OpacityMask>[/color]
[color=#000080]<LinearGradientBrush StartPoint=[COLOR=#0000ff]"0.5,0.0"[/color] EndPoint=[color=#0000ff]"0.5,1.0"[/color]>[/COLOR]
[color=#000080]<GradientStop Offset=[COLOR=#0000ff]"0.345"[/color] Color=[color=#0000ff]"#00000000"[/color] x:Name="ReflGradientStop1" />[/COLOR]
[color=#000080]<GradientStop Offset=[COLOR=#0000ff]"1.0"[/color] Color=[color=#0000ff]"#CC000000"[/color] x:Name="ReflGradientStop2" />[/COLOR]
[color=#000080]</LinearGradientBrush>[/color]
[color=#000080]</Canvas.OpacityMask>[/color]
[color=#000080]</Canvas>[/color]
[color=#000080]</Canvas>[/color]
لا تنس ان MediaElement يمكن ان تكون اي شيء ، لذا جرب مثلاً وضع فيديو وستجد ان نفس التأثير ينطبق عليه تماماً ...

طبعاً يمكنك نقل الكود كما هو إلى الفيجوال ستوديو وسيعمل بنفس الصورة .
}}}
تم الشكر بواسطة:
#7
قبل النهاية ، احب ان اذكرك بأنك كمبرمج لست مطالباً بمعرفة الكثير عن هذا العالم عالم Microsoft Expression فهو موجه اصلاً للمصممين ، كل ما يهمك هو التعامل مع ال XAML الناتجة فقط .

لتعلم كل ما تريد عن هذه المجموعة يمكنك البدء من هنا :
http://expression.microsoft.com/en-us/cc136522.aspx

إلى هنا تكون دروسنا حول WPF و XAML قد انتهت ، نلتقي في درس قادم غالباً بعنوان Object Serlization .

والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .

}}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم