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

کنترل DockPanel

با استفاده از کنترل DockPanel می‌توانیم کنترل‌های خود را به چهار ضلع بالا، پایین، چپ و راست پنل متصل کنیم. برای درک بهتر به مثال زیر توجه کنید:

<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>

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

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

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

<DockPanel>
    <Button DockPanel.Dock="Top"   >Top   </Button>
    <Button DockPanel.Dock="Bottom">Bottom</Button>
    <Button DockPanel.Dock="Left"  >Left  </Button>
    <Button DockPanel.Dock="Right" >Right1</Button>
    <Button DockPanel.Dock="Right" >Right2</Button>
</DockPanel>

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

همانطور که در تصویر بالا نیز مشاهده می‌کنید دکمه Right2 که آخرین عنصر موجود در DockPanel است، در عین حالی که به سمت راست پنل متصل است، تمام فضای باقی مانده از پنل را هم پر کرده است. البته شما می‌توانید با قرار دادن مقدار False در خاصیت LastChildFill این ویژگی را غیر فعال کنید. به مثال زیر توجه کنید:

<DockPanel LastChildFill="False">
    <Button DockPanel.Dock="Top"   >Top   </Button>
    <Button DockPanel.Dock="Bottom">Bottom</Button>
    <Button DockPanel.Dock="Left"  >Left  </Button>
    <Button DockPanel.Dock="Right" >Right1</Button>
    <Button DockPanel.Dock="Right" >Right2</Button>
</DockPanel>

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

همانطور که در تصویر بالا نیز مشخص است، با قرار دادن مقدار False در خاصیت LastChildFill، آخرین دکمه یعنی Right2 فضای باقی مانده از صفحه را پر نکرده است.
نکته دیگری که لازم است در مورد این کنترل بدانید این است که DockPanel فضای موجود را به چه شکل و با چه اولویتی تقسیم بندی می‌کند. اگر به مثالی که در ابتدای این بخش (کنترل DockPanel) زدیم توجه کنید، دکمه Top تمام فضای بالای پنجره را احاطه نکرده است و بخشی از آن توسط دکمه Left اشغال شده است. در DockPanel اولویت با کنترلی است که زودتر داخل آن قرار گرفته باشد. در مثال ذکر شده در ابتدای این بخش ما ابتدا دکمه Left را داخل DockPanel قرار دادیم، بنابراین ابتدا تمام فضای سمت چپ پنل را به آن اختصاص می‌دهد و سپس در خط بعد که دکمه Top را قرار دادیم، تمام فضای بالای پنل به جز آن بخشی که توسط دکمه Left اشغال شده را به آن اختصاص می‌دهد. برای درک بهتر به مثال زیر توجه کنید:

<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>

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

با توجه به توضیحاتی که پیش‌تر داده شد ابتدا فضای بالای پنل را به دکمه Top و سپس به ترتیب به دکمه‌های Bottom ،Left ،Right و Center اختصاص می‌دهد. همچنین در این مثال با استفاده از خاصیت‌های Width و Height، عرض و ارتفاعی را نیز برای دکمه‌ها در نظر گرفتیم.