The Button control

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

כפתור פשוט

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

<Button>Hello, world!</Button>

פשוט למדי, נכון? כמובן, למעשה הכפתור לא עושה שום דבר עדיין, אבל אם תצביע עליו, תגלה שהוא מגיע עם אפקט ריחוף חביב ללא כל מאמץ נוסף. אבל בואו נגרום לכפתור לעשות משהו, על ידי רישום לארוע הלחיצה שלו: Click. (עוד מידע על התהליך הזה ניתן למצוא במאמר על רישום לארועים ב XAML):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

בקוד-מאחור, תצטרך פונקציה תואמת כדי לטפל בלחיצה:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

עכשיו יש לך כפתור מאד בסיסי וכשתלחץ עליו, תופיע הודעה!

תוכן מעוצב

מאחורי הקלעים, טקסט פשוט בתוכן (Content) של הכפתור הופך לפקד TextBlock, וזה גם אומר שאתה יכול לשלוט על אותם אספקטים של עיצוב טקסט. תמצא מספר תכונות על פקד הכפתור כדי לעשות זאת, כולל (אבל לא רק) Foreground(צבע הטקסט), Background(צבע רקע), FontWeight(עובי האותיות) ועוד. במילים אחרות, מאד קל לשנות את העיצוב של הטקסט בתוך פקד כפתור:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

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

כפתורים עם תוכן מתקדם

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

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

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

כפתור עם תמונה (ImageButton)

בסביבות ממשקי משתמש רבות, תוכל למצוא כפתור רגיל ואז וריאציה אחת או יותר, שיציעו תכונות נוספות. אחת הוריאציות הנפוצות ביותר היא ImageButton (כפתור תמונה), אשר, כפי שמרמז שמו, הוא כפתור שבדרך כלל יאפשר לכלול תמונה לפני הטקסט. אבל ב WPF, אין כל צורך בפקד נפרד כדי להשיג זאת - כפי שכבר ראית, אנחנו יכולים לשים מספר פקדים בתוך הכפתור, כך שניתן בדיוק באותה הקלות להוסיף פקד תמונה לכפתור, בצורה כזו:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

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

ריפוד הכפתור

בודאי שמת לב לכך שהכפתורים בסביבת WPF מגיעים ללא ריפוד כברירת מחדל. כלומר, הטקסט קרוב מאד לשוליים, מה שעשוי להראות קצת מוזר, כי רוב הכפתורים שניתן למצוא במקומות אחרים (ברשת, ביישומים אחרים וכו') כן מכילים ריפוד כלשהו בצדדים. אל דאגה, כי הכפתור מגיע עם התכונה Padding (ריפוד):

<Button Padding="5,2">Hello, World!</Button>

הקוד הנ"ל יישם ריפוד של 5 פיקסלים בצד, ושני פיקסלים למעלה ולמטה. אבל ליישם ריפוד לכל הכפתורים עלול להיות מעט מייגע בשלב מסויים, אז הנה טיפ קטן: ניתן ליישם את הריפוד באופן גלובלי, או לכל היישום, או רק לחלון מסויים, על ידי שימוש בסגנון (Style) (עוד על שימוש בסגנונות מאוחר יותר). הנה דוגמה בה אנו מיישמים זאת על חלון, תוך שימוש בתכונה Window.Resources:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

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

סיכום

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