מדריך Silverlight – פקדים בסיסיים: כפתורים

כפתור הוא פקד שניתן ללחוץ עליו. ישנם מספר סוגים שונים של פקדים שעונים על הגדרה זו ומה שמשותף להם הוא שלכולם יש אירוע Click.

הפקד Button

פקד הכפתור הכי בסיסי שיש, נקרא Button. פקד זה הוא הגרסה הכי פשוטה ומוכרת של כפתור. הפקד נראה כמו כפתור סטנדרטי של Windows ומספק אירוע Click כאשר לוחצים עליו.

התכונה Content

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

דוגמת קוד להצבת טקסט של כפתור:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="This is my button" />
  </StackPanel>
</UserControl>

האירוע Click

האירוע Click הוא האירוע החשוב ביותר שיש לכפתור. אירוע זה נקרא כאשר מתבצעת לחיצה של המשתמש על הכפתור, בין אם ע"י שימוש בעכבר או לחיצה על מקש Enter במקלדת כאשר הכפתור בפוקוס.

בתגובה לאירוע זה נכתוב את הקוד שנרצה שיתרחש כאשר הכפתור נלחץ.

בדוגמא הבאה נרשם לאירוע Click כך שידפיס הודעה למסך בעת לחיצה עליו. להלן קוד הXAML:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <Button Content="This is my button"
            Click="Button_Click" />
  </StackPanel>
</UserControl>

והקוד #C שמאחוריו:

using System.Windows;
using System.Windows.Controls;
 
namespace FirstSilverlightApplication3
{
  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      InitializeComponent();
    }
 
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      MessageBox.Show("Button was clicked");
    }
  }
}

הפקד RepeatButton

הפקד RepeatButton הוא כפתור בעל התכונה הבאה: כאשר לוחצים על הכפתור (ללא עזיבה) הוא יורה את האירוע Click, וכל עוד אנחנו לא משחררים את הכפתור הוא ממשיך לירות את האירוע Click שוב ושוב.

כפתור כזה שימושי במקרים מסויימים כאשר נרצה להמשיך להגיב ללחיצה כל עוד המשתמש לוחץ על הכפתור. לדוגמא, אם תתבוננו בהתנהגות של ScrollBar, אזי הכפתור חצים שמופיעים בו מתנהגים כמו RepeatButton מאחר וכל עוד אנו ממשיכים ללחוץ עליהם הגלילה נמשכת.

התכונה Interval

לפקד RepeatButton יש תכונה בשם Interval שקובעת כל כמה זמן האירוע Click יתבצע, בהנחה שהכפתור עדיין לחוץ. הערך של Interval נקבע במילישניות (אלפיות השנייה).

הקוד הבא יוצר RepeatButton שמפעיל את האירוע Click כל שנייה:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <RepeatButton Content="repeat button"
                  Interval="1000"
                  Click="RepeatButton_Click" />
  </StackPanel>
</UserControl>

הפקד CheckBox

הפקד CheckBox הוא פקד בעל שני מצבים: מסומן ולא מסומן. התכונה IsChecked מאפשרת לקבוע את מצבו של הפקד.

הקוד הבא מציג פקד CheckBox בשני מצבים שונים:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <CheckBox Content="Checked"
              IsChecked="True" />
    <CheckBox Content="Unchecked"
              IsChecked="False" />
  </StackPanel>
</UserControl>

התכונה IsThreeStates

לפקד CheckBox יש גם אפשרות לעבוד עם 3 מצבים. כדי להדליק אפשרות זאת יש לסמן את התכונה IsThreeStates להיות True.

לדוגמא, הקוד הבא מדגים כיצד נראה פקד CheckBox שהדליקו לו את המצב השלישי, בשלושת המצבים:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <CheckBox Content="Checked"
              IsChecked="True"
              IsThreeState="True" />
    <CheckBox Content="Unchecked"
              IsChecked="True"
              IsThreeState="True" />
    <CheckBox Content="Intermediate"
              IsChecked="{x:Null}"
              IsThreeState="True" />
  </StackPanel>
</UserControl>

אירועים נוספים של CheckBox

לפקד CheckBox יש מספר אירועים נוספים מלבד אירוע Click. האירועים הם Checked, Indeterminate ו Unchecked. אירועים אלו יופעלו כאשר הפקד יעבור למצב המתאים.

הפקד RadioButton

הפקד RadioButton נועד לאפשר למשתמש לבחור מבין מספר אפשרויות שונות. לכל אפשרות ניצור כפתור RadioButton נוסף. הדרך להדליק את האפשרות היא ע"י שימוש בתכונה IsChecked כמו עבור CheckBox.

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <RadioButton Content="Option A" />
    <RadioButton Content="Option B" />
    <RadioButton Content="Option C"
                 IsChecked="True" />
    <RadioButton Content="Option D" />
  </StackPanel>
</UserControl>

נעיר כי בכל רגע נתון ניתן לבחור רק אפשרות אחת לכל היותר מבין האפשרויות המצויות בקבוצה של פקדי RadioButton. אם עולה הצורך לתת שתי קבוצות שונות של RadioButton שבכל קבוצה ניתן לבחור אפשרות אחת לכל היותר אז יש לקבוע את התכונה GroupName של כל קבוצה בנפרד להיות אותו דבר.

לדוגמא:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <RadioButton GroupName="GroupA"
                 Content="Option A" />
    <RadioButton GroupName="GroupA"
                 Content="Option B" />
    <RadioButton GroupName="GroupA"
                 Content="Option C"
                 IsChecked="True" />
    <RadioButton GroupName="GroupA"
                 Content="Option D" />
    <RadioButton GroupName="GroupB"
                 Content="Different group A" />
    <RadioButton GroupName="GroupB"
                 Content="Different group B"
                 IsChecked="True" />
  </StackPanel>
</UserControl>