TOC

This article is currently in the process of being translated into Persian (~99% done).

Panels:

The Canvas control

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

اگر شما تا حالا از کتابخانه رابط کاربری دیگری همچون WinForms استفاده کرده باشید، احتمالاً باعث می شود که احساس خوبی داشته باشید، اما در حالی که داشتن کنترل مطلق روی کنترل های فرزند می تواند وسوسه انگیز باشد، این همچنین بدین معناست که تا زمانی که کاربر شروع به تغییر اندازه پنجره کند پنل هیچ کاری برای شما انجام نمی دهد، اگر بومی سازی کنید متن کاملاً موقعیت‌یافته یا اگر محتوا مقیاس‌بندی شده باشد.

در ادامه بیشتر در مورد آن صحبت میکنیم، اجازه دهید به یک مثال ساده بپردازیم. این یکی بیشتر در مورد این است که به شما نشان دهد بوم به طور پیش فرض چقدر کار کمی انجام می دهد:

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<Canvas>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Canvas>
</Window>

همانطور که میبینید، هرچند ما فقط دو دکمه داریم، هر دو آنها دقیقا در یک جا قرار گرفته اند، بطوری که فقط آخرین آنها قابل دیدن است. بوم دقیقا کار خاصی انجام نمی دهد تا زمانی که شما شروع به دادن مختصات به کنترل های فرزند کنید. این کار با استفاده از مشخصات اتصال به چپ، راست، بالا و پایین از بوم انجام می پذیرد.

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

<Window x:Class="WpfTutorialSamples.Panels.Canvas"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Canvas" Height="200" Width="200">
	<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>
</Window>

دقت کنید که چگونه من فقط ویژگی یا ویژگی هایی را که نیاز دارم تنظیم می کنم. برای دو دکمه اول، من فقط می‌خواهم یک مقدار برای محور X مشخص کنم، بنابراین از ویژگی‌های Left و Right برای هل دادن دکمه‌ها به سمت مرکز، از هر سو استفاده می‌کنم.

برای دکمه پایینی، من از هر دو چپ/راست و پایین برای هل دادن آنها به سمت مرکز در هر دو جهت استفاده می کنم. شما به طور معمول یا یک مقدار بالا یا پایین و/یا یک مقدار چپ یا راست را مشخص می کنید.

همانطور که شرح داده شد، از آنجا که بوم کنترل کاملی بر روی موقعیت ها به شما می دهد، واقعا اهمیت چندانی به کمبود فضا برای همه کنترل ها یا اینکه یکی روی دیگری قرار بگیرد نمی دهد. این باعث می شود تقریباً برای هر نوع طراحی دیالوگ گزینه بدی باشد، اما Canvas همانطور که از نامش پیداست، حداقل برای یک چیز عالی است: نقاشی . WPF یک دسته کنترل دارد که می توانید آنها را در داخل یک بوم قرار دهید تا تصاویر زیبایی ایجاد کنید.

محور-Z

در مثال بعدی، ما از چند کنترل مربوط به شکل WPF برای نشان دادن مفهوم بسیار مهم دیگری در هنگام استفاده از Canvas استفاده خواهیم کرد: Z-Index. به طور معمول، اگر دو کنترل در یک Canvas با هم همپوشانی داشته باشند، آن که آخرین مورد در نشانه گذاری تعریف شده است، اولویت پیدا خواهد کرد و روی دیگر(ان) را می پوشاند. با این حال، با استفاده از ویژگی ZIndex گنجانده شده در کلاس Panel، این به راحتی قابل تغییر است.

در ابتدا، یک مثال جایی که ما به هیچ وجه از Z-Index استفاده نمی کنیم.

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

توجه داشته باشید که چون هر یک از مستطیل ها بعد از دایره تعریف شده اند، همه آنها روی دایره را می پوشانند و هر کدام از آنها شکل تعریف شده قبلی را می پوشاند. بیایید سعی کنیم آن را تغییر دهیم:

<Window x:Class="WpfTutorialSamples.Panels.CanvasZIndex"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CanvasZIndex" Height="275" Width="260">
    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>
</Window>

به طور پیش فرض مقدار ZIndex صفر می باشد، اما ما مقدار جدیدی به هر یک از شکل ها می دهیم. قانون این است که المانی با ZIndex بالاتر آنهایی را که مقدار کمتری دارند بپوشاند. اگر دو مقدار دقیقا یکی باشند، المان آخر تعریف شده می برد. همانطور که در عکس صفحه می بینید، تغییر ویژگی ZIndex کاملا شمایل دیگری می دهد.


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!
Table of Contents