الدرس السابع والخمسون : Wpf 2d - دورة .net 2008

[khaledbelal]

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

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

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

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

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

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

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

<Rectangle Height="100" Width="200" Stroke="Red"
StrokeThickness="2" Fill="Aqua" />

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



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



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



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



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

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

<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 للتدرج الدائري :

<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>

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

<Rectangle Height ="100" Width ="300">
<Rectangle.Fill>
<ImageBrush>
<ImageBrush.ImageSource>
<BitmapImage UriSource ="pic.JPG"/>
</ImageBrush.ImageSource>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>

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



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


ال Transformations :

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

<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://www.codeproject.com/KB/WPF/Tr...ionsIntro.aspx

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



ال 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) 


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



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



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

كود 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 :

<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 بالشكل التالي مثلاً :

<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>

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

<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" />

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




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

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

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

والناتج :




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

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

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

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

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

<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>

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



برمجياً :

مثال منقول من 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;
}
} 


والناتج :



ال Templates :

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

<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>

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

<Button Name ="myButton" Foreground ="Black" FontSize ="20" FontWeight ="Bold"
Template ="{StaticResource roundButtonTemplate}"
Click ="myButton_Click"> Click!
</Button>

والناتج :



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

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

[المشتاقة للجنة]

ولو اني لا افهم في هذه الاشياء الا اني اقول انه عمل رائع بارك الله فيكم وزادكم من فضله

[khaledbelal]

وفيكم بارك الله وزادكم الله من علمه