1.ادارة المخططات

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

1.Anchor

الخاصية Anchor تحدد كيفية تحجيم الأداة مع الأب، هى تعبير من عالم البحرية.. حيث عندما يتم القاء الأنكور (الهلب) فى الماء يتم ربط السفينة فى مكان ما، نفس الشئ ينطبق على ادوات WinForms

لكل اداة تستطيع اخذ قيمة من AnchorStyles لأعلى لليسار لليمين لأسفل او ربما مجموعة من تلك الإختيار بإستخدام المعامل |

2.Basic Anchor example

سنعرض فى هذا المثال البسيط توضيح لكيفية استخدام Anchor

anchor.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {


    public MForm() {
        Text = "Anchor";
        Size = new Size(210, 210);

        Button btn1 = new Button();
        btn1.Text = "Button";
        btn1.Parent = this;
        btn1.Location = new Point(30, 30);

        Button btn2 = new Button();
        btn2.Text = "Button";
        btn2.Parent = this;
        btn2.Location = new Point(30, 80);
        btn2.Anchor = AnchorStyles.Right;

        CenterToScreen();
    }
}


class MApplication {
    public static void Main() {
        MForm mf = new MForm();
        Application.Run(mf);
    }
}

هذا المثال البسيط يوضح بسهولة ماكل تلك الجلبة هو Anchor ، لدينا زرين ونافذة. الزر الأول يستخدم القيم الإفتراضية لل AnchorStyles -لأعلى ولليسار – بينما الثانى لليمين

 btn2.Anchor = AnchorStyles.Right;

هنا حددنا قيمة ال Anchor يدويا الى AnchorStyles.Right

الآن القى نظرة على الصورتين ، اليسرى فى بداية البرنامج ، واليمنى بعد اعادة التحجيم. حيث يحافظ الزر الأول على بعده عن الأعلى وعن اليسار بينما الثانى يحافظ على البعد من اليمين ولكن لايهتم بالناحية الرأسية

Before resizing After resizing

Figure: Before and after resizing

3.Dock

الخاصية Dock تستخدم لتثبيت اداة عن حافة معينة للنافذة الأب او للاداة ولدينا قيم لل DockStyles ك أعلى ويسار ويمين واسفل وملء وفارغ

Editor skeleton

سنوضح فى هذا المثال مفهوم Dock

editor.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {


    public MForm() {
        Text = "Editor";
        Size = new Size(210, 180);

        MainMenu mainMenu = new MainMenu();
        MenuItem file = mainMenu.MenuItems.Add("&File");
        file.MenuItems.Add(new MenuItem("Eξt",
                 new EventHandler(this.OnExit), Shortcut.CtrlX));

        Menu = mainMenu;

        TextBox tb = new TextBox();
        tb.Parent = this;
        tb.Dock = DockStyle.Fill;
        tb.Multiline = true;

        StatusBar sb = new StatusBar();
        sb.Parent = this;
        sb.Text = "Ready";

        CenterToScreen();
    }

    void OnExit(object sender, EventArgs e) {
        Close();
    }
}


class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}

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

 TextBox tb = new TextBox();
 tb.Parent = this;

ننشئ حقل الإدخال ونحدد الأب له

 tb.Dock = DockStyle.Fill;

هذا الكود يجعل حقل الإدخال يملء باقى المساحة داخل النافذة

Editor skeleton

Figure: Editor skeleton

4.Anchored buttons

فى المثال التالى سنتعرض لإنشاء زرين ونضعهم فى اسفل يمين الشاشة

anchoredbuttons.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {

    private int WIDTH = 250;
    private int HEIGHT = 150;
    private int BUTTONS_SPACE = 15;
    private int PANEL_SPACE = 8;
    private int CLOSE_SPACE = 10;

    public MForm() {
        Text = "Anchor";
        Size = new Size(WIDTH, HEIGHT);

        Button ok = new Button();

        int PANEL_HEIGHT = ok.Height + PANEL_SPACE;

        Panel panel = new Panel();
        panel.Height = PANEL_HEIGHT;
        panel.Dock = DockStyle.Bottom;
        panel.Parent = this;     

        int x = ok.Width * 2 + BUTTONS_SPACE;
        int y = (PANEL_HEIGHT - ok.Height) / 2;

        ok.Text = "Ok";
        ok.Parent = panel;
        ok.Location = new Point(WIDTH-x, y);
        ok.Anchor = AnchorStyles.Right;

        Button close = new Button();
  
        x = close.Width;

        close.Text = "Close";
        close.Parent = panel;
        close.Location = new Point(WIDTH-x-CLOSE_SPACE, y);
        close.Anchor = AnchorStyles.Right;

        CenterToScreen();
    }
}


class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}

فى المثال نعرض زرين OK, Close فى اسفل يمين الشاشة كما فى الكثير من صناديق الحوار (dialogs)

 private int WIDTH = 250;
 private int HEIGHT = 150;

متغيريى العرض والإرتفاع يحددان العرض والإرتفاع للنافذة

 private int BUTTONS_SPACE = 15;
 private int PANEL_SPACE = 8;
 private int CLOSE_SPACE = 10;

المتغير BUTTONS_SPACE يحدد المسافة بين الزرين OK, Close

المتغير PANEL_SPACE يحدد المسافة بين الpanel واسفل النافذة

المتغير CLOSE_SPACE يحدد المسافة بين الزر close والحافة اليمنى للنافذة

int PANEL_HEIGHT = ok.Height + PANEL_SPACE;

هنا نحسب ارتفاع ال panel ، ارتفاعها مبنى على ارتفاع الزر ok نضيف بعض المساحة حتى لاتكون الأزرار قريبة جدا من الحافة

 Panel panel = new Panel();
 panel.Height = PANEL_HEIGHT;
 panel.Dock = DockStyle.Bottom;
 panel.Parent = this

ننشئ ونخصص اداة panel (فى مثالنا ستكون حاوية لزرين ومثبته للحافة السفلى للنافذة)

 ok.Text = "Ok";
 ok.Parent = panel;
 ok.Location = new Point(WIDTH-x, y);
 ok.Anchor = AnchorStyles.Right;

نحدد الأب للزر ok بأنه ال panel ونحسب الموقع له، ونجعل الخاصية Anchor له لليمين (كذلك الزر الآخر)

Anchored buttons

Figure: Anchored buttons

5.Player skeleton

فى هذا المثال الأخير سننشئ مثال معقد بعض الشئ (الهيكل الأساسى لمشغل موسيقى)

player.cs

using System;
using System.Drawing;
using System.Windows.Forms;

class MForm : Form {


    public MForm() {
        Text = "Player";
        Size = new Size(350, 280);

        MainMenu mainMenu = new MainMenu();
        MenuItem file = mainMenu.MenuItems.Add("&File");
        MenuItem playm = mainMenu.MenuItems.Add("&Play");
        MenuItem view = mainMenu.MenuItems.Add("&View");

        MenuItem tools = mainMenu.MenuItems.Add("&Tools");
        MenuItem favourites = mainMenu.MenuItems.Add("&Favourites");
        MenuItem help = mainMenu.MenuItems.Add("&Help");
        file.MenuItems.Add(new MenuItem("Eξt",
                 new EventHandler(this.OnExit), Shortcut.CtrlX));

        Menu = mainMenu;

        Panel panel = new Panel();
        panel.Parent = this;
        panel.BackColor = Color.Black;
        panel.Dock = DockStyle.Fill;
        
        Panel buttonPanel = new Panel();
        buttonPanel.Parent = this;
        buttonPanel.Height = 40;
        buttonPanel.Dock = DockStyle.Bottom;

        Button pause = new Button();
        pause.FlatStyle = FlatStyle.Popup;
        pause.Parent = buttonPanel;
        pause.Location = new Point(5, 10);
        pause.Size = new Size(25, 25);
        pause.Image = new Bitmap("pause.png");

        Button play = new Button();
        play.FlatStyle = FlatStyle.Popup;
        play.Parent = buttonPanel;
        play.Location = new Point(35, 10);
        play.Size = new Size(25, 25);
        play.Image = new Bitmap("play.png");

        Button forward  = new Button();
        forward.FlatStyle = FlatStyle.Popup;
        forward.Parent = buttonPanel;
        forward.Location = new Point(80, 10);
        forward.Size = new Size(25, 25);
        forward.Image = new Bitmap("forward.png");

        Button backward  = new Button();
        backward.FlatStyle = FlatStyle.Popup;
        backward.Parent = buttonPanel;
        backward.Location = new Point(110, 10);
        backward.Size = new Size(25, 25);
        backward.Image = new Bitmap("backward.png");

        TrackBar tb = new TrackBar();
        tb.Parent = buttonPanel;
        tb.TickStyle = TickStyle.None;
        tb.Size = new Size(150, 25);
        tb.Location = new Point(200, 10);
        tb.Anchor = AnchorStyles.Right;

        Button audio = new Button();
        audio.FlatStyle = FlatStyle.Popup;
        audio.Parent = buttonPanel;
        audio.Size = new Size(25, 25);
        audio.Image = new Bitmap("audio.png");
        audio.Location = new Point(170, 10);
        audio.Anchor = AnchorStyles.Right;

        StatusBar sb = new StatusBar();
        sb.Parent = this;
        sb.Text = "Ready";

        CenterToScreen();
    }

    void OnExit(object sender, EventArgs e) {
        Close();
    }
}


class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}

هذا مثال معقد يعرض امكانيات Anchor, Dock

 MainMenu mainMenu = new MainMenu();
 MenuItem file = mainMenu.MenuItems.Add("&File");
 ...
 Menu = mainMenu;

ننشئ شريط القوائم

 Panel panel = new Panel();
 panel.Parent = this;
 panel.BackColor = Color.Black;
 panel.Dock = DockStyle.Fill;

هذه اللوحة السوداء تشغل المساحة الباقية

 Panel buttonPanel = new Panel();
 buttonPanel.Parent = this;
 buttonPanel.Height = 40;
 buttonPanel.Dock = DockStyle.Bottom;

هذه لوحة التحكم، تحويها النافذة ومثبته بأسفلها، وارتفاعها 40px ، وفى داخلها نضع كل الأزرار والمنزلق.

This is the control panel. Its parent is the form container. It is glued to the bottom of the form. Its height is 40px. Inside this control panel, we place all the buttons and the trackar.

 Button pause = new Button();
 pause.FlatStyle = FlatStyle.Popup;
 pause.Parent = buttonPanel;
 pause.Location = new Point(5, 10);
 pause.Size = new Size(25, 25);
 pause.Image = new Bitmap("pause.png");

زر التوقف pause واحد من 4 وحددنا الستايل للزر بأنه مسطح لأنه يكون شكله اجمل، ونضع bitmap عليه

 tb.Anchor = AnchorStyles.Right;
 ... 
 audio.Anchor = AnchorStyles.Right;

نحدد Right للخاصية Anchor لالأداتين الأخيريتين

Player skeleton

Figure: Player skeleton

ناقشنا فى هذه الجزئية بعض استراتيجيات التعامل مع المخططات الخاصة ب WinForms

Home ‡ Contents ‡ Top of Page