منتدى رياض الجنة - Riad Al-Ganah - الدرس السابع والخمسون : Wpf 2d

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

نواصل في درسنا اليوم الحديث عن تقنيات WPF سيكون هذا في الواقع آخر درس تقني لنا وفي الدرس القادم سنختتم دروس WPF بتطبيقات سريعة على مجموعة Expression Studio .

درسنا اليوم سيتحدث عن تقنيات جديدة للرسوميات 2D في ال WPF ، سنتعرف على تقنيات شبيهة بتلك التي تعاملنا معها في GDI+ ولكن هذه المرة من خلال WPF .

بداية تحتوي خيارات الرسم على واحد من الفئات التالية :

System.Windows.Shapes
System.Windows.Media.Drawing
System.Windows.Media.Visual

الرسم باستخدام Shapes :

تقع جميع الاشكال تحت الفئة System.Windows.Shapes ، نبدأ بابسط مثال لرسم مستطيل مثلاً :

كود بلغة HTML:

<Rectangle Height="100" Width="200" Stroke="Red"

StrokeThickness="2" Fill="Aqua" />

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

http://vb4arab.com/vb/uploaded/3/01214738046.jpg

الأشكال التي يمكنك رسمها يمكنك الوصول إليها عن طريق Object Browser بالشكل التالي مثلاً :

http://vb4arab.com/vb/uploaded/3/11214738046.jpg

ويمكننا التعرف على الخصائص التي يمكن ان نجدها لأي شكل منهم ، الشكل التالي كمثال :

http://vb4arab.com/vb/uploaded/3/21214738046.jpg

كما يمكنك التعرف على الخصائص العامة لل shapes الموجودة في الصورة التالية مثلاً :

http://vb4arab.com/vb/uploaded/3/31214738046.jpg

خصائص القلم Pen :

يتم تعريف القلم المستخدم في اي عملية رسم بالصورة التالية مثلاً :

كود بلغة HTML:

<Pen Thickness="10" LineJoin="Round" EndLineCap="Triangle" StartLineCap="Round" />

شبيه جداً لو لاحظت بما تعلمناه في GDI+ .

خصائص الفرشاة Brush :

هناك عدة انوع من الفرش يمكن استخدامها في تطبيقاتك ، منها :

DrawingBrush : تلوين عادي .
ImageBrush : تلوين جزء من الشكل بجزء من صورة .
LinearGradientBrush : تدرج خطي لعدة الون .
RadialGradientBrush : تدرج دائري لعدة الوان .
SolidColorBrush : فرشاة للون واحد فقط .

ابسط مثال عليها هي الفرشاة Solid بلون واحد فقط :

كود PHP:


		
			
<Ellipse Height ="50" Width ="50">

            <Ellipse.Fill>

                <SolidColorBrush Color ="Aqua"/>

            </Ellipse.Fill>

        </Ellipse>

مثال باستخدام RadialGradientBrush للتدرج الدائري :

كود بلغة HTML:

<Ellipse Width ="75" HorizontalAlignment="Left" Margin="28,30,0,96">

            <Ellipse.Fill>

                <RadialGradientBrush GradientOrigin="0.5,0.5"

Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">

                    

                    <GradientStop Color="Yellow" Offset="0" />

                    <GradientStop Color="Red" Offset="0.25" />

                    <GradientStop Color="Blue" Offset="0.75" />

                    <GradientStop Color="LimeGreen" Offset="1" />

                </RadialGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

وأخيراً مثال لطباعة جزء من صورة داخل شكل :

كود بلغة HTML:

<Rectangle Height ="100" Width ="300">

<Rectangle.Fill>

<ImageBrush>

<ImageBrush.ImageSource>

<BitmapImage UriSource ="pic.JPG"/>

</ImageBrush.ImageSource>

</ImageBrush>

</Rectangle.Fill>

</Rectangle>

ناتج من موقع مايكروسوفت لاستخدامات الفرش المختلفة :

http://i.msdn.microsoft.com/Aa970904...-us,VS.90).jpg

وهذا الرابط لمزيد من التفاصيل .
http://msdn.microsoft.com/en-us/library/aa970904.aspx

ال Transformations :

ستفيدك كثيراً هذه الخصائص في حالة برمجة العناصر المتحركة او المتأثرة بمدخلات المستخدم ، حيث يمكنك تحريك الأشكال وتدويرها وعكسها وخلافه من العمليات المعروفة .
المثال التالي يوضح بعض التأثيرات على مجموعة من الأدوات الموجودة لدينا في الفورم :

كود بلغة HTML:

<Button Height="23" Margin="72,72,0,0" Name="button1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75">Button

            <Button.RenderTransform>

                <SkewTransform AngleX ="30" AngleY ="20"/>

            </Button.RenderTransform>

            

        </Button>

        <TextBox Margin="142,11,59,0" Name="textBox1" Height="23" VerticalAlignment="Top">Ahmed

            <TextBox.RenderTransform>

                <TransformGroup>

                    <SkewTransform AngleX ="20" AngleY ="20"/>

                    <RotateTransform Angle ="45"/>

                    <SkewTransform AngleX ="5" AngleY ="20"/>

                </TransformGroup>

            </TextBox.RenderTransform>

        </TextBox>

وهذه صورة للناتج :

http://vb4arab.com/vb/uploaded/3/01214770042.gif

على هذا الرابط تطبيق جميل جداً للتأثير بصور مختلفة على اي شكل :
http://www.codeproject.com/KB/WPF/Tr...ionsIntro.aspx

هذه صورة التطبيق :

http://www.codeproject.com/KB/WPF/Tr...Intro/main.jpg

ال Animation في WPF :

تقع كافة الخصائص والدوال المتعلقة بعمليات التحريك وال Animation تحت الفئة System.Windows.Media.Animation ، اي حركة تحصل لأي اداة لديك لا بد لها من ثلاث خصائص : From ، To ، By : حيث تحدد نقطة البداية والنهاية والخاصية التي يتم فيها التحريك ، وهو ما سنتعرف عليه لاحقاً ...

ولأي حركة هناك ايضاً timeline ، اهم عناصره هي :

AccelerationRatio, DecelerationRatio : للتحكم في سرعة الحركة .
AutoReverse : للعودة للخلف بعد انتهاء الحركة .
BeginTime This : الوقت الذي تبدأ بعده الحركة ، القيمة 0 تعني البدء المباشر .
Duration : الفترة التي تستغرقها عملية الحركة .
FillBehavior, RepeatBehavior : تحديد ماذا سيحدث بعد انتهاء الحركة سواء الاعادة أو خلافه .

مثال ، تغيير حجم الخط في Label :
C#:

كود PHP:


		
			
DoubleAnimation dblAnim = new DoubleAnimation();

            dblAnim.From = 10;

            dblAnim.To = 30;

            label1.BeginAnimation(Label.FontSizeProperty, dblAnim);

vb.net:

كود PHP:


		
			
Dim dblAnim As New DoubleAnimation() 

dblAnim.From = 10 

dblAnim.[To] = 30 

label1.BeginAnimation(Label.FontSizeProperty, dblAnim)

بداية الحركة :

http://vb4arab.com/vb/uploaded/3/01214770107.jpg

نهاية الحركة :

http://vb4arab.com/vb/uploaded/3/11214770107.jpg

يمكن تحديد مدة الحركة بالشكل التالي مثلاً :

كود PHP:


		
			
dblAnim.Duration = new Duration(TimeSpan.FromSeconds(4)) ;

ولعكس الحركة بعد الانتهاء :

كود PHP:


		
			
dblAnim.AutoReverse = true;

ويمكننا تحديد اعادة العرض بعد انتهاءه :

كود PHP:


		
			
dblAnim.RepeatBehavior = RepeatBehavior.Forever;

او اعادته لاربع مرات مثلاً :

كود PHP:


		
			
dblAnim.RepeatBehavior = new RepeatBehavior(4);

الحركة باستخدام XAML :

كما اتفقنا منذ اللحظة الأولى لدروسنا لهذا الاسبوع ، انه بالامكان تطبيق اي من الاوامر عن طريق XAML او عن طريق الكود كون جميع هذه الخصائص يمكن الوصول إليها من الكود والعكس ، الآن لدينا مثال حول جعل Button يقوم بالدوران حول نفسه في حالة الضغط عليه بالماوس - من كتاب Pro CSharp 2008 :

كود بلغة HTML:

<Button Name="myAnimatedButton" Width="120" Height = "40"

RenderTransformOrigin="0.5,0.5" ******* = "OK">

<Button.RenderTransform>

<RotateTransform Angle="0"/>

</Button.RenderTransform>

<!-- The animation is triggered when the button is clicked -->

<Button.Triggers>

<EventTrigger RoutedEvent="Button.Click">

<BeginStoryboard>

<Storyboard>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="myAnimatedButton"

Storyboard.TargetProperty=

"(Button.RenderTransform).(RotateTransform.Angle)"

Duration="0:0:2" FillBehavior="Stop">

<DoubleAnimationUsingKeyFrames.KeyFrames>

<LinearDoubleKeyFrame Value="360" KeyTime="0:0:1" />

<DiscreteDoubleKeyFrame Value="180" KeyTime="0:0:1.5" />

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

تعريف styles :

إذا كنت قد جربت سابقاً اي نوع من برمجة الويب كنت ستعرف ان لدينا ما يعرف باسم styles وهي مجموعة من الخصائص تحدد الطول والعرض والالوان وخلافه تحت مسمى مثلاً darkstyle ، بحيث يمكن بعد ذلك استخدامها في اي اداة بكتابة اسم ال style فقط .

هذا هو ما نحتاج إليه أيضاً في ال WPF حيث اننا لن نقوم بكتابة كل هذا الحجم من التوصيف لكل زر امر مثلاً في حالة أن لدينا عدة ازرار أمر لها نفس ال style ، لذا سنقوم بتعريف style بالشكل التالي مثلاً :

كود بلغة HTML:

<Window.Resources>

            <Style x:Key ="darkstyle">

                <Setter Property ="Button.FontSize" Value ="15"/>

                <Setter Property ="Button.Background">

                    <Setter.Value>

                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                            <GradientStop Color="Black" Offset="0" />

                            <GradientStop Color="Blue" Offset="0.25" />

                            <GradientStop Color="Brown" Offset="1" />

                            

                        </LinearGradientBrush>

                    </Setter.Value>

                </Setter>

            </Style>

        </Window.Resources>

والآن لكل زر أمر يكفي التعريف بالشكل التالي :

كود بلغة HTML:

<Button Name="b1" Width = "100"

Style ="{StaticResource darkstyle}" ******* = "Button 1" HorizontalAlignment="Right" Margin="0,61,30,61" />

            <Button Name="b2" Width = "100"

Style ="{StaticResource darkstyle}" ******* = "Button 2" HorizontalAlignment="Left" Margin="25,61,0,61" />

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

http://vb4arab.com/vb/uploaded/3/01214770333.jpg

تغيير طبيعة ال style

يمكنك تعريف اشياء مخصصة لتغيير الموجود في ال style المستخدم ، مثلاً لتحديد زر امر حجم الخط ولونه فيه مختلف لا يلزم تغيير ال style بالكامل بل يكفي كتابته بالشكل التالي :

كود بلغة HTML:

<Button Name="b2" Width = "100"

Style ="{StaticResource darkstyle}" ******* = "Button 2" HorizontalAlignment="Left" Margin="25,61,0,61" FontSize="30" />

والناتج :

http://vb4arab.com/vb/uploaded/3/11214770333.jpg

اشتقاق Style من آخر :

لعمل style جديد يتم أخذه من style قديم يمكن كتابة تعريفه بالشكل التالي :

كود بلغة HTML:

<Style x:Key ="darkredstyle" ****dOn = "{StaticResource darkstyle}">

تصميم style باستخدام Triggers .

يمكنك ال Triggers من تحديد حالات للاداة مرتبطة بحدث مرور الماوس او غيره ، فمثلاً لتلوين مربع نص بلون مختلف عند حصوله على التحديد نكتب style بالشكل التالي :

كود بلغة HTML:

<Window.Resources>

        <Style x:Key ="txtstyle" TargetType = "{x:Type TextBox}">

            <Setter Property = "Background" Value = "White"/>

            

            <Style.Triggers>

                <Trigger Property = "IsFocused" Value = "True">

                    <Setter Property = "Background" Value = "Yellow"/>

                </Trigger>

            </Style.Triggers>

        </Style>

    </Window.Resources>

والناتج لمربع النص الذي عليه التحديد :

http://vb4arab.com/vb/uploaded/3/01214770523.jpg

برمجياً :

مثال منقول من Pro CSharp 2008 ، اضافة عناصر للقائمة بها مجموعة من ال styles ومن ثم تحديد style زر الامر ليحتوي على أحدها بالشكل التالي مثلاً :

كود PHP:


		
			
public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

// Add items to our list box.

lstStyles.Items.Add("TiltStyle");

lstStyles.Items.Add("GreenStyle");

lstStyles.Items.Add("MouseOverStyle");

}

protected void comboStyles_Changed(object sender, RoutedEventArgs args)

{

// Get the selected style name from the list box.

System.Windows.Style currStyle = (System.Windows.Style)

FindResource(lstStyles.SelectedValue);

// Set the style of the button type.

this.btnMouseOverStyle.Style = currStyle;

}

}

والناتج :

http://vb4arab.com/vb/uploaded/3/11214770523.jpg

ال Templates :

تستخدم ايضاً لتغيير خصائص الأدوات ، ولكن الفارق بينها وبين styles انها تستطيع ان تلغي بالكامل الطبيعة الاساسية للأداة ، مثلاً هذه ال Templates :

كود بلغة HTML:

<Grid.Resources>

<!-- A simple template for a round button for items in this grid -->

<ControlTemplate x:Key ="roundButtonTemplate" TargetType ="{x:Type Button}">

<Grid>

<Ellipse Name ="OuterRing" Width ="75" Height ="75" Fill ="DarkGreen"/>

<Ellipse Name ="InnerRing" Width ="60" Height ="60" Fill ="MintCream"/>

<ContentPresenter HorizontalAlignment="Center"

VerticalAlignment="Center"/>

</Grid>

</ControlTemplate>

</Grid.Resources>

والآن يمكنك تحديدها لزر أمر مثلاً :

كود بلغة HTML:

<Button Name ="myButton" Foreground ="Black" FontSize ="20" FontWeight ="Bold"

Template ="{StaticResource roundButtonTemplate}"

Click ="myButton_Click"> Click!

</Button>

والناتج :

http://vb4arab.com/vb/uploaded/3/01214770680.jpg

حلقتنا القادمة ستكون مقدمة عن WPF 3D ...

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