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

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

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

מה זה Transformation?

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

 

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

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

 

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

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

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

 

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

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

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

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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