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

کنترل Canvas

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

<Canvas>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
</Canvas>

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

همانطور که می‌بینید ما دو Button را در Canvas قرار دادیم ولی هر دو دقیقاً در یک مکان قرار گرفتند و فقط دومی را برای ما نشان می‌دهد. برای تغییر دادن مکان این کنترل‌ها شما هم می‌توانید به صورت دستی و با ماوس مکان آن‌ها را تغییر دهید و هم می‌توانید از خاصیت‌های Left، Right، Top و Bottom استفاده کنید. این خاصیت‌ها به شما اجازه می‌دهند تا مکان کنترل‌های داخل Canvas را نسبت به گوشه بالا سمت چپ آن مشخص کنید. به مثال زیر توجه کنید:

<Canvas>
    <Button Canvas.Left ="10"                   >Top    left </Button>
    <Button Canvas.Right="10"                   >Top    right</Button>
    <Button Canvas.Left ="10" Canvas.Bottom="10">Bottom left </Button>
    <Button Canvas.Right="10" Canvas.Bottom="10">Bottom right</Button>
</Canvas>

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

توجه داشته باشید که در این مثال فقط خاصیت‌هایی که لازم داشتیم را مقداردهی کردیم. برای مثال در دکمه اول و دوم برای حرکت دادن Button در محور X ها، فقط از خاصیت‌های Left و Right استفاده کردیم و در سایر خاصیت‌ها به صورت پیش فرض مقدار NaN (Not a Number) قرار می‌گیرد. همچنین برای تغییر مکان کنترل در راستای محوی Y ها می‌توانیم از خاصیت‌های Bottom و Top استفاده کنیم. علاوه بر تعیین مکان کنترل در راستای محورهای X و Y، ما همچنین می‌توانیم مکان کنترل را در راستای محور Z ها نیز تعیین کنیم. به مثال زیر توجه کنید:

<Canvas>
    <Button Canvas.Left="160" Canvas.Top="100" Height="53" Width="125">Button 1</Button>
    <Button Canvas.Left="69"  Canvas.Top="69"  Height="53" Width="125">Button 2</Button>
    <Button Canvas.Left="17"  Canvas.Top="30"  Height="53" Width="125">Button 3</Button>
</Canvas>

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

در این مثال ما مکان دکمه‌ها را در محور Z ها مشخص نکردیم. همانطور که مشاهده می‌کنید ترتیب قرار گیری دکمه‌ها روی یک دیگر به همان ترتیبی است که آن‌ها را تعریف کردیم. برای مثال از آنجایی که Button1 را قبل از Button2 تعریف کردیم، بنابراین Button2 روی Button1 قرار می‌گیرد. حال می‌خواهیم با استفاده از خاصیت ZIndex نحوه قراری دکمه‌ها روی یکدیگر را تعیین کنیم. به مثال زیر توجه کنید:

<Canvas>
    <Button Panel.ZIndex="2" Canvas.Left="160" Canvas.Top="100" Height="53" Width="125">Button 1</Button>
    <Button Panel.ZIndex="1" Canvas.Left="69"  Canvas.Top="69"  Height="53" Width="125">Button 2</Button>
    <Button Panel.ZIndex="3" Canvas.Left="17"  Canvas.Top="30"  Height="53" Width="125">Button 3</Button>
</Canvas>

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

در این مثال از آنجایی که ZIndex دکمه دوم کمتر از دو دکمه دیگر است، بنابراین زیر آن‌ها قرار می‌گیرد. اگر ZIndex دو کنترل با یکدیگر یکسان باشد ترتیب قرار گیری کنترل‌ها روی یکدیگر به همان ترتیب تعریف کنترل‌هاست. همچنین در صورتی که مقداری را برای ZIndex در نظر نگیریم به صورت پیش فرض مقدار صفر در آن قرار می‌گیرد.