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

בשביל מה צריך Style?

לפני שנדון במה זה Style בדיוק, כדאי להבין את הבעיה שהוא בא לפתור.

תארו לכם אפליקציה שיש בה מספר פקדים מאותו סוג, לדוגמא כפתורים. היינו רוצים שהכפתורים באפליקציה שלנו לא יהיו משעממים לכן נרצה לשנות את המראה שלהם ע"י שינוי פונטים, צבעים גודל ועוד. הבעיה היא שצריך לעשות את השינויים הנ"ל על כל אחד מהכפתורים בנפרד! אם יש לנו הרבה כפתורים זה יכול להצטבר לכדי הרבה עבודה. ומה קורה אם נרצה לשנות את צבע הרקע בעתיד? נצטרך שוב לעבור על עשרות כפתורים ולבצע את השינוי בעשרות מקומות.

כאן נכנס Style.

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

הגדרה בסיסית של Style

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

בדוגמא הבאה אנו מגדירים אובייקט Style שפועל על כפתורים, המפתח המזהה של ה Style יהיה myButtonStyle. האובייקט Style שלנו יגדיר ערכים לתכונות FontSize, FontFamily & FontWeight:

<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">
  <phone:PhoneApplicationPage.Resources>
    <Style
      x:Key="myButtonStyle"
      TargetType="Button">
      <Setter
        Property="FontSize"
        Value="32" />
      <Setter
        Property="FontFamily"
        Value="Consolas" />
      <Setter
        Property="FontWeight"
        Value="Bold" />
    </Style>
  </phone:PhoneApplicationPage.Resources>
  <StackPanel>
    <Button
      Style="{StaticResource myButtonStyle}"
      Content="button 1" />
    <Button
      Style="{StaticResource myButtonStyle}"
      Content="button 2" />
    <Button
      Style="{StaticResource myButtonStyle}"
      Content="button 3" />
  </StackPanel>
</phone:PhoneApplicationPage>

נשים לב לאופן ההגדרה של ה Style. יש להגדיר בתכונה TargetType את סוג הפקדים שעליהם ה Style יופעל, בדוגמא אצלנו קבענו שיופעל על כפתורים. בנוסף בתוך ה Style יש אוסף של אובייקטים מסוג Setter שבכל אחד מהם אנו מגדירים תכונה מבוקשת (Property) וערך המבוקש עבור התכונה (Value).

כדי להשתמש ב Style אנו קובעים בכל כפתור את התכונה Style שתופנה לאותו אובייקט שהגדרנו ב Resources.

התוצאה של הרצת קוד:

הגדרת של Implicit Style

ניתן להגדיר Implicit Style. לשם כך, יש להשמיט מהגדרת ה Style את התכונה x:Key. כעת ה Style שהגדרנו יופעל באופן אוטומטי על כל אובייקט המתאים לסוג המופיע בתכונה TargetType. לפיכך נוכל לכתוב את הדוגמא הקודמת באופן הבא:

<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">
  <phone:PhoneApplicationPage.Resources>
    <Style
      TargetType="Button">
      <Setter
        Property="FontSize"
        Value="32" />
      <Setter
        Property="FontFamily"
        Value="Consolas" />
      <Setter
        Property="FontWeight"
        Value="Bold" />
    </Style>
  </phone:PhoneApplicationPage.Resources>
  <StackPanel>
    <Button
      Content="button 1" />
    <Button
      Content="button 2" />
    <Button
      Content="button 3" />
  </StackPanel>
</phone:PhoneApplicationPage>

ולקבל את אותה התוצאה בדיוק:

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

ירושה של Style

ניתן להגדיר מספר אובייקטים של Style שירשו אחד מהשני באמצעות שימוש בתכונה BasedOn. זה יכול להיות שימושי במקרים שבהם יש לנו Style לכל סוג של פקד כגון Button ו CheckBox אבל יש לנו הרבה דברים שמשותפים לפקדים הללו ונרצה להגדיר זאת פעם אחת.

לדוגמא, בקטע הקוד הבא ניתן לראות לראות הגדרה של Style כללי בשם commonStyle שמגדיר את מראה הפונטים, וכן הגדרה של Implicit Style עבור Button ועבור CheckBox, שכל אחד מהם יורש את התכונות של commonStyle ומוסיף עליהם:

<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">
  <phone:PhoneApplicationPage.Resources>
    <Style
      x:Key="commonStyle"
      TargetType="Control">
      <Setter
        Property="FontSize"
        Value="32" />
      <Setter
        Property="FontFamily"
        Value="Consolas" />
      <Setter
        Property="FontWeight"
        Value="Bold" />
    </Style>
    <Style
      TargetType="Button"
      BasedOn="{StaticResource commonStyle}">
      <Setter
        Property="Background"
        Value="Blue" />
      <Setter
        Property="Foreground"
        Value="White" />
    </Style>
    <Style
      TargetType="CheckBox"
      BasedOn="{StaticResource commonStyle}">
      <Setter
        Property="Foreground"
        Value="Green" />
      <Setter
        Property="HorizontalAlignment"
        Value="Right" />
    </Style>
  </phone:PhoneApplicationPage.Resources>
  <StackPanel>
    <CheckBox
      Content="checkbox 1" />
    <CheckBox
      Content="checkbox 2" />
    <CheckBox
      Content="checkbox 3" />
    <Button
      Content="button 1" />
    <Button
      Content="button 2" />
    <Button
      Content="button 3" />
  </StackPanel>
</phone:PhoneApplicationPage>

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