Transcript Shapes - תכנות מונחה עצמים ב-#C

‫תכנות אסינכרוני‪,‬‬
‫תקשורת ופיתוח‬
‫אפליקציות ל‪-‬‬
‫‪Windows 8.1‬‬
‫ואפליקציות ל‪-‬‬
‫‪Windows Phone 8‬‬
‫‪Graphics And Animation‬‬
Graphics And
Animation
1.
Understanding Graphical Rendering Services
2.
Shapes
3.
Brushes
4.
Transformations
5.
Drawings and Geometries
6.
Animation
‫‪Understanding Graphical Rendering Services‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫פרק זה עוסק ביכולות בגרפיות של ‪.WPF‬‬
‫‪ WPF‬מציגה תשתית מקיפה‪ ,‬ניתנת להרחבה‪ ,‬ובעלת גמישות רבה של יכולות גרפיות‪.‬‬
‫יתרונות ‪ WPF‬בגרפיקה‪:‬‬
‫‪ – device-independent pixel ‬אין תלות בחומרה ‪ -‬יחידה בסיסית של מדידה היא "פיקסל‬
‫עצמאי" או פיקסל "לוגי" שגודלו ‪ 1/96‬אינצ' ללא קשר לרזולוציית המסך בפועל‪ ,‬כל פיקסל מותאם‬
‫ליחידות ה‪ )Dots Per Inch ( DPI -‬של המערכת (פיקסל פיזי)‪.‬‬
‫‪ – double-precision floating-point ‬מערכת הקואורדינטות נמדדת באמצעות הטיפוס ‪Double‬‬
‫ולא ‪ Int‬ולכן מקבלים דיוק הרבה יותר גבוה (תכונה הנתמכת על ידי כרטיסי המסך החדישים)‪.‬‬
‫‪ ‬תמיכה ב‪ - scRGB -‬שימושי ביותר באלגוריתמים לעיבוד תמונה‪ ,‬בשימושיים מדעיים ורפואיים‪.‬‬
‫‪ ‬גרפיקה מתקדמת ותמיכה באנימציה‪ ,‬ניהול סצנות אנימציה‪ ,‬עיבוד תמונה‪ ,‬ועוד‪...‬‬
‫‪ ‬האצת חומרה ‪ WPF -‬מנצלת חומרה גרפית כדי לצמצם את השימוש במעבד‪.‬‬
‫‪Understanding Graphical Rendering Services‬‬
‫‪‬‬
‫‪ WPF‬מספקת שלוש גישות שונות לעיבוד גרפי‪:‬‬
‫‪ – Shapes ‬ב‪ WPF -‬מוגר מרחב השמות ‪ System.Windows.Shapes‬אשר מגדיר מספר קטן של‬
‫מחלקות לעיבוד אובייקטים גיאומטריים דו ממדיים (מלבן‪ ,‬אליפסה‪ ,‬פוליגון‪ ,‬קו וכו ')‪ .‬מחלקות אלו הן‬
‫פשוטות וקלות מאוד לשימוש‬
‫‪ - Drawing and Geometries ‬עיבוד אובייקטים גראפיים באמצעות מחלקות נגזרות של המחלקה‬
‫המופשטת ‪. System.Windows.Media.Drawing‬‬
‫על ידי שימוש במחלקות כגון ‪ GeometryDrawing‬או ‪ ImageDrawing‬ניתן לעבד נתונים גרפיים‬
‫בשיטה שהיא לא עשירה כל כך ביכולות אולם חסכונית במשאבים‪.‬‬
‫‪ -Visuals ‬השיטה המהירה והקלה ביותר לעיבוד מידע גרפי ב‪ WPF -‬על ידי שימוש במחלקות‬
‫היורשות את המחלקה ‪ .System.Windows.Media.Visual‬אין תמיכה ב‪.XAML -‬‬
‫‪‬‬
‫ההבדל בין הגישות הוא בשלושה ממדים‪:‬‬
‫פשטות הפיתוח‪ ,‬שימוש בזיכרון וביצועים‪.‬‬
‫‪‬‬
‫באפליקציה גראפית מבוססת ‪ WPF‬יכולים להתקיים אלפי אובייקטים גראפיים ולכן לבחירת‬
‫השיטה יש השפעה ניכרת‪.‬‬
‫‪‬‬
‫ישנם מיקרים שבאותה אפליקציה נשתמש בשלושת הגישות מקביל‪.‬‬
‫‪Understanding Graphical Rendering‬‬
‫‪Services‬‬
‫לדוגמה‪:‬‬
‫‪‬‬
‫‪ Drawings and Geometries‬יותר נוחים לתכנות מודלים וקטוריים‪ ,‬אבל דורשים יותר קוד‬
‫על מנת לתכנת אינטראקטיביות עם המשתמש‪.‬‬
‫‪‬‬
‫‪ – Visual‬מאוד נוח ומהיר כאשר זקוקים לצייר כמות גדולה מאוד של נתונים‪.‬‬
‫‪Shapes‬‬
‫‪‬‬
‫השיטה הפשוטה ביותר לצייר אלמנטים דו ממדיים‪ ,‬בשל פשטותה מכונה גם ‪drawing‬‬
‫‪.primitives‬‬
‫‪‬‬
‫משתמשים בה במחלקות פשוטות המייצגות מלבנים‪ ,‬אליפסות‪ ,‬קווים‪ ,‬פוליגונים היורשות את‬
‫המחלקה הבסיסית ‪. Shape‬‬
‫‪‬‬
‫מספר קטן של מחלקות נגזרות‪.‬‬
‫‪Shapes‬‬
‫‪DispatcherObject‬‬
‫מוגדרת במרחב השמות ‪ ,System.Threading‬כל המחלקות‬
‫היורשות ממנה הם ‪.Single Thread Apartment – STA‬‬
‫המחלקות היורשות אותה יכולות להתקיים רק ב‪ thread -‬שבה‬
‫הם נוצרו ולכן הם ‪.Thread Unsafe‬‬
‫‪DependencyObject‬‬
‫‪Visual‬‬
‫מחלקת חובה עבור תמיכה ב‪.dependency properties -‬‬
‫סוג שונה ומתוחכם של מאפיינים (שהוא לא בדיוק מאפיין‬
‫אמיתי) שימושי במיוחד בהגדרות ‪Change ,Style‬‬
‫‪ Data Binding ,Notification‬וכו'‪.‬‬
‫משפר ביצועים ומאפשר הוספת פונקציונאליות תוך חיסכון‬
‫במשאבים‪.‬‬
‫הוספת תמיכה ביכולות בסיסיות של אלמנטים ויזואליים‬
‫ללכוד או להעלות אירועים‪ ,‬הפצת האירוע לגורמים נוספים‬
‫(‪ ,)Routed Event‬הגדרות ‪ Layout‬של הפקד‪ ,‬והגדרת‬
‫פוקוס‪.‬‬
‫‪UIElement‬‬
‫‪FrameworkElement‬‬
‫מרחיב ומשכלל את היכולות של ‪ ,UIElement‬מסויף‬
‫תמיכה בסגנונות‪ ,tooltips ,‬אנימציה‪ ,‬יכולות נוספות‬
‫של ‪..... Data Binding‬‬
‫‪Polyline‬‬
‫מחלקת הבסיס של כל המחלקות שיש להם אספקטים‬
‫ויזאליים (פקדים למשל‪ ,‬אובייקטים גראפיים‪ ,‬רכיבי‬
‫‪ ,)Layout‬מגדיר‪ ,‬בין השאר‪ ,‬את "מנוע הציור"‬
‫(‪ ,)Rendering‬איפשור לכידת אירועי עכבר ( ‪hit‬‬
‫‪ ,)testing‬גבולות הפקד (‪... )Bounding‬‬
‫מחלקת הבסיס של כל הצורות‬
‫הגיאומטריות‬
‫‪Shape‬‬
‫‪Line‬‬
‫‪Ellipse‬‬
‫‪Polygon‬‬
‫‪Rectangle‬‬
‫‪Path‬‬
Shapes
Rectangles And Ellipse
<StackPanel Width="400">
<Ellipse Fill="Yellow" Stroke="Blue" StrokeThickness="4" Height="150" Width="200" Margin="15"></Ellipse>
<Rectangle Fill="Beige" Stroke="Chocolate" StrokeThickness="7" Height="150" Width="200" Margin="15"
HorizontalAlignment="Left"></Rectangle>
</StackPanel>
<Canvas Width="400">
<Ellipse Fill="Yellow" Stroke="Blue" StrokeThickness="4" Height="150" Width="200" Canvas.Top="10"
Canvas.Left="20" ></Ellipse>
<Rectangle Fill="Beige" Stroke="Chocolate" StrokeThickness="7" Height="150" Width="200"
Canvas.Top="100" Canvas.Left="120"></Rectangle>
</Canvas>
RectangleAndEllipse :‫דוגמת קוד‬
Shapes
Rectangles And Ellipse
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Rectangle rect = new Rectangle();
rect.Width = 200;
rect.Height = 150;
rect.Fill = new SolidColorBrush(Colors.Red);
rect.Stroke = new SolidColorBrush(Colors.RoyalBlue);
rect.StrokeThickness = 5;
Canvas.SetTop(rect, 20);
Canvas.SetLeft(rect, 30);
canvas.Children.Add(rect);
RectangleAndEllipseInCode :‫דוגמת קוד‬
Shapes
ViewBox
‫מאפשר לאלמנטים גרפיים לשנות את גודלם ביחס לשינוי גודל החלון בו הם מוצבים ולשמור על‬
.‫קנה מידה ביניהם‬
<Grid>
<Viewbox >
<Canvas Width="525" Height="350">
<Ellipse Fill="Yellow" Stroke="Blue" StrokeThickness="4" Height="150" Width="200"
Canvas.Top="10" Canvas.Left="20" ></Ellipse>
<Rectangle Fill="Beige" Stroke="Chocolate" StrokeThickness="7" Height="150" Width="200"
Canvas.Top="100" Canvas.Left="120"></Rectangle>
</Canvas>
</Viewbox>
</Grid>
ViewBoxSample :‫דוגמת קוד‬
Shapes
Line and Polyline
<Canvas >
<Line Stroke="Green" StrokeThickness="3" X1="0" Y1="0" X2="380" Y2="300" ></Line>
<Polyline Stroke="Blue" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 90,170 110,120
130,180 150,110 170,190 190,100 210,240 230,70 250,280 " >
</Polyline>
<Polyline Stroke="Blue" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 90,170 110,120
130,180 150,110 170,190 190,100 210,240 230,70 250,280 " >
</Polyline>
</Canvas>
LineAndPolyline :‫דוגמת קוד‬
Shapes
Polygone
<Grid>
<Polygon Stroke="Blue" StrokeThickness="3" Fill="Red" Canvas.Left="10" Canvas.Top="175"
FillRule="Nonzero" Points="15,250 136,35 220,200 0,125 270,60">
</Polygon>
</Grid>
PolygoneSample :‫דוגמת קוד‬
‫‪Brushes‬‬
‫‪‬‬
‫"מברשות" משמשות למילוי שטחים או קוים (‪)background, foreground, border, fill ,stroke‬‬
‫‪‬‬
‫שינוי "מברשת" גורם לצביעה אוטומטית של הצורה (אירוע מודיע לצורה על השינוי)‬
‫‪‬‬
‫מברשות תומכות בשקיפות (‪ )Transparency‬או בשקיפות חלקית (‪.)Partial Transparency‬‬
‫‪‬‬
‫במרחב השמות ‪ System.Windows.Media‬מוגדרת מחלקת הבסיס של כל המברשות‪ ,‬המחלקה‬
‫‪.Brush‬‬
‫‪‬‬
‫במחלקה ‪ SystemBrushes‬מוגדרות אוסף של מברשות סטנדרטיות מוכנות לשימוש‪.‬‬
‫‪‬‬
‫ישנם ‪ 7‬סוגי מברשות שונים‪ ,‬כל מברשת מציגה ‪ Pattern‬אחר‪,‬‬
‫בשלב זה רלבנטיים עבורנו ‪ 4‬בלבד‪.‬‬
‫‪Brushes‬‬
‫‪SolidColorBrush‬‬
‫צביעת צורה באמצעות צבע יחיד‪.‬‬
‫‪LinearGradientBrush‬‬
‫צבע מדורג‪ ,‬מילוי שמשתנה בהדרגה בצורה‬
‫ליניארית מצבע אחד לצבע שני‪ ,‬או בין מספר גדול‬
‫יותר של צבעים‪.‬‬
‫‪RadialGradientBrush‬‬
‫צבע מדורג‪ ,‬מילוי שמשתנה בהדרגה בצורה‬
‫מעגלית מצבע אחד לצבע שני‪ ,‬או בין מספר גדול‬
‫יותר של צבעים‪.‬‬
‫‪ImageBrush‬‬
‫מתבסס על תמונה כצורת המברשת‪.‬‬
‫מברשות נוספות‪BitmapCacheBrush ,VisualBrush ,DrawingBrush :‬‬
‫‪Brushes‬‬
‫צבעים‬
‫‪‬‬
‫מברשות מתבססות על צבעים (ברובם)‪ ,‬צבעים מוגדרים באמצעות המבנה ‪ Color‬המוגדר‬
‫במרחב השמות ‪.System.Windows.Media‬‬
‫‪‬‬
‫ב‪ Color-‬מוגדרות מספר מתודות סטאטיות מעניינות‪:‬‬
‫‪Color.Add‬‬
‫המתודה מקבלת שני צבעים ומוסיפה את ערכי האדום‪ ,‬ירוק‪ ,‬כחול‬
‫ואלפא של שני הפרמטרים ליצירת צבע אחד‪.‬‬
‫‪Color.FromRgb‬‬
‫מקבלת ערכי אדום‪ ,‬ירוק‪ ,‬כחול ומחזירה צבע‪.‬‬
‫‪Color.FromArgb‬‬
‫מקבלת ערכי אלפא‪ ,‬אדום‪ ,‬ירוק‪ ,‬כחול ומחזירה צבע‪.‬‬
‫לדוגמה‪:‬‬
‫;)‪Color color = Color.FromRgb(200, 13, 75‬‬
‫‪Brushes‬‬
‫‪‬‬
‫המחלקה ‪ Colors‬מכילה פלטת צבעים מוכנה המכילה כמה מאות צבעים‪:‬‬
‫‪‬‬
‫המחלקה ‪ SystemColors‬מכילה פלטת צבעים המורכבת מצבעי המערכת‪:‬‬
Brushes
SolidColorBrush
:‫הגדרת מברשת על ידי בחירת צבע מוכן‬

Rect.Fill = new SolidColorBrush(Colors.AliceBlue);
:‫הגדרת מברשת המתבססת על צבע מערכת‬

Rect.Fill = SystemColors.ControlBrush;
:RGB ‫קביעת מברשת על בסיס שלושת צבעי‬

int red = 10; int green = 145; int blue = 35;
Rect.Fill = new SolidColorBrush(Color.FromRgb(red, green, blue));
:XAML -‫ב‬

<Rectangle Name="rect" Width="200" Height="200" Fill="Blue"></Rectangle>
<Rectangle Name="rect" Width="200" Height="200" Fill="#FF2B44"></Rectangle>
Brushes
LinearGradientBrush
:‫בקוד‬
LinearGradientBrush brush1 = new LinearGradientBrush();
brush1.StartPoint = new Point(0, 0);
brush1.EndPoint = new Point(1, 1);
brush1.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
brush1.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
brush1.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
brush1.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));
rect2.Fill = brush1;
Brushes
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
LinearGradientBrush
XAML-‫ב‬
Brushes
RadialGradientBrush
‫בקוד‬
RadialGradientBrush brush2 = new RadialGradientBrush();
brush2.GradientOrigin = new Point(0.5, 0.5);
brush2.Center = new Point(0.5, 0.5);
brush2.RadiusX = 0.5;
brush2.RadiusY = 0.5;
brush2.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
brush2.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
brush2.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
brush2.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));
rect3.Fill = brush2;
Brushes
RadialGradientBrush
XAML-‫ב‬
<Rectangle Name="rect3" Width="200" Height="200" Margin="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
Brushes
‫טעינת התמונה‬
‫מהמשאבים של‬
‫התוכנית‬
‫מתיחת התמונה‬
ImageBrush
:‫בקוד‬
ImageBrush brush3 = new ImageBrush();
brush3.ImageSource = new BitmapImage(new Uri(@"pack://application:,,,/Assets/Smily.png"));
brush3.Stretch = Stretch.None;
"‫"אריח‬-‫סידור ה‬
brush3.TileMode = TileMode.Tile;
brush3.Viewport = new Rect(0, 0, 0.2, 0.2);
rect4.Fill = brush3;
‫הגדרת המיקום‬
‫של האריח‬
Brushes
ImageBrush
:XAML-‫ב‬
RadialGradientBrush brush2 = new RadialGradientBrush();
brush2.GradientOrigin = new Point(0.5, 0.5);
brush2.Center = new Point(0.5, 0.5);
brush2.RadiusX = 0.5;
brush2.RadiusY = 0.5;
brush2.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
brush2.GradientStops.Add(new GradientStop(Colors.Red, 0.25));
brush2.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));
brush2.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));
rect3.Fill = brush2;
‫‪Transformations‬‬
‫‪‬‬
‫‪ – Transformation‬שינוי צורה‪ ,‬מאפשר לשנות את הדרך בה מצויר האובייקט הגראפי על‬
‫ידי שינוי מערכת הקואורדינטות הקשורות לאובייקט ובאמצעות מספר מחלקות מוכנות‪.‬‬
‫‪‬‬
‫מחלקת הבסיס של כל מחלקות ה‪ Tranformation -‬היא המחלקה ‪ Transform‬המוגדרת‬
‫במרחב השמות ‪.System.Windows.Media‬‬
‫המחלקה ‪TranslateTransform‬‬
‫‪‬‬
‫מאפשר לבצע הסטה של האובייקט הגראפי‪/‬פקד ממקומו המקורי‪.‬‬
‫‪‬‬
‫מגדירים את גודל ההסטה באמצעות ‪.X,Y‬‬
‫המיקום החדש‬
‫לאחר ההזחה‬
‫המיקום המקורי‬
Transformations
:XAML - TranslateTransform
<Canvas>
<Rectangle Height="250" Width="250" Stroke="Blue" StrokeThickness="1"
StrokeDashArray="10" Canvas.Left="100" Canvas.Top="100">
</Rectangle>
<Rectangle Height="250" Width="250" Fill="Red" Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<TranslateTransform X="150" Y="150" />
‫הזזת המלבן‬
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
:‫בקוד‬
TranslateTransform transform = new TranslateTransform(-100, -100);
rect.RenderTransform = transform;
‫הזזת המלבן‬
Transformations
RotateTransform
.‫פקד‬/‫מאפשר לסובב אובייקט גראפי‬
.Angle ‫ ואת זווית הסיבוב באמצעות‬X,Y ‫מגדירים את מיקום ציר הסיבוב באמצעות‬
:XAML
<Canvas>
<Rectangle Height="250" Width="250" Stroke="Blue" StrokeThickness="1"
StrokeDashArray="10" Canvas.Left="100" Canvas.Top="100">
</Rectangle>
<Rectangle Height="250" Width="250" Fill="Red" Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<TranslateTransform X="150" Y="150" />
‫סיבוב המלבן‬
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
RotateTransform transform = new RotateTransform(-45, 0, 0);
rect.RenderTransform = transform;
:‫קוד‬
‫סיבוב המלבן‬
Transformations
ScaleTransform
.‫ למתוח או לכווץ‬,‫ מאפשר להגדיל ע"פ קנה מידה‬,‫פקד‬/‫הגדלת או הקטנת אובייקט גראפי‬
.X,Y ‫הקטנה על ידי‬/‫מיקום האובייקט לאחר ההגדלה‬
.100% ‫ מייצג‬1 ‫ – הערך‬ScaleX, ScaleY ‫הגדלה על ידי‬/‫סדר גודל הקטנה‬
:XAML
<Canvas>
<Rectangle Name="rect" Height="250" Width="250" Fill="Red" Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100" MouseUp="Rectangle_MouseUp">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="50" CenterY="50" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
‫הגדלת המלבן‬
</Rectangle>
<Rectangle Height="250" Width="250" Stroke="Blue" StrokeThickness="1" StrokeDashArray="10"
Canvas.Left="100" Canvas.Top="100">
</Rectangle>
</Canvas>
Transformations
:Code
ScaleTransform transform = new ScaleTransform(1.5, 1.5, 100, 100);
rect.RenderTransform = transform;
‫הגדלת המלבן‬
Transformations
SkewTransform
;‫ פיתול‬,‫ עיוות‬,‫עיקום‬

.‫ עיקום‬,‫ לכסון‬,‫שיפוע‬

.3D ‫מייצר אילוזיה של‬

<Canvas>
<Rectangle Name="rect" Height="250" Width="250" Fill="Red" Stroke="Blue" StrokeThickness="2"
Canvas.Left="200" Canvas.Top="200" MouseUp="Rectangle_MouseUp">
<Rectangle.RenderTransform>
<SkewTransform CenterX="0" CenterY="0" AngleX="15" AngleY="0" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Height="250" Width="250" Stroke="Blue" StrokeThickness="1" StrokeDashArray="10"
Canvas.Left="200" Canvas.Top="200">
</Rectangle>
</Canvas>
‫‪Drawings and Geometries‬‬
‫‪‬‬
‫עד כה ראינו ביכולות הפשוטות של ציור ‪.2D‬‬
‫‪‬‬
‫על מנת ליצור סצנות ‪ 2D‬עשירות ומורכבות יותר עם תמיכה בגרפיקה וקטורית‪.‬‬
‫‪‬‬
‫המחלקה ‪ Path‬יורשת את המחלקה ‪( Shape‬כמו כל הצורות שראינו עד כה)‪.‬‬
‫‪‬‬
‫‪‬‬
‫המחלקה ‪ Path‬היא קונטיינר של צורות פשוטות ומורכבות‪.‬‬
‫למחלקה ‪ Path‬מאפיין חשוב בשם ‪ , Data‬המאפיין מכיל את אובייקט יחיד ממחלקה היורשת‬
‫את המחלקה ‪:Geometry‬‬
‫‪RectangleGeometry ‬‬
‫‪EllipseGeometry ‬‬
‫‪PathGeometry ‬‬
‫‪CombinedGeometry ‬‬
‫‪LineGeometry ‬‬
‫‪GeometryGroup ‬‬
Drawings and Geometries
Simple Geometry
<Path Fill="Yellow" Stroke="Blue" Canvas.Left="15" Canvas.Top="10" >
<Path.Data>
<RectangleGeometry Rect="10,10 150,80"></RectangleGeometry>
</Path.Data>
</Path>
<Path Fill="Red" Stroke="Green" StrokeThickness="3" Canvas.Top="70" Canvas.Left="290" Height="100"
Stretch="Fill" Width="160">
<Path.Data>
<EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"></EllipseGeometry>
</Path.Data>
</Path>
PathSample01 :‫דוגמת קוד‬
Drawings and Geometries
<Path Fill="Yellow" Stroke="Blue" Canvas.Top="180" Canvas.Left="90" StrokeThickness="3" >
<Path.Data>
<GeometryGroup FillRule="Nonzero">
<RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
<EllipseGeometry Center="120,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
<LineGeometry StartPoint="10,20" EndPoint="100,130"></LineGeometry>
</GeometryGroup>
</Path.Data>
</Path>
Geometry Group
PathSample01 :‫דוגמת קוד‬
Drawings and Geometries
<Path Stroke="Black" StrokeThickness="1" Fill="AliceBlue" Canvas.Top="380" Canvas.Left="60">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<GeometryGroup>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
<RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
</GeometryGroup>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
PathSample01 :‫דוגמת קוד‬
Combined Geometry
‫‪Animation‬‬
‫‪‬‬
‫באמצעות אנימציה נוכל לייצר ממשק משתמש דינאמי‪.‬‬
‫‪‬‬
‫שימושי מאוד במשחקים‪ ,‬אולם גם במערכות מידע‪.‬‬
‫‪‬‬
‫שני סוגים של מנגנוני אנימציה‪:‬‬
‫‪Timer Based Animation ‬‬
‫‪Property Based Animation ‬‬
Timer Based Animation
.Windows Forms -‫דומה מאוד למנגנון האנימציה מבוסס טיימר כפי שהיה מקובל ב‬

‫ שמוגדרת במרחב השמות‬DispatcherTimer ‫מנגנון המתבסס על המחלקה‬
.System.Windows.Threading

public partial class MainWindow : Window
{
private DispatcherTimer timer = new DispatcherTimer();
public MainWindow()
{
InitializeComponent();
timer.Interval = new TimeSpan(0,0,0,0,100);
timer.Tick += timer_Tick;
timer.Start();
‫אקטיבציה של הטיימר‬
}
void timer_Tick(object sender, EventArgs e)
{
Canvas.SetTop(ellipse, Canvas.GetTop(ellipse) + 1);
Canvas.SetLeft(ellipse, Canvas.GetLeft(ellipse) + 1);
}
}
Timer ‫הגדרת אובייקט‬
‫הגדרת פרק זמן‬
‫טיפול באירוע‬
‫‪Property Based Animation‬‬
‫‪‬‬
‫מודל המאפשר לך להתמקד בהגדרת האנימציות מבלי לדאוג לדרך שבה הם יבוצעו‪.‬‬
‫‪‬‬
‫מתמקד במה ישתנה ולא באיך ישתנה‪.‬‬
‫‪‬‬
‫כל רכיב אנימציה משפיע על מאפיין אחד בלבד‪.‬‬
‫‪‬‬
‫חייבים להתאים את רכיב האנימציה לטיפוס של המאפיין שרוצים לשנות‪.‬‬
‫‪‬‬
‫מרחב השמות ‪ System.Windows.Media.Animation‬מכיל אוסף מחלקות אנימציה‬
‫מבוססות מאפיינים‪ ,‬נותנות מענה כמעט לכל הטיפוסים עליהם נרצה לבצע אנימציה‪.‬‬
Property Based Animation
Width, Height, :Double ‫ – אנימציה למאפיינים שהם מטיפוס‬DoubleAnimation
...... Opacity
DoubleAnimation animation = new DoubleAnimation();
animation.From = 100;
//animation.By = this.Width - 50 - btn.Width;
animation.To = this.Width - 50;
animation.Duration = TimeSpan.FromSeconds(3);
btn1.BeginAnimation(Button.WidthProperty, animation);

Property Based Animation
:‫ – אנימציה למאפיינים שמבוססים על צבע‬ColorAnimation
ColorAnimation animation = new ColorAnimation();
btn2.Background = new SolidColorBrush(Colors.Gray);
animation.From = Colors.Gray;
animation.To = Colors.Red;
animation.Duration = TimeSpan.FromSeconds(3);
animation.RepeatBehavior = new RepeatBehavior(3);
btn2.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation);

Property Based Animation
:)‫אנימציה כפולה (מתבצעת בו בעת‬
DoubleAnimation animation1 = new DoubleAnimation();
animation1.From = 300;
animation1.To = this.Width - 50;
animation1.Duration = TimeSpan.FromSeconds(3);
DoubleAnimation animation2 = new DoubleAnimation();
animation2.From = 50;
animation2.To = 100;
animation2.Duration = TimeSpan.FromSeconds(3);
btn3.BeginAnimation(Button.WidthProperty, animation1);
btn3.BeginAnimation(Button.HeightProperty, animation2);

‫‪Property Based Animation‬‬
‫‪Storyboard‬‬
‫מאפשר לרכז מספר פעולות אנימציה‪.‬‬
‫מאפשר לשלוט על ה‪ Playback -‬של האנימציה‪.‬‬
‫מאפשר להגדיר אנימציה ב‪ XAML-‬על ידי ‪.Trigger‬‬
Property Based Animation
Storyboard ‫הגדרת‬
‫אנימציה ראשונה‬
storyboard = new Storyboard();
Storyboard
DoubleAnimation animation1 = new DoubleAnimation();
animation1.From = 300;
‫הגדרת אובייקט יעד‬
animation1.To = this.Width - 50;
animation1.Duration = TimeSpan.FromSeconds(3);
‫הגדרת מאפיין יעד‬
Storyboard.SetTargetName(animation1, ellipse.Name);
Storyboard.SetTargetProperty(animation1, new PropertyPath(Ellipse.WidthProperty));
storyboard.Children.Add(animation1);
DoubleAnimation animation2 = new DoubleAnimation();
animation2.BeginTime = TimeSpan.FromSeconds(3);
‫אנימציה שניה‬
animation2.From = 150;
animation2.To = 300;
animation2.Duration = TimeSpan.FromSeconds(3);
Storyboard.SetTargetName(animation2, ellipse.Name);
Storyboard.SetTargetProperty(animation2, new PropertyPath(Ellipse.HeightProperty));
storyboard.Children.Add(animation2);
storyboard.Begin(ellipse);
Property Based Animation
<Ellipse Name="ellipse" Width="300" Height="300" >
<Ellipse.Fill>
Storyboard
<SolidColorBrush x:Name="brush" Color="Red"/>
</Ellipse.Fill>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="brush"
Storyboard.TargetProperty="Color" From="Red" To="Green"
Duration="0:0:1" BeginTime="0:0:0"/>
<ColorAnimation Storyboard.TargetName="brush"
Storyboard.TargetProperty="Color" From="Green" To="Blue"
Duration="0:0:1" BeginTime="0:0:1"/>
<ColorAnimation Storyboard.TargetName="brush"
Storyboard.TargetProperty="Color" From="Blue" To="Yellow"
Duration="0:0:1" BeginTime="0:0:2"/>
<ColorAnimation Storyboard.TargetName="brush"
Storyboard.TargetProperty="Color" From="Yellow" To="Red"
Duration="0:0:1" BeginTime="0:0:3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
With XAML
‫את הסילבוס‪ ,‬חומרים‪ ,‬מצגות ניתן להוריד ב‪:‬‬
‫‪www.corner.co.il‬‬