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

מה זה Transformation?

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

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

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

ההבדל בין RenderTransform ל LayoutTransform

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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

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

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

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

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

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

<Window x:Class="TransformationsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >: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>

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