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

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

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

הפקד TabControl

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

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns: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
>

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

הפקד Border

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns: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
>

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

הפקד Slider

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns: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());
}

והתוצאה:

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

הפקד ProgressBar

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

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

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns: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
>

והתוצאה

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

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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