מדריך Windows Phone – שימוש ב Transformations

מה זה Transformation?

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
      Content="my button"
      Width="220"
      Height="140">
      <Button.RenderTransform>
        <RotateTransform
          Angle="45" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</phone:PhoneApplicationPage>

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
      Content="my button"
      Width="200"
      Height="200">
      <Button.RenderTransform>
        <ScaleTransform
          ScaleX="1.5"
          ScaleY="1" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</phone:PhoneApplicationPage>

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
      Content="my button"
      Width="200"
      Height="200"
      HorizontalAlignment="Left">
      <Button.RenderTransform>
        <TranslateTransform
          X="-50"
          Y="10" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</phone:PhoneApplicationPage>

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
      Content="my button"
      Width="200"
      Height="200"
      HorizontalAlignment="Left">
      <Button.RenderTransform>
        <SkewTransform
          AngleX="45"
          AngleY="0" />
      </Button.RenderTransform>
    </Button>
  </StackPanel>
</phone:PhoneApplicationPage>

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <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>
</phone:PhoneApplicationPage>

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