WPF-Custom Controls Part 2- Custom Button

30 בMarch 2013

תגיות:
2 תגובות

 

התחלתי לדבר בפוסט
הקודם בסדרה זו על מבוא לקונטרולים ב
WPF ועל עצם ההפנמה שכתיבת
פקדים ב
WPF היא 
, משימה פשוטה שהתנסות בתחום “תתייג” אתכם כמתכנתים מנוסים,
לפחות בקרב מפתחי
UI. (אם לצערכם נקלעתם לתחום..)

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

בואו נגדיר כמה
דרישות ונזרום איתם. (אני יוצר דרישות
on the fly):

א.    
כל לחיצה מרימה פופ אפ, -חלון הודעה- ננניח שכותב “אתה בטוח
שברצונך ל..”

כי נניח שהכפתור החדש ממוקם כלחצן סגירה או יציאה.

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

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

אוקיי אז דרישות,
ניגש למימוש: אני מעדיף  לרשת ישירות מ
Control כי לרשת מButton ייתן לי אובר
פונקציונאליות שאני לא רוצה ולהתחיל לחסום הנהגויות יהיה מסובך (אולי). בכל מקרה
אני לא נדרש להוספת פרופרטיז לפקד אלא רק תמיכה באירועים שאת זה נראה עכשיו. אנו
נדרש להוספת
RoutedEvent כדי שלמשתמש תהיה האופציה להגיב למצב לחיצה,
מעין
Click משלנו.. או שהפלט היחיד של הקונטרול יהיה אותו
חלון פופ אפ. כזכור קונטרול חדש מורכב משני חלקים, צד ה
UI שאותו נמקם כResource dictionary דרך קוד Xaml ושם “נצייר” אותו  וצד לוגי שיהיה קוד C#.

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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace WpfApplication1.Controls

{

    ///     <MyNamespace:CustomButton/>

    ///

    /// </summary>

    public class CustomButton : Control

    {

        static CustomButton()

        {

            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomButton), new FrameworkPropertyMetadata(typeof(CustomButton)));

        }

 

        public CustomButton()

        {

        }

 

        public event RoutedEventHandler ButtonAction;

 

        private void RaiseButtonClickAction()

        {

            if (ButtonAction != null)

            {

                ButtonAction(thisnew RoutedEventArgs());

            }

        }

        private void DoButtonAction()

        {

            MessageBoxResult res = MessageBox.Show(“Are you sure?”

                       “Custom button Action”MessageBoxButton.YesNo);

            if (res == MessageBoxResult.Yes)

            {

                RaiseButtonClickAction();

            }

        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)

        {

            base.OnMouseLeftButtonDown(e);

            DoButtonAction();

        }

        protected override void OnMouseRightButtonDown(MouseButtonEventArgs e)

        {

            base.OnMouseRightButtonDown(e);

            DoButtonAction();

        }

    }

}

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

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1" 
    xmlns:controls="clr-namespace:WpfApplication1.Controls">
 
    <Style TargetType="{x:Type controls:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:CustomButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

את הסטייל הזה אנו
מקבלים מובנה מ
Visual
Studio
ברגע שבחרנו בהוספת פקד
והוא ממש מכוון אותנו ל
Template שלו. אצלי בדוגמא מיקמתי
תיקייה חדשה שנקראת
Controls ולכן אני מצביע אליה
בהפניית ה
Resources.

מה אני כן עושה מוסיף
אליפסה קטנה ואדומה.. זהו (ברור שתשקלו תמיכה בהחלטת המשתמש על צבע גודל וכו’)

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1" 
    xmlns:controls="clr-namespace:WpfApplication1.Controls">
 
    <Style TargetType="{x:Type controls:CustomButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:CustomButton}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Ellipse Width="50" Height="50" Fill="Red"></Ellipse>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

וזהו.. מוסיף קישור
לפרוייקט הקונטרולים ב
Main window שותל את הכפתור ונרשם
לאירוע..

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:controls="clr-namespace:WpfApplication1.Controls">
    <Grid>
        <controls:CustomButton ButtonAction="CustomButton_OnButtonAction" />
    </Grid>
</Window>

עבדנו קשה? ממש לא..
קלי קלות.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

2 תגובות

  1. kindle-google30 בMarch 2013 ב 20:02

    אחלה דוגמא. חג שמח

    Reply
  2. CLELUTTTRETTY9 בMay 2013 ב 0:13

    I’m impressed, I should say. Certainly rarely do I encounter a blog that’s both educative and entertaining, and let me tell you, you have hit the nail on the head. Your idea is outstanding; the issue is some thing that not sufficient people are speaking intelligently about. I am extremely pleased that I stumbled across this in my search for some thing relating to this.

    [URL=http://www.michaelkors4cheap.com]cheap michael kors bags[/URL]

    Reply