וובמאסטר - תיכנות ובניית אתרים

מדריך WPF – שימוש ב Transformations

arikp ,‏ מכללת סלע‏ ‏/‏ 28 יולי, 2011
F+
F-

מה זה Transformation?

Transformation היא שיטה המאפשרת לנו לבצע שינויים גרפיים מסוימים באופן הצגה של פקד. השינויים האפשריים הם: סיבוב פקד, הזזת פקד, הגדלה והקטנה, ועיוות של הפקד.

 

כיצד להשתמש ב Transformation?

כדי להשתמש בטרנספורמציה יש ליצור מופע של מחלקת הטרנספורמציה המבוקשת ולהציב אותה בתכונה RenderTransform או בתכונה LayoutTransform של הפקד שנרצה להפעיל עליו את השינוי. את ההבדל בין התכונה RenderTransform ו LayoutTransform נראה בהמשך.

 

סיבוב פקד ע"י שימוש ב RotateTransform

כדי לגרום לאפקט סיבוב של פקד ניתן להפעיל עליו את הטרנספורמציה RotateTransform. למחלקה זו יש תכונה Angle השולטת בזווית (במעלות) של הסיבוב.

לדוגמא, קטע הקוד הבא מסובב את הכפתור שלנו ב45 מעלות:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel>
    <Button Content="my button"
           Width="120"
           Height="40">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>

    </Button>
  </StackPanel
>
</
Window
>

והתוצאה שנקבל:

מדריך WPF – שימוש ב Transformations

נעיר כי לאחר הפעלת הטרנספורמציה, הפקד עדיין עובד כרגיל. ניתן ללחוץ עליו ולעשות את כל הפעולות שהיה ניתן לעשות לפני הפעלת הטרנספורמציה.

 

הגדלה והקטנה של פקד ע"י שימוש ב ScaleTransform

ניתן להפעיל טרנספורמציה שתגרום לפקד להתנפח או להתכווץ בעזרת המחלקה ScaleTransform. התכונה ScaleX תשלוט ביחס הניפוח בציר X, לדוגמא ערך של 2 יכפיל את הרוחב של הפקד פי 2. באופן דומה התכונה ScaleY שולטת על יחס הניפוח בציר Y.

לדוגמא, קטע הקוד הבא מנפח את הכפתור פי 2 בציר X, שימוש לב שהכפתור מוגדר בגודל 100x100 כלומר ריבוע:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <Grid>
    <Button Content="my button"
           Width="100"
           Height="100">
      <Button.RenderTransform>
        <ScaleTransform ScaleX="2"
                       ScaleY="1" />
      </Button.RenderTransform>

    </Button>
  </Grid
>
</
Window
>

והתוצאה שנקבל:

מדריך WPF – שימוש ב Transformations

 

הזזה של פקד ע"י שימוש ב TranslateTransform

הטרנספורמציה TranslateTransform גורמת להזזה של הפקד. התכונות X ו Y שולטות בכמות ההזזה בכל אחד מהצירים.

לדוגמא, הקוד הבא גורם להזזה הכפתור 50 פיקסלים שמאלה, ו10 פיקסלים למטה:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <WrapPanel>
    <Button Content="my button"
           Width="100"
           Height="100">
      <Button.RenderTransform>
        <TranslateTransform X="-50"
                           Y="10" />
      </Button.RenderTransform
>
    </Button>
  </WrapPanel
>
</
Window
>

והתוצאה שנקבל:

מדריך WPF – שימוש ב Transformations

 

עיוות פקד ע"י שימוש ב SkewTransform

טרנספורמציה זו גורמת לעיוות הפקד. התכונה AngleX שולטת בכמות העיוות בציר X ואילו התכונה AngleY שולטת בכמות העיוות בציר Y.

לדוגמא, קטע הקוד הבא מעוות את הפקד בציר X ב45 מעלות:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <WrapPanel>
    <Button Content="my button"
           Width="100"
           Height="100">
      <Button.RenderTransform>
        <SkewTransform AngleX="45"
                      AngleY="0" />
      </Button.RenderTransform
>
    </Button>
  </WrapPanel
>
</
Window
>

והתוצאה שנקבל:

מדריך WPF – שימוש ב Transformations

 

ההבדל בין RenderTransform ל LayoutTransform

ההבדל בין הצבת טרנספורמציה בתכונה RenderTransform לבין הצבתה בתכונה LayoutTransform הוא במועד הפעלת הטרנספורמציה.

טרנספורמציה שהוצבה בתכונה RenderTransform תופעל רק לאחר שכל הפקדים סודרו במקום (לאחר תהליך ה Layout שמארגן כל פקד במקומו). לעומת זאת, טרנספורמציה שהוצבה בתכונה LayoutTransform תופעל לפני ביצוע תהליך ה Layout. ניתן לראות המחשה להבדל בדוגמא הבאה.

בדוגמא הבאה נגדיר שני כפתורים בתור פאנל מסוג StackPanel, שכזכור מסדר את הפקדים המוכלים בו אחד אחרי השני. בנוסף נפעיל על הכפתור הראשון טרנספורמציה מסוג RotateTransform.

בפעם הראשונה נעשה זאת באמצעות התכונה RenderTransform:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel>
    <Button Content="my button"
           Width="120"
           Height="40">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>

    </Button>
    <Button Content="my seccond button"
           Width="120"
           Height="40" />
  </StackPanel
>
</
Window
>

ונקבל את התוצאה:

מדריך WPF – שימוש ב Transformations

 

בפעם השנייה נעשה זאת באמצעות התכונה LayoutTransform:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel>
    <Button Content="my button"
           Width="120"
           Height="40">
      <Button.LayoutTransform>
        <RotateTransform Angle="45" />
      </Button.LayoutTransform
>
    </Button>
    <Button Content="my seccond button"
           Width="120"
           Height="40" />
  </StackPanel
>
</
Window
>

ונקבל את התוצאה:

מדריך WPF – שימוש ב Transformations

כעת ניתן להבין את ההבדל. כאשר משתמשים ב LayoutTransform, קודם כל מופעלת הטרנספורמציה על הכפתור ורק אז מופעל הסידור של הפקדים. מכיוון שכך גודל הכפתור לצרכי Layout משתנה (גדל במקרה הזה) ולכן הכפתור השני נדחק למטה. לעומת זאת, במקרה של שימוש ב RenderTransform, כל פקד כבר נמצא במקומו והפעלת הטרנספורמציה אמנם משנה את הפקד עצמו אך לא משפיעה על מיקום הפקדים האחרים.

נעיר כי בהרבה מקרים התוצאה היא זהה, ואז עדיף להשתמש ב RenderTransform בעל ביצועים טובים יותר.

 

שילוב מספר טרנספורמציות

ניתן לשלב מספר טרנספורמציות ע"י שימוש במחלקה TransformGroup.

לדוגמא, קטע הקוד הבא מבצע גם סיבוב וגם הגדלה של הפקד בשני הצירים:

<Window x:Class="TransformationsDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel>
    <Button Content="my button"
           Width="100"
           Height="100">
      <Button.RenderTransform>
        <TransformGroup>
          <RotateTransform Angle="45" />
          <ScaleTransform ScaleX="2"
                         ScaleY="2" />
        </TransformGroup>
      </Button.RenderTransform>
    </Button>
  </StackPanel
>
</
Window
>

והתוצאה שנקבל:

מדריך WPF – שימוש ב Transformations

arikp, מכללת סלע

אריק פוזננסקי הוא יועץ בכיר ומרצה בסלע. הוא השלים שני תארי B.Sc. במתמטיקה ומדעי המחשב בהצטיינות יתרה בטכניון. לאריק ידע נרחב בטכנולוגיות מיקרוסופט, כולל .NET עם C#, WPF, Silverlight, WinForms, Interop, COM/ATL, C++ Win32 ו reverse engineering.
תגיות: מדריך‏  /  פיתוח‏  /  צד לקוח‏  /  WPF‏  /  .net‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות