מדריך Silverlight – פקדים נוספים

הפקד TabControl

הפקד TabControl מאפשר תצוגה של תוכן בעזרת שימוש בטאבים. כל טאב מיוצג ע"י אלמנט מטיפוס TabItem ויכול להכיל כל תוכן שהוא.

בשביל להשתמש בפקד TabControl ב Silverlight יש להוסיף Reference לקובץ System.Windows.Controls.dll

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

<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"
             >:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <ComboBox x:Name="comboBox"
              SelectionChanged="comboBox_SelectionChanged" />
    <controls:TabControl>
      <controls:TabControl.Items>
        <controls:TabItem Header="tab 1">
          <controls:TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 1" />
            </StackPanel>
          </controls:TabItem.Content>
        </controls:TabItem>
        <controls:TabItem Header="tab 2">
          <controls:TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 2" />
            </StackPanel>
          </controls:TabItem.Content>
        </controls:TabItem>
        <controls:TabItem Header="tab 3">
          <controls:TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 3" />
            </StackPanel>
          </controls:TabItem.Content>
        </controls:TabItem>
      </controls:TabControl.Items>
    </controls:TabControl>
  </StackPanel>
</UserControl>

הפקד Border

פקד Border הוא פקד שמאפשר להוסיף מסגרת מסביב לפקדים אחרים. התכונות החשובות של פקד Border הם התכונה BorderBrush שקובעת את צבע המסגרת וכן BorderThickness שקובעת את עובי המסגרת.

בדוגמא הבאה אנו מציירים מסגרת אדומה בעלת רקע כחול מסביב לStackPanel שמכיל שלושה כפתורים:

<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"
             >:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Border Background="Blue"
          BorderBrush="Red"
          BorderThickness="2">
    <StackPanel>
      <Button Content="button 1" />
      <Button Content="button 2" />
      <Button Content="button 3" />
    </StackPanel>
  </Border>
</UserControl>

הפקד Slider

הפקד Slider מאפשר למשתמש לבחור ערך מספרי מתוך טווח של ערכים. טווח הערכים נקבע ע"י התכונה Minimum והתכונה Maximum, הערך הנוכחי נקבע ע"י התכונה Value.

בדוגמא הבאה ניתן לראות Slider שהוגדר לעבוד בטווח שבין 0 ל100 כאשר הערך שלו בעת הטעינה הוא 25, בנוסף נשים לב לשימוש בתכונה Orientation לצורך הגדרת סליידר אנכי:

<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"
             >:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid>
    <Slider Orientation="Vertical"
            Minimum="0"
            Maximum="100"
            Value="25"
            ValueChanged="Slider_ValueChanged" />
  </Grid>
</UserControl>

האירוע ValueChanged מופעל כאשר הערך של הסליידר משתנה:

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
  MessageBox.Show(e.NewValue.ToString());
}

והתוצאה:

הפקד ProgressBar

הפקד ProgressBar עובד בצורה דומה לSlider, בכך שגם לו יש תכונת Minimum, Maximum ותכונת Value. עם זאת, ProgressBar אינו ניתן לתפעול ע"י המשתמש אלא רק משמש לחיווי מידע על התקדמות תהליך כלשהוא באפליקציה.

דוגמת הקוד הבאה מציגה את אופן השימוש בפקד ProgressBar ואת התוצאה:

<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"
             >:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <StackPanel>
    <ProgressBar Height="30"
                 Minimum="0"
                 Maximum="100"
                 Value="25" />
  </StackPanel>
</UserControl>

והתוצאה