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

מה זה Transformation?

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

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

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

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstSilverlightApplication3"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="my button"
            Width="220"
            Height="140">
      <Button.RenderTransform>
        <RotateTransform          Angle="45" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</UserControl>

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

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

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstSilverlightApplication3"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid>
    <Button Content="my button"
            Width="100"
            Height="100">
      <Button.RenderTransform>
        <ScaleTransform ScaleX="2"
                        ScaleY="1" />
      </Button.RenderTransform>
    </Button>
  </Grid>
</UserControl>

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

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstSilverlightApplication3"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="my button"
            Width="200"
            Height="200"
            HorizontalAlignment="Left">
      <Button.RenderTransform>
        <TranslateTransform X="-50"
                            Y="10" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</UserControl>

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

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstSilverlightApplication3"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="my button"
            Width="200"
            Height="200"
            HorizontalAlignment="Left">
      <Button.RenderTransform>
        <SkewTransform AngleX="45"
                       AngleY="0" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</UserControl>

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

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:FirstSilverlightApplication3"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="my button"
            Width="200"
            Height="200">
      <Button.RenderTransform>
        <TransformGroup>
          <RotateTransform Angle="45" />
          <ScaleTransform ScaleX="2"
                          ScaleY="2" />
        </TransformGroup>
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</UserControl>

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