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

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

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

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

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

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

כאן נכנס Style.

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

 

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

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

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

<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">
  <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.

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

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

הגדרת של Implicit Style

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

<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">
  <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
>

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

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

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

 

ירושה של Style

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

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

<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">
  <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
>

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

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

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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