‡ المحتويات‡

التحكم فى تصميم الواجهات

سوف نكمل درسنا مع شرح كيفية التحكم فى تصميم الواجهات و التأكد من ترتيب الأدوات داخل النوافذ بشكل جيد بعد وضع الأدوات بداخلها.

Anchor

الخاصية Anchor لأى أداة تحدد فى أى مكان ستكون الأداة بالنسبة للحاوى الذى يحتويها ؟ و لغوياً كلمة Anchor تعنى المرساة فبمجرد أن يلقى البحارة المرساة فى الماء فإن السفينة سوف تثبت بمكانها هكذا مع مكتبات Winforms.

كل الأداوت فى مكتبات WinForms يمكن أن تكون لها أحد قيم AnchorStyles :

أعلى (Top)
يسار (Left)
يمين (Right)
أسفل (Bottom)

لاحظ أنه يمكن أن تأخذ الأداة أكثر من قيمة بإستخدام المعامل | .

مثال بسيط على الخاصية Anchor

المثال البسيط الآتى بيشرح كيفية استخدام الخاصية Anchor.

anchor.py

#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")

from System.Windows.Forms import Application, Form
from System.Windows.Forms import Button, AnchorStyles
from System.Drawing import Size, Point


class IForm(Form):

    def __init__(self):
        self.Text = 'Anchor'        
        self.Size = Size(210, 210)
              
        btn1 = Button()
        btn1.Text = "Button"
        btn1.Parent = self
        btn1.Location = Point(30, 30)

        btn2 = Button()
        btn2.Text = "Button"
        btn2.Parent = self
        btn2.Location = Point(30, 80)
        btn2.Anchor = AnchorStyles.Right
        
        self.CenterToScreen()
    

Application.Run(IForm())

فى الكود السابق و الذى يدور كله حول استخدام الخاصية Anchor لدينا زرين على النافذة و الزر الأول قيمة AnchoStyles له إفتراضية و هى أعلى و يسار AnchorStyles.Top | AnchorStyles.Left أما الزر الآخر فقيمته كما تبدو فى الكود بكل وضوح تم تعديلها إلى AnchorStyles.Right (يمين).

 btn2.Anchor = AnchorStyles.Right

فى السطر السابق قمنا بتغيير الخاصية Anchor إلى AnchorStyles.Right .

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

Before resizing After resizing

Figure: Before and after resizing

Dock

الخاصية Dock تعطى لك القدرة على تثبيت الأداة فى حافة النافذة أو أداة أخرى.

قيم DockStyle المتاحة هى :

أعلى (Top)
يسار (Left)
يمين (Right)
أسفل (Bottom)
ملىء (Fill)
لا شىء (None)

هيكل محرر (نواة لمحرر نصوص)

الكود التالى سوف يعطى مثال على استخدام الخاصية Dock.

editor.py

#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")


from System.Windows.Forms import Application, Form, MainMenu, StatusBar
from System.Windows.Forms import Shortcut, MenuItem, TextBox, DockStyle
from System.Drawing import Size, Point


class IForm(Form):

    def __init__(self):

        self.Text = 'Editor'
        self.Size = Size(210, 180)

        mainMenu = MainMenu()
        filem = mainMenu.MenuItems.Add('&File')
        filem.MenuItems.Add(MenuItem('E&xit',
                 self.OnExit, Shortcut.CtrlX))

        self.Menu = mainMenu

        tb = TextBox()
        tb.Parent = self
        tb.Dock = DockStyle.Fill
        tb.Multiline = True

        sb = StatusBar()
        sb.Parent = self
        sb.Text = 'Ready'

        self.CenterToScreen()
    

    def OnExit(self, sender, event): 
        self.Close()
    

Application.Run(IForm())

عرضنا فى المثال شريط أداوت و شريط حالة و المساحة الباقية من النافذة تم ملئها بألأداة TextBox (صندوق نص).

 tb = TextBox()
 tb.Parent = self

هنا عند إنشاء الأداة TextBox سوف يكون Form هو الأب الحاوى لهذه الأداة.

 tb.Dock = DockStyle.Fill

فى هذا السطر من الكود جعلنا TextBox تأخذ المساحة المتبقية داخل النافذة.

Editor skeleton

Figure: Editor skeleton

Anchored buttons

المثال التالى سوف يعرض زرين فى الركن الأيمن أسفل النافذة.

anchoredbuttons.py

#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")
clr.AddReference("System")

from System.Windows.Forms import Application, Form, Button, Panel
from System.Windows.Forms import DockStyle, AnchorStyles
from System.Drawing import Size, Point


WIDTH = 250
HEIGHT = 150
BUTTONS_SPACE = 15
PANEL_SPACE = 8
CLOSE_SPACE = 10


class IForm(Form):

    def __init__(self):
        self.Text = 'Buttons'
        
        self.Size = Size(WIDTH, HEIGHT)

        ok = Button()

        PANEL_HEIGHT = ok.Height + PANEL_SPACE

        panel = Panel()
        panel.Height = PANEL_HEIGHT
        panel.Dock = DockStyle.Bottom
        panel.Parent = self

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

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

        close = Button()
  
        x = close.Width

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


        self.CenterToScreen()
    

Application.Run(IForm())

سوف يعرض المثال زر Ok و زر Close فى الركن الأيمن أسفل النافذة كما هو شائع فى نوافذ مربعات الحوار.

 WIDTH = 250
 HEIGHT = 150

المتغيرات WIDTH و HEIGHT يعملوا على تحديد عرض و ارتفاع نافذة النطبيق.

 BUTTONS_SPACE = 15
 PANEL_SPACE = 8
 CLOSE_SPACE = 10

المتغير BUTTONS_SPACE قيمته هى المسافة بين الزر Ok و الزر Close و المتغير PANEL_SPACE قيمته هى المسافة بين الــpanel (الحاوى اللذى يحوى الذرين Ok و Close) و أسفل النافذة و أخيراً المتغير CLOSE_SPACE بيحدد المسافة بين الزر Close و الإطار الأيمن للنافذة.

 PANEL_HEIGHT = ok.Height + PANEL_SPACE

نحسب ارتفاع الــpanel و ارتفاعها سوف يعتمد على ارتفاع الزر Ok و أيضاُ سوف نضيف بعض المساحة الإضافية لذلك لن يكون الذرين قريبين جداً من حافة النافذة.

 panel = Panel()
 panel.Height = PANEL_HEIGHT
 panel.Dock = DockStyle.Bottom
 panel.Parent = self

فى الكود السابق تم إنشاء الأداة Panel و التحكم فى خصائصها و تم استخدامها على أنها حاوى للذرين و تم أيضاً تثبيت مكانها فى أسفل النافذة و الذرين بداخلها.

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

هنا حاوى الزر Ok هو الــpanel و تم حساب موقع الزر و الخاصية Anchor قيمتها هى Right (يمين). و بالمثل الزر الآخر.

Anchored buttons

Figure: Anchored buttons

هيكل مشغل وسائط

المثال الأخير من هذا الجزء من الدرس سوف يعرض مثال أكثر تعقيداً و هو عن هيكل (نواة) لمشغل وسائط.

player.py

#!/usr/bin/ipy

import clr
clr.AddReference("System.Windows.Forms")
clr.AddReference("System.Drawing")


from System.Windows.Forms import Application, Form, Button, Panel
from System.Windows.Forms import DockStyle, AnchorStyles, StatusBar
from System.Windows.Forms import TrackBar, MainMenu, MenuItem
from System.Windows.Forms import FlatStyle, TickStyle, Shortcut
from System.Drawing import Size, Point, Bitmap, Color


class IForm(Form):

    def __init__(self):

        self.Text = 'Player'        
        self.Size = Size(350, 280)

        mainMenu = MainMenu()
        filem = mainMenu.MenuItems.Add("&File")
        playm = mainMenu.MenuItems.Add("&Play")
        view = mainMenu.MenuItems.Add("&View")

        tools = mainMenu.MenuItems.Add("&Tools")
        favourites = mainMenu.MenuItems.Add("&Favourites")
        help = mainMenu.MenuItems.Add("&Help")
        filem.MenuItems.Add(MenuItem("E&xit",
                 self.OnExit, Shortcut.CtrlX))

        self.Menu = mainMenu

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

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

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

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

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

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

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

        sb = StatusBar()
        sb.Parent = self
        sb.Text = "Ready"

        self.CenterToScreen()
    
    def OnExit(self, sender, event):
        self.Close()


Application.Run(IForm())

هذا المثال أكثر تعقيداً و يتعرض إلى الخاصيتين Dock و Anchor.

 mainMenu = MainMenu()
 filem = mainMenu.MenuItems.Add("&File")
 ...
 self.Menu = mainMenu

هنا أنشأنا شريط القوائم.

 panel = Panel()
 panel.Parent = self
 panel.BackColor = Color.Black
 panel.Dock = DockStyle.Fill

هنا اللوحة السوداء panel التى تأخذ المساحة المتبقية من النافذة و التى تركها شريط الأداوت و الحالة و لوحة التحكم.

 buttonPanel = Panel()
 buttonPanel.Parent = self
 buttonPanel.Height = 40
 buttonPanel.Dock = DockStyle.Bottom

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

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

زر الإيقاف المؤقت هو زر من أربعة أزرار و قيمة الخاصية Anchor له ثابته أما شكل الزر فقد تم تغيره إلى flat فشكله يبدو أفضل و أيضاً تم وضع صورة داخل الزر.

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

آخر أداتين تم تغير الخاصية Anchor لهما إلى اليمين right.

Player skeleton

Figure: Player skeleton

هذا الجزء من الدرس تعرضنا لكيفية التحكم فى تصميم و ترتيب الأداوت داخل الناذفة و لقد تعرضنا إلى المتاح لنا فى مكتبات Winforms فى هذه الجزئية.

‡ المحتويات‡