The DockPanel control

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

كما رأينا في معظم اللوحات الأخرى في WPF، ستتمكن من الإستفادة من جميع خواص اللوحة باستخدام خاصية متعلقة باللوحة، في هذه الحالة خاصية DockPanel.Dock، التي تقرّر ما الإتجاه الذي تريده أنت من مكوناتها الداخلية ليتم إرسائه. إذا لم تستخدم هذه الخاصية، أول مكوّن(ـات) سيتم إرسائه في اليسار، وآخر مكوّن سيشغل ما تبقى من مساحة. هنا مثال لكيفية إستخدام هذه الخاصية

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Left">Left</Button>
		<Button DockPanel.Dock="Top">Top</Button>
		<Button DockPanel.Dock="Right">Right</Button>
		<Button DockPanel.Dock="Bottom">Bottom</Button>
		<Button>Center</Button>
	</DockPanel>
</Window>

كما ذكر سابقًا، نحن لا نقوم بوضع الإرساء لآخر ابن داخل لوحة الإرساء، لأنه سيتم وضع آخر ابن في الوسط تلقائيًا. وهذا يمكّنه من حجز ماتبقى من مساحة. ستلاحظ أيضًا كيف أن كل مكوّن محيط بالوسط سيحجز المساحة التي يحتاجا فقط، وجميع ماتبقى من المكوَنات سيتم وضعه في اليسار. وهو السبب الذي يجعل الزر الأيمن يحجز مساحة أكبر من الزر الأيسر، والحرف الزائد في النص يحتاج لمساحة أكبر لعرض كامل النص.

آخر ما ستلاحظ، هو كيفية تقسيم المساحة، على سبيل المثال، أعلى زر لا يشغل جميع المساحة العليا، لأن الزر الأيسر حجز حيّزا منه. لوحة الإرساء ستقرّر من المكوّن الأجدر، بالنظر إلى مكانه في كود Xaml، في هذه الحالة، الزر الأيسر سيعطى أولوية لأنه موجود في أعلى كود لوحة الإرساء في Xaml، لحسن الحظ، هذا يعني بأنه من السهل تغييره، كما سنرى في المثال القادم، عندما نقوم بترتيب المساحة لكل زر بالتساوي عن طريق وضع قيم الطول والعرض لكل مكوّن داخل لوحة الإرساء.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

نلاحظ بأن الأزرار العليا والسفلى تأخذ أولوية على الأزرار في اليمين واليسار، وكلّهم يأخذون مقدار 50 بيكسل إما في الطول أو العرض. إذا قمت بتكبير أو تصغير النافذة، سترى بأن الطول والعرض سيبقون ثابتين، فقط المنطقة الوسطى ستتأثر بالتكبير والتصغير.

LastChildFill

كما ذُكر سابقًا، آخر زر داخل لوحة الإرساء سيحجز جميع ماتبقّى من مساحة، ولكن يمكنك تعطيل ذلك باستخدام خاصية LastChildFill. سنرى مثالًا على كيفية تعطيل ذلك باستخدام هذه الخاصية، وأيضا سنعرض كيف يمكن إرساء أكثر من زر في نفس الوقت.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

في هذا المثال، قمنا بإرساء زرّين إلى اليسار وزرّين إلى اليمين، وأيضا قمنا بتعطيل خاصية LastChildFill. وهذا ما يجعل المنطقة الوسطى فارغة.