لوحة الإلتفاف

لوحة الالتفاف سوف تضع جميع العناصر التي بداخلها بجانب بعضهم, افقياً(افتراضياً) أو عامودياً, و عندما لا يكون هناك متسع سوف تقوم بالتفاف العنصر للسطر الجديد لتستمر من بعده. أستخدم هذة اللوحة عندما تريد قائمة عامودية او افقية من العناصر التي سوف تلتف لسطر جديد عندما لا يكون هنالك متسع له.

عندما تستخدم الاتجاه الافقي للوحة الالتفاف, العناصر اللتي بداخلها سيكون لهم نفس الارتفاع بناءً على اطول عنصر بينهم. عندما تستخدم الاتجاه العامودي للوحة الالتفاف, العناصر اللتي بداخلها سيكون لهم نفس العرض بناءً على العنصر الأعرض بينهم.

في المثال الأول, سوف نلقي نظرة على لوحة الالتفاف مع الاتجاه الافتراضي(الافقي):

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
	<WrapPanel>
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Height="40">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

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

غيّر مقاس النافذة, و بالتالي المساحة المتوفرة ستصبح اصغر وسوف ترى كيف ستقوم اللوحة بالتكّيف وتتعدل بشكل فوري:

ستقوم اللوحة بهذه السلوكيات أيضاً عندما يكون الاتجاه اللوحة عامودياً, هذا مثال مشابة للذي قبلهُ ولكن باتجاه عامودي للوحة الالتفاف:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

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

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

<Button Width="140" Height="44">Test button 4</Button>

سوف تبدو هكذا:

لاحظ كيف ان الزر 5 استخدم فقط العرض مماثلاً الزر الرابع, ولكن لم يهتم بأمر الارتفاع, و على الرغم من ذلك تسبب في دفع الزر السادس الى عامود جديد.