مشاريع
أقسام المقالات
Total Articles: 19
مؤتمرات وأحداث
مراكز وانجازات
.net 2008 Course
آخر 10 مواضيع
كتب وملخصات
Tips & Tricks
Expression Blend
الأحد، ٢٤ أغسطس ٢٠٠٨

 

ضمن التقنيات الجديدة التي ظهرت مع .net كانت تقنية WPF ، ومن اجل تطبيق اوسع لهذه التقنية قامت مايكروسوفت بتوفيرمجموعة من البرامج لتساعد في انتاج أكواد WPF ، واحد من هذه المجموعة كان Expression Blend  لتصميم واجهات برنامجك المختلفة ، حيث يوفر لك وسائل متعددة للتصميم ، سنحاول معرفة المزيد عنه بتفصيل في هذا الدرس ...


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

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

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

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

الآن كتطبيق سريع ، قم باضافة 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 لتجربة العرض والذي سيكون بالشكل التالي :

سنحاول تطبيق نظرية الظل للصورة أيضاً ، لذا سنقوم بعمل 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>

وسيكون الناتج للصورة بالشكل التالي :

آخر نقطة سنتعامل معها هي اضافة الشفافية لصورة الظل ، من ضمن الخصائص أيضاً ، لذا ستجد ناتج ال 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 يدوياً او من الكود لجعل صورة الظل منطبقة على الصورة الاصلية ، سيكون ناتج الصورة :

الكود الكامل 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 يمكن ان تكون اي شيء ، لذا جرب مثلاً وضع فيديو وستجد ان نفس التأثير ينطبق عليه تماماً ...
طبعاً يمكنك نقل الكود كما هو إلى الفيجوال ستوديو وسيعمل بنفس الصورة ، انشأ مشروع من نوع WPF وجرب .

بالتوفيق ...

تم التحرير بواسطة Ahmed Gamal @ ١٢:٥٣ ص  
1 Comments:
إرسال تعليق
<< Home
 
الصفحة الرئيسية
Google Search
Google
       

كتاب المدونة
من نحن ؟
مجموعة من الكتاب باللغة العربية بلغة الدوت نت ، نلتقي هنا لكي نتشارك الخبرات والمعلومات حول الجديد في عالم الدوت نت
ارشيف المواضيغ والمقالات السابقة
VB.net <> C#

الفروقات بين سي شارب و في بي . نت
روابط ومواقع تقنية عربية
عداد الزيارات
Locations of visitors to this page
أشخاص شرفونا بزيارتهم
مركز التحميل
© 2005 DotNet4Arab Blogspot Template by Isnaini Dot Com