מדריך WPF – שימוש ב Styles

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

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

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

כאן נכנס Style.

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

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

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

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

<Window x:Class="StylesDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Window.Resources>
    <Style x:Key="myButtonStyle"
           TargetType="Button">
      <Setter Property="FontSize"
              Value="32" />
      <Setter Property="FontFamily"
              Value="Consolas" />
      <Setter Property="FontWeight"
              Value="Bold" />
    </Style>
  </Window.Resources>
  <StackPanel>
    <Button Style="{StaticResource myButtonStyle}"
            Content="button 1" />
    <Button Style="{StaticResource myButtonStyle}"
            Content="button 2" />
    <Button Style="{StaticResource myButtonStyle}"
            Content="button 3" />
  </StackPanel>
</Window>

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

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

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

הגדרת של Implicit Style

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

<Window x:Class="StylesDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Window.Resources>
    <Style TargetType="Button">
      <Setter Property="FontSize"
              Value="32" />
      <Setter Property="FontFamily"
              Value="Consolas" />
      <Setter Property="FontWeight"
              Value="Bold" />
    </Style>
  </Window.Resources>
  <StackPanel>
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
  </StackPanel>
</Window>

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

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

ירושה של Style

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

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

<Window x:Class="StylesDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Window.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>
  </Window.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>
</Window>

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