Home  Contents

Widgets II in GTK#

سنتابع فى هذه الجزئية تقديمنا لبعض اهم الويدجات فى GTK#

Entry

هى ويدجت مسئولة عن ادخال سطر واحد نصى

entry.cs
 
using Gtk;
using System;
 
class SharpApp : Window {
 
    Label label;

    public SharpApp() : base("Entry")
    {
        SetDefaultSize(250, 200);
        SetPosition(WindowPosition.Center);
        BorderWidth = 7;
        DeleteEvent += delegate { Application.Quit(); };
        
        label = new Label("...");

        Entry entry = new Entry();
        entry.Changed += OnChanged;

        Fixed fix = new Fixed();
        fix.Put(entry, 60, 100);
        fix.Put(label, 60, 40);

        Add(fix);

        ShowAll();
    }

    void OnChanged(object sender, EventArgs args)
    {
        Entry entry = (Entry) sender;
        label.Text = entry.Text;
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

فى المثال نعرض حقل ادخال و label ، ويتم تحديث النص الظاهر على ال label بناءا على المدخلات فى حقل الإدخال

 Entry entry = new Entry();

انشاء الويدجت

 entry.Changed += OnChanged;

ربط الحدث Changed بمعالج الحدث -الطريقة- OnChanged

 void OnChanged(object sender, EventArgs args)
 {
     Entry entry = (Entry) sender;
     label.Text = entry.Text;
 }

نحصل على النص الذى تم ادخاله لحقل الإدخال -بإستخدام الخاصية Text- ونقوم بتحديث محتوى الlabel بإستخدام الخاصية Text

Figure: Entry Widget

Scale

ال Scale -المقياس- هى ويدجت يسمح للمستخدم بإدخال قيمة عن طريق سحب سهم يشير لقيم فى فترة محددة، فى مثالنا نعرض اداة للتحكم فى الصوت

The Scale is a widget, that lets the user graphically select a value by sliding a knob within a bounded interval. Our example will show a volume control.

hscale.cs
 
using Gtk;
using System;
 
class SharpApp : Window {
 
    Gdk.Pixbuf mute, min, med, max;
    Image image;

    public SharpApp() : base("Scale")
    {
        SetDefaultSize(260, 150);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        HScale scale = new HScale(0, 100, 1);
        scale.SetSizeRequest(160, 35);
        scale.ValueChanged += OnChanged;

        LoadPixbufs();

        image = new Image(mute);

        Fixed fix = new Fixed();
        fix.Put(scale, 20, 40);
        fix.Put(image, 219, 50);

        Add(fix);

        ShowAll();
    }

    void LoadPixbufs() 
    {
        try {
            mute = new Gdk.Pixbuf("mute.png");
            min = new Gdk.Pixbuf("min.png");
            med = new Gdk.Pixbuf("med.png");
            max = new Gdk.Pixbuf("max.png");
        } catch {
            Console.WriteLine("Error reading Pixbufs");
            Environment.Exit(1);
        }
    }

    void OnChanged(object obj, EventArgs args)
    {
        HScale scale = (HScale) obj;
        double val = scale.Value;

        if (val == 0) {
            image.Pixbuf = mute;
        } else if (val > 0 && val <= 30) {
            image.Pixbuf = min;
        } else if (val > 30 && val < 80) {
            image.Pixbuf = med;
        } else {
            image.Pixbuf = max;
        }
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

فى المثال بالأعلى، لدينا مقياس افقى و صورة وبسحب المقياس يتم تغيير تلك الصورة بصورة ملائمة للقيمة المختارة

In the example above, we have HScale and Image widgets. By dragging the scale we change the image on the Image widget.

 HScale scale = new HScale(0, 100, 1);

ننشئ المقياس، المعاملات هى اصغر واعلى قيم والخطوة

 HScale scale = (HScale) obj;
 double val = scale.Value;

فى الطريقة OnChange نحصل على القيمة المختارة

 if (val == 0) {
     image.Pixbuf = mute;
 } else if (val > 0 && val <= 30) {
     image.Pixbuf = min;
 } else if (val > 30 && val < 80) {
     image.Pixbuf = med;
 } else {
    image.Pixbuf = max;
 }

بناءا على قيمة المسطرة نختار الصورة المناسبة ليتم عرضها على الويدجت

Figure: HScale Widget

ToggleButton

نأتى لويدجت ToggleButton وهو مشابه كثيرا لصندوق الإختبار CheckBox وله حالتين ايضا مضغوط او غير مضغوط.. تستطيع التحويل بينهم بالضغط عليه.

togglebuttons.cs

using Gtk;
using System;
 
class SharpApp : Window {
 
    DrawingArea darea;
    Gdk.Color col;

    public SharpApp() : base("ToggleButtons")
    {
        col = new Gdk.Color(0, 0, 0);

        SetDefaultSize(350, 240);
        SetPosition(WindowPosition.Center);
        BorderWidth = 7;
        DeleteEvent += delegate { Application.Quit(); };
        
        ToggleButton red = new ToggleButton("Red");
        red.SetSizeRequest(80, 35);
        red.Clicked += OnRed;

        ToggleButton green = new ToggleButton("Green");
        green.SetSizeRequest(80, 35);
        green.Clicked += OnGreen;

        ToggleButton blue = new ToggleButton("Blue");
        blue.SetSizeRequest(80, 35);
        blue.Clicked += OnBlue;

        darea = new DrawingArea();
        darea.SetSizeRequest(150, 150);
        darea.ModifyBg(StateType.Normal, col);

        Fixed fix = new Fixed();
        fix.Put(red, 30, 30);
        fix.Put(green, 30, 80);
        fix.Put(blue, 30, 130);
        fix.Put(darea, 150, 30);

        Add(fix);

        ShowAll();
    }

    void OnRed(object sender, EventArgs args) 
    {
        ToggleButton tb = (ToggleButton) sender;
        
        if (tb.Active) {
            col.Red = 65535; 
        } else {
            col.Red = 0;
        }

        darea.ModifyBg(StateType.Normal, col);         
    }

    void OnGreen(object sender, EventArgs args) 
    {
        ToggleButton tb = (ToggleButton) sender;

        if (tb.Active) {
            col.Green = 65535; 
        } else {
            col.Green = 0;
        }
        
        darea.ModifyBg(StateType.Normal, col);
    }

    void OnBlue(object sender, EventArgs args) 
    {
        ToggleButton tb = (ToggleButton) sender;

        if (tb.Active) {
            col.Blue = 65535; 
        } else {
            col.Blue = 0;
        }

        darea.ModifyBg(StateType.Normal, col);
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

فى مثالنا نعرض 3 toggle buttons ومساحة للرسم DrawingArea ، ونحدد الخلفية للأسود، وعند تغيير حالة اى زر يتم تحديد قيم الأحمر والأخضر والأزرق من قيمة اللون.. فيعتمد اللون على اى من الأزرار مضغوط

 col = new Gdk.Color(0, 0, 0);

هذه هى قيمة اللون اللذى سيتم تحديثه عبر ال toggle buttons

 ToggleButton red = new ToggleButton("Red");
 red.SetSizeRequest(80, 35);
 red.Clicked += OnRed;

انشاء كان من الصف ToggleButton وحددنا المساحة الخاصة ب ل 80*35 بكسل، وكل زر له معالج الحدث – Clicked- الخاص به

 darea = new DrawingArea();
 darea.SetSizeRequest(150, 150);
 darea.ModifyBg(StateType.Normal, col);

ويدجت منطقة الرسم نستطيع استخدامه فى عرض لون مختلط بسبب الأزرار، نبدأ بعرض اللون الأسود

 if (tb.Active) {
     col.Red = 65535; 
 } else {
     col.Red = 0;
 }

نقوم بتحديث قسم الأحمر من اللون بناءا على قيمة الخاصية Active التى تحدد ماذا كان الزر مضغوط ام لا

 darea.ModifyBg(StateType.Normal, col);

نحدث لون منطقة الرسم

Figure: ToggleButton widget

Calendar

الويدجت الأخير هو Calendar يستخدم للتعامل مع التواريخ

calendar.cs

using Gtk;
using System;
 
class SharpApp : Window {
 
    private Label label;

    public SharpApp() : base("Calendar")
    {
        SetDefaultSize(300, 270);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        label = new Label("...");

        Calendar calendar = new Calendar();
        calendar.DaySelected += OnDaySelected;

        Fixed fix = new Fixed();
        fix.Put(calendar, 20, 20);
        fix.Put(label, 40, 230);

        Add(fix);

        ShowAll();
    }

    void OnDaySelected(object sender, EventArgs args)
    {
        Calendar cal = (Calendar) sender;
        label.Text = cal.Month + 1 + "/" + cal.Day + "/" + cal.Year;
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}

لدينا ويدجت Calendar لنختار منه تاريخ ماو label لعرض ذلك التاريخ المختار

 Calendar calendar = new Calendar();

انشاء الويدجت

 Calendar cal = (Calendar) sender;
 label.Text = cal.Month + 1 + "/" + cal.Day + "/" + cal.Year;

فى الطريقة OnDaySelected نحصل كائن Calendar من المرسل sender (تحويل قسرى)، ونقوم بتحديث محتوى ال label بواسطة التاريخ المختار

Figure: Calendar

انهينا الحديث فى هذا الشابتر على مجموعة مهمة من الويدجات

Home ‡ Contents ‡ Top of Page