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

הפקד Expander

הפקד Expander הוא פקד שמורכב משני חלקים, כותרת (Header) ותוכן (Content). לצד הכותרת ישנו חץ קטן שלחיצה עליו גורמת לתוכן להיראות ולחיצה נוספת מסתירה אותו. השמת הכותרת נעשית ע"י הצבה בתכונה Header ואילו השמת תוכן נעשית ע"י השמה בתכונה Content.

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

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

<Window x:Class="ControlsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <Expander Header="expander header"
              Content="expander content" />
  </Grid>
</Window>

כאשר התוכן מוצג:

וכאשר התוכן מוסתר:

הפקד TabControl

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

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

<Window x:Class="ControlsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <TabControl>
      <TabControl.Items>
        <TabItem Header="tab 1">
          <TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 1" />
            </StackPanel>
          </TabItem.Content>
        </TabItem>
        <TabItem Header="tab 2">
          <TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 2" />
            </StackPanel>
          </TabItem.Content>
        </TabItem>
        <TabItem Header="tab 3">
          <TabItem.Content>
            <StackPanel>
              <Button Content="this button is part of tab 3" />
            </StackPanel>
          </TabItem.Content>
        </TabItem>
      </TabControl.Items>
    </TabControl>
  </Grid>
</Window>

הפקד Border

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

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

<Window x:Class="ControlsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Border Background="Blue" BorderBrush="Red" BorderThickness="2">
    <StackPanel>
      <Button Content="button 1" />
      <Button Content="button 2" />
      <Button Content="button 3" />
    </StackPanel>
  </Border>
</Window>

הפקד Slider

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

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

<Window x:Class="ControlsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <Grid>
    <Slider Orientation="Vertical"
            Minimum="0"
            Maximum="100"
            Value="25"
            ValueChanged="Slider_ValueChanged"
            />
  </Grid>
</Window>

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

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

והתוצאה:

הפקד ProgressBar

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

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

<Window x:Class="ControlsDemo.MainWindow"
        >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        >:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
  <StackPanel>
    <ProgressBar Height="30"
                 Minimum="0"
                 Maximum="100"
                 Value="25" />
  </StackPanel>
</Window>

והתוצאה