کنترل Canvas : ( نمونه برنامه را از پایان همین پست دانلود کنید)
این کنترل نیز یکی دیگر از کنترل های کانتینری می باشد که عناصر مختلف می توانند بر روی آن قرار بگیرند. از این کنترل به ندرت در برنامه ها استفاده می شود. به این دلیل که این کنترل، عناصر داخلی خود را بر مبنای مکان آن عنصر که به صورت صریح در خواص آن عنصر ذکر گردیده است، تراز بندی می کند. به همین دلیل در مواقعی که امکان تغییر سایز پنجرها و مقادیر عناصر در زمان اجرای برنامه باشد، استفاده از این کنترل، انتخاب مناسبی نمی تواند باشد.
قبلا اشاره شد که کنترل هایی که درون کنترل های کانتینر قرار می گیرند، بسته به نوع کنترل کانتینر، خواص جدیدی به مجوع خواص آن ها اضافه می شود. کنترل Canvas نیز از این امر مستثنا نیست.
چهارخاصیت Left ،Top ، Bottom و Right ، به کنترل های فرزندی که درون کنترل Canvas قرار بگیرند، اضافه خواهد شد که توسط این خواص، محل کنترل فرزند بر روی کنترل Canvas تعیین می شود.
به نمونه کد زیر دقت کنید :
<Window x:Class="StackPanel.CanvasContainer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CanvasContainer" Height="300" Width="300">
<Canvas>
<TextBox Canvas.Left="10" Canvas.Top="10" Name="txtNum1">HCanvas.Left="10" Canvas.Top="10"</TextBox>
<TextBox Canvas.Right="30" Canvas.Top="50" Name="txtNum2">Canvas.Right="30" Canvas.Top="50"</TextBox>
<Button Canvas.Left="40" Canvas.Top="90" Name="btnSum" Click="btnSum_Click">Canvas.Left="40" Canvas.Top="90"</Button>
<TextBox Canvas.Right="30" Canvas.Bottom="20" Name="txtResult" >Canvas.Right="30" Canvas.Bottom="20"</TextBox>
</Canvas>
</Window>
همانطور که می بینید، مکان هر کنترلی درون کنترل Canvas با خواص پیوست شده ی Left، Top، Right و Bottom مشخص شده است.
شکل نهایی حاصل از اجرای این کد به صورت زیر خواهد بود:
نکته:
دقت داشته باشید، که در این حالت، چون سایز کنترل ها پیش فرض بر روی Stretch نیست ( بر خلاف زمانی که منترل ها بر روی StackPanel قرار داشتند)، با تغییر محتوای TextBox ها، سایز آن ها نیز تغییر پیدا می کند.
به عنوام مثال اگر کاربر در دو TextBox بالایی مقادیر 10 و 20000 را وارد کند، TextBox ها تغییر اندازه داده و به شکل زیر در خواهند آمد :
همچنین اگر مقادیر TextBox ها بیش از عرض فعلی آن ها باشد، عرض TextBox ها زیاد شده تا بتواند تمامی مقادیر را در خود جای دهد.
برای پیشگیری از تغییر سایز textbox ها، می توانید از خواص MaxWidth و MinWidth این عناصر استفاده کنید.
برای ثابت نگه داشتن طول textbox می توانید خواص MaxWidth و MinWidth را با مقادیر یکسان، مقدار دهی کنید.
در کد زیر، که با تغیر در کد قبلی به وجود امده است، TextBox بالایی، در اندازه 120 ثابت شده است. این به این معنی است که با تغییر محتویات داخل TextBox طول TextBox ثابت می ماند.
کد:
<Window x:Class="StackPanel.CanvasContainer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CanvasContainer" Height="300" Width="300">
<Canvas>
<TextBox Canvas.Left="10" Canvas.Top="10" Name="txtNum1" MaxWidth="120" MinWidth="120">HCanvas.Left="10" Canvas.Top="10"</TextBox>
<TextBox Canvas.Right="30" Canvas.Top="50" Name="txtNum2">Canvas.Right="30" Canvas.Top="50"</TextBox>
<Button Canvas.Left="40" Canvas.Top="90" Name="btnSum" Click="btnSum_Click">Canvas.Left="40" Canvas.Top="90"</Button>
<TextBox Canvas.Right="30" Canvas.Bottom="20" Name="txtResult" >Canvas.Right="30" Canvas.Bottom="20"</TextBox>
</Canvas>
</Window>
نتیجه اجرای حاصل از کد فوق به صورت زیر خواهد بود:
همانطور که در شکل فوق مشاهده می کنید، تکست باکس بالایی با تغییر مقدار آن به 10 ، تغییری در شول آن صورت نگرفته است.
خاصیت ZIndex :
توسط این خاصیت می توانید نحوه چیدمان عناصری را که بر روی هم قرار گرفته اند را مشخص کنید. هر کنترلی که مقدار ZIndex آن بزگتر باشد، بر روی کنترل هایی که مقدار ZIndex آن ها کوچکتر است قرار خواهد گرفت.
به نمونه کد زیر دقت کنید :
<Window x:Class="StackPanel.ZIndexProp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ZIndexProp" Height="300" Width="300">
<Canvas>
<Button Background="Green" Canvas.Left="60" Canvas.Top="24" MinHeight="50" Canvas.ZIndex="0" >My ZIndex Value IS 0</Button>
<Button Background="Red" Canvas.Left="147" Canvas.Top="60" MinHeight="50" Canvas.ZIndex="1">My ZIndex Value IS 1</Button>
<Button Background="Blue" Canvas.Left="129" Canvas.Top="98" MinHeight="50" Canvas.ZIndex="2" >My ZIndex Value IS 2</Button>
<Button Background="Yellow" Canvas.Left="30" Canvas.Top="60" MinHeight="50" Canvas.ZIndex="3" >My ZIndex Value IS 3</Button>
</Canvas>
</Window>
در این کد که شامل یک کنترل Canvas و چهار کنترل Button بر روی آن می باشد، دکمه ها دارای خاصیت ZIndex می باشند. نتیجه اجرای کد فوق رادر شکل زیر مشاهده می کنید.
همانطور که در شکل فوق نیز مشخص است، دکمه ای که با رنگ زرد مشخص شده است، به دلیل اینکه دارای مقدار ZIndex با لاتری نسبت به دکمه های دیگر دارد، بر روی تمامی دکمه ها قرار گرفته است.
به دلیل مشابهی، دکمه سبز رنگ در زیر تمامی دکمه ها قرار گرفته است.
دکمه آبی رنگ دارای مقدار ZIndex برابر با 2 می باشد. به عمین دلیل، قسمتی از آن بالاتر از دکمه قرمز رنگ قرار گرفته است ( چون دکمه قرمز رنگ مقدار ZIndex کتری نسبت به دکمه آبی رنگ دارد) و قسمتی از آن زیر دکمه زرد رنگ قرار گرفته است.( به این دلیل که دکمه زرد رنگ دارای خاصیت ZIndex بالاتری نسبت به دکمه آبی رنگ دارد)
