آموزش برنامه نویسی

کنترل WrapPanel

کنترل WrapPanel، زمانی کاربرد دارد که بخواهیم تعدادی کنترل را به صورت افقی (پیش فرض) یا عمودی پشت سر هم قرار دهیم. اگر این کنترل‌ها نتوانند در یک راستا در صفحه قرار بگیرند، ادامه آن‌ها را به خط بعد منتقل می‌کند. به مثال زیر توجه کنید:

<WrapPanel>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button Height="40">Button 4</Button>
    <Button>Button 5</Button>
    <Button>Button 6</Button>
</WrapPanel>

زمانی که این برنامه را اجرا کنیم خروجی زیر را نشان می‌دهد:

در این مثال 6 دکمه را داخل یک WrapPanel قرار دادیم که به صورت پیش فرض عناصر را به شکل افقی (Horizontal) پشت سر هم قرار می‌دهد. همانطور که در تصویر بالا نیز مشاهده می‌کنید، از آنجایی که نمی‌تواند دکمه پنجم را در فضای باقی مانده از پنجره و در راستای افقی جا دهد، بنابراین ادامه دکمه‌ها را به خط بعد منتقل می‌کند.
نکته دیگری که در این مثال وجود دارد این است که ما با استفاده از خاصیت Height، ارتفاع 40 پیکسل را برای دکمه چهارم در نظر گرفتیم اما اگر دقت کنید، ارتفاع تمام دکمه‌هایی که با دکمه چهارم هم ردیف هستند نیز به 40 تغییر پیدا کرده است ولی سایر دکمه‌ها همان سایز پیشفرض خود را حفظ کرده‌اند. حال اگر سایز پنجره را کمی کوچک‌تر کنیم ظاهر برنامه به شکل زیر تغییر پیدا می‌کند:

همانطور که در تصویر بالا نیز مشاهده می‌کنید، باز هم ارتفاع دکمه‌ای که با دکمه چهارم هم ردیف است به 40 تغییر پیدا کرده است ولی سایر ردیف‌ها سایز پیش فرض خود را حفظ کرده‌اند. البته توجه داشته باشید در حالت افقی (Horizontal) فقط ارتفاع عناصری در یک ردیف قرار دارند یکسان در نظر گرفته می‌شود و برای مثال در صورتی که عرض (Width) دکمه چهارم را نیز تغییر دهیم، تاثیری بر عرض سایر دکمه‌های هم ردیف آن نمی‌گذارد. به مثال زیر توجه کنید:

<WrapPanel>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button Height="40" Width="140">Button 4</Button>
    <Button>Button 5</Button>
    <Button>Button 6</Button>
</WrapPanel>

زمانی که این برنامه را اجرا کنیم خروجی زیر را نشان می‌دهد:

همانطور که در تصویر بالا نیز مشاهده می‌کنید، ارتفاع تمام دکمه‌هایی که با دکمه چهارم هم ردیف هستند را، 40 در نظر گرفته‌ایم و فقط عرض دکمه چهارم را برابر با 140 قرار دادیم و عرض سایر دکمه‌های آن ردیف تغییری نکرده است. همچنین شما می‌توانید با استفاده از خاصیت Orientation و مقدار Vertical، عناصر خود را به صورت عمودی پشت سر هم قرار دهید. به مثال زیر توجه کنید:

<WrapPanel Orientation="Vertical">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button Width="140">Button 4</Button>
    <Button>Button 5</Button>
    <Button>Button 6</Button>
</WrapPanel>

زمانی که این برنامه را اجرا کنید خروجی زیر را نشان می‌دهد:

به طور مشابه اگر عناصری که داخل این WrapPanel قرار دادیم نتوانند در یک راستا به صورت عمودی پشت سر هم قرار گیرند، ادامه آن‌ها را به خط بعدی منتقل می‌کند. همچنین در این مثال عرض (Width) دکمه چهارم را برابر با 140 قرار دادیم، بنابراین عرض تمام دکمه‌هایی که با دکمه چهارم هم ستون هستند نیز به 140 تغییر پیدا می‌کند. همانطور که پیش‌تر بررسی کردیم، در حالت افقی، فقط ارتفاع عناصر هم ردیف یکسان در نظر گرفته می‌شود ولی در حالت عمودی فقط عرض عناصری که در یک ستون قرار دارند یکسان در نظر گرفته می‌شود.