Home  Contents

Layout management in GTK#

عندما نصمم واجهة لتطبيق نقرر ماالويدجات اللتى سنستخدمها وكيفية تنظيمهم، وللتنظيم يوجد ويدجات خفية "حاويات" مسئولة عن ادارة المخططات. فى هذا الفصل سنذكر Alignment و Fixed و Vbox و table

Fixed

الحاوية fixed نقوم فيها بوضع الأبناء فى امكان محدد وبمساحة محددة، لايقوم بأى ادارة تلقائية على الإطلاق لذا لانستخدمه فى الغالب الا فى بعض الأحيان مثل الألعاب او التطبيقات الخاصة بالdiagrams، المكونات القابلة للتحجيم والتحريك ك chart فى تطبيق سبريدشيت، امثلة تعليمية

fixed.cs

using Gtk;
using System;
 
class SharpApp : Window {
 
    private Gdk.Pixbuf rotunda;
    private Gdk.Pixbuf bardejov;
    private Gdk.Pixbuf mincol;
    
    public SharpApp() : base("Fixed")
    {
        SetDefaultSize(300, 280);
        SetPosition(WindowPosition.Center);
        ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40));
        DeleteEvent += delegate { Application.Quit(); };

        try {
            bardejov = new Gdk.Pixbuf("bardejov.jpg");
            rotunda = new Gdk.Pixbuf("rotunda.jpg");
            mincol = new Gdk.Pixbuf("mincol.jpg");
        } catch {
            Console.WriteLine("Images not found");
            Environment.Exit(1);
        }
        
        Image image1 = new Image(bardejov);
        Image image2 = new Image(rotunda);
        Image image3 = new Image(mincol);
        
        
        Fixed fix = new Fixed();
        
        fix.Put(image1, 20, 20);
        fix.Put(image2, 40, 160);
        fix.Put(image3, 170, 50);
  
        Add(fix);
        ShowAll();
    }


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

فى المثال نعرض 3 صور ونحدد يدويا قيم احداثيات س و ص ومكان عرض تلك الصور

 ModifyBg(StateType.Normal, new Gdk.Color(40, 40, 40));

لرؤية افضل نقوم بتعديل الخلفية لرمادى غامق

 bardejov = new Gdk.Pixbuf("bardejov.jpg");

نحصل على الصورة من القرص بإستخدام كائن Gdk.Pixbuf

 Image image1 = new Image(bardejov);
 Image image2 = new Image(rotunda);
 Image image3 = new Image(mincol);

الصف Image يستخدم فى عرض الصور ويأخذ كائن Gdk.Pixbuf فى المشيد الخاص به

 Fixed fix = new Fixed();

ننشئ الحاوية

 fix.Put(image1, 20, 20);

نضع الصورة الأولى عند 20و 20

 Add(fix);

نجعل الحاوية fix هى الحاوية الأساسية للنافذة

Figure: Fixed

Alignment

يستخدم الحاوية Alignment فى التحكم فى المحاذاة والمساحة للأبن

alignment.cs

using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Alignment")
    {
        SetDefaultSize(260, 150);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };
        
        VBox vbox = new VBox(false, 5);
        HBox hbox = new HBox(true, 3);
        
        Alignment valign = new Alignment(0, 1, 0, 0);
        vbox.PackStart(valign);
        
        Button ok = new Button("OK");
        ok.SetSizeRequest(70, 30);
        Button close = new Button("Close");
        
        hbox.Add(ok);
        hbox.Add(close);
        
        Alignment halign = new Alignment(1, 0, 0, 0);
        halign.Add(hbox);
        
        vbox.PackStart(halign, false, false, 3);

        Add(vbox);

        ShowAll();
    }


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

فى هذا الكود، نضع زرين فى اسفل يمين الشاشة. ولعمل هذا ننشئ صندوقين 1 افقى واخر رأسى وا2 حاويات محاذاة

 Alignment valign = new Alignment(0, 1, 0, 0);

لنضع الإبن فى الأسفل

 vbox.PackStart(valign);

نضع المحاذاة فى الصندوق االرأسى

HBox hbox = new HBox(true, 3);
...
Button ok = new Button("OK");
ok.SetSizeRequest(70, 30);
Button close = new Button("Close");

hbox.Add(ok);
hbox.Add(close);

ننشئ صندوق افقى بزرين داخله

 Alignment halign = new Alignment(1, 0, 0, 0);
 halign.Add(hbox);
        
 vbox.PackStart(halign, false, false, 3);

ننشئ حاوية محاذاة فنضع الإبن فى اليمين ، نضيف صندوق افقى لحاوية المحاذاة ونقوم بضمها للصندوق الرأسى- تذكر دائما ان حاوية المحاذاة لاتأخذ الا ابن واحد لذا دائما نستخدم الصناديق

Figure: Alignment

Table

الجدول يستخدم فى وضع الويدجات فى صورة صفوف واعمدة

calculator.cs

using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Calculator")
    {
        SetDefaultSize(250, 230);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };

        VBox vbox = new VBox(false, 2);
        
        MenuBar mb = new MenuBar();
        Menu filemenu = new Menu();
        MenuItem file = new MenuItem("File");
        file.Submenu = filemenu;
        mb.Append(file);

        vbox.PackStart(mb, false, false, 0);

        Table table = new Table(5, 4, true);

        table.Attach(new Button("Cls"), 0, 1, 0, 1);
        table.Attach(new Button("Bck"), 1, 2, 0, 1);
        table.Attach(new Label(), 2, 3, 0, 1);
        table.Attach(new Button("Close"), 3, 4, 0, 1);

        table.Attach(new Button("7"), 0, 1, 1, 2);
        table.Attach(new Button("8"), 1, 2, 1, 2);
        table.Attach(new Button("9"), 2, 3, 1, 2);
        table.Attach(new Button("/"), 3, 4, 1, 2);

        table.Attach(new Button("4"), 0, 1, 2, 3);
        table.Attach(new Button("5"), 1, 2, 2, 3);
        table.Attach(new Button("6"), 2, 3, 2, 3);
        table.Attach(new Button("*"), 3, 4, 2, 3);

        table.Attach(new Button("3"), 0, 1, 3, 4);
        table.Attach(new Button("2"), 1, 2, 3, 4);
        table.Attach(new Button("1"), 2, 3, 3, 4);
        table.Attach(new Button("-"), 3, 4, 3, 4);

        table.Attach(new Button("4"), 0, 1, 4, 5);
        table.Attach(new Button("5"), 1, 2, 4, 5);
        table.Attach(new Button("6"), 2, 3, 4, 5);
        table.Attach(new Button("*"), 3, 4, 4, 5);

        vbox.PackStart(new Entry(), false, false, 0);
        vbox.PackEnd(table, true, true, 0);
        
        Add(vbox);
        ShowAll();
    }


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

نستخدم الجدول لإنشاء هيكل الة حاسبة

 Table table = new Table(5, 4, true);

ننشئ جدول ب5 صفوف و 4 اعمدة والمعامل الثالث يعنى التجانس (اذا كان true فتكون كل الأبناء بنفس المساحة لأكبرهم)

 table.Attach(new Button("Cls"), 0, 1, 0, 1);

نضيف زر للجدول فى اعلى اليسار.. اول معاملين هى اليسار واليمين للخلية واخر اثنين هما اعلى واسفل الخلية

 vbox.PackEnd(table, true, true, 0);

نضيف الجدول للصندوق الرأسى

Figure: Calculator skeleton

Windows

سننشئ الآن نافذة متقدمة.. سنعرض نافذة ممكن ان تجدها فى JDeveloper IDE

windows.cs

using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Windows")
    {
        SetDefaultSize(300, 250);
        SetPosition(WindowPosition.Center);
        BorderWidth = 15;
        DeleteEvent += delegate { Application.Quit(); };
        
        Table table = new Table(8, 4, false);
        table.ColumnSpacing = 3;

        Label title = new Label("Windows");

        Alignment halign = new Alignment(0, 0, 0, 0);
        halign.Add(title);
        
        table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, 
            AttachOptions.Fill, 0, 0);

        TextView wins = new TextView();
        wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20));
        wins.CursorVisible = false;
        table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand,
            AttachOptions.Fill | AttachOptions.Expand, 1, 1);

        Button activate = new Button("Activate");
        activate.SetSizeRequest(50, 30);
        table.Attach(activate, 3, 4, 1, 2, AttachOptions.Fill, 
            AttachOptions.Shrink, 1, 1);
        
        Alignment valign = new Alignment(0, 0, 0, 0);
        Button close = new Button("Close");
        close.SetSizeRequest(70, 30);
        valign.Add(close);
        table.SetRowSpacing(1, 3);
        table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill,
            AttachOptions.Fill | AttachOptions.Expand, 1, 1);
            
        Alignment halign2 = new Alignment(0, 1, 0, 0);
        Button help = new Button("Help");
        help.SetSizeRequest(70, 30);
        halign2.Add(help);
        table.SetRowSpacing(3, 6);
        table.Attach(halign2, 0, 1, 4, 5, AttachOptions.Fill, 
            AttachOptions.Fill, 0, 0);
        
        Button ok = new Button("OK");
        ok.SetSizeRequest(70, 30);
        table.Attach(ok, 3, 4, 4, 5, AttachOptions.Fill, 
            AttachOptions.Fill, 0, 0);
                          
        Add(table);
        ShowAll();
    }

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

هذا الكود يشرح كيفية عمل تلك النافذة

 Table table = new Table(8, 4, false);
 table.ColumnSpacing = 3;

هذا المثال مبنى الجدول، سيكون هناك 3 بكسل فواصل بين الأعمدة

 Label title = new Label("Windows");

 Alignment halign = new Alignment(0, 0, 0, 0);
 halign.Add(title);
        
 table.Attach(halign, 0, 1, 0, 1, AttachOptions.Fill, 
     AttachOptions.Fill, 0, 0);

هذا الكود ينشئ نص ساكن محاذى لليسار وموضوع فى اول صف للجدول

 TextView wins = new TextView();
 wins.ModifyFg(StateType.Normal, new Gdk.Color(20, 20, 20));
 wins.CursorVisible = false;
 table.Attach(wins, 0, 2, 1, 3, AttachOptions.Fill | AttachOptions.Expand,
     AttachOptions.Fill | AttachOptions.Expand, 1, 1);

ويدجت ال text view يتمدد على صفين وعمودين، ونجعله غير قابل للتحرير ونخفى السهم

 Alignment valign = new Alignment(0, 0, 0, 0);
 Button close = new Button("Close");
 close.SetSizeRequest(70, 30);
 valign.Add(close);
 table.SetRowSpacing(1, 3);
 table.Attach(valign, 3, 4, 2, 3, AttachOptions.Fill,
     AttachOptions.Fill | AttachOptions.Expand, 1, 1);

نضع الزر close بجانب ال text view فى العمود الرابع "نبدأ العد من 0” ونضيف الزر الى المحاذاة حتى نستطيع ان نحاذى الى الأعلى

Figure: Windows

Home ‡ Contents ‡ Top of Page