Silverlight - Sabit Düzenler
Uygulama kullanılabilirliği için kontrollerin düzeni çok önemlidir ve kritiktir. Uygulamanızda bir grup GUI öğesi düzenlemek için kullanılır. Yerleşim panellerini seçerken dikkate alınması gereken bazı önemli şeyler vardır. Onlar -
- Alt öğelerin konumları.
- Alt öğelerin boyutları.
- Üst üste binen alt öğelerin üst üste katmanlanması.
Uygulama farklı ekran çözünürlüklerinde kullanılmışsa, sabit bir piksel düzenlemesi çalışmaz. XAML, GUI öğelerini uygun bir şekilde düzenlemek için zengin bir yerleşik yerleşim paneli seti sağlar.
Bakarak başlayacağız simple fixeddüzenler. Sonra bakacağızDynamicSilverlight'ın desteklemek için tasarladığı düzen senaryoları. Tüm kullanıcı arayüzü öğelerine nüfuz eden yerleşimle ilgili özellikleri ve kavramları göreceğiz.
Sabit Düzen
En basit düzen türü, Canvasöğesi. Canvas panel, alt öğelerin, Tuvalin sol, sağ, üst ve alt gibi herhangi bir tarafına göre olan koordinatlar kullanılarak açıkça konumlandırılabildiği temel mizanpaj panelidir.
Tipik olarak Canvas2D grafik öğeleri (Elips, Dikdörtgen vb.) için kullanılır. Mutlak koordinatların belirtilmesi, XAML uygulamanızı yeniden boyutlandırırken, yerelleştirirken veya ölçeklendirirken sorun çıkardığından, UI öğeleri için kullanılmaz.
Aşağıda verilenler yaygın olarak kullanılanlardır properties nın-nin Canvas sınıf.
Sr. No. | Özellik ve Açıklama |
---|---|
1 | Background Panel içerik alanını dolduran bir Fırça alır veya ayarlar. (Panelden devralındı) |
2 | Children Bu Panelin alt öğelerinin bir UIElementCollection alır. (Panelden devralındı.) |
3 | Height Öğenin önerilen yüksekliğini alır veya ayarlar. (FrameworkElement'ten devralındı.) |
4 | ItemHeight Bir WrapPanel içinde bulunan tüm öğelerin yüksekliğini belirten bir değer alır veya ayarlar. |
5 | ItemWidth Bir WrapPanel içinde bulunan tüm öğelerin genişliğini belirten bir değer alır veya ayarlar. |
6 | LogicalChildren Bu Panel öğesinin mantıksal alt öğelerini yineleyebilen bir numaralandırıcı alır. (Panelden devralındı.) |
7 | LogicalOrientation Panel mizanpajı yalnızca tek bir boyutta destekliyorsa, panelin yönü. (Panelden devralındı.) |
8 | LeftProperty Canvas.Left XAML ekli özelliğini tanımlar. |
9 | Margin Bir elemanın dış kenar boşluğunu alır veya ayarlar. (FrameworkElement'ten devralındı.) |
10 | Name Öğenin tanımlayıcı adını alır veya ayarlar. Ad, olay işleyici kodu gibi arka plan kodunun, bir XAML işlemcisi tarafından işleme sırasında oluşturulduktan sonra bir işaretleme öğesine başvurabilmesi için bir başvuru sağlar. (FrameworkElement'ten devralındı.) |
11 | Orientation Alt içeriğin düzenlendiği boyutu belirten bir değer alır veya ayarlar. |
12 | Parent Bu öğenin mantıksal üst öğesini alır. (FrameworkElement'ten devralındı.) |
13 | Resources Yerel olarak tanımlanmış kaynak sözlüğünü alır veya ayarlar. (FrameworkElement'ten devralındı.) |
14 | Style Oluşturulduğunda bu öğe tarafından kullanılan stili alır veya ayarlar. (FrameworkElement'ten devralındı.) |
15 | TopProperty Canvas.Top XAML ekli özelliğini tanımlar. |
16 | Width Öğenin genişliğini alır veya ayarlar. (FrameworkElement'ten devralındı.) |
17 | ZIndexProperty Canvas.ZIndex XAML ekli özelliğini tanımlar. |
Aşağıda verilenler yaygın olarak kullanılanlardır methods nın-nin Canvas.
Sr. No. | Yöntem ve Açıklama |
---|---|
1 | GetLeft Hedef öğe için Canvas.Left XAML ekli özelliğinin değerini alır. |
2 | GetTop Hedef öğe için Canvas.Top XAML ekli özelliğinin değerini alır. |
3 | GetZIndex Hedef öğe için Canvas.ZIndex XAML ekli özelliğinin değerini alır. |
4 | SetLeft Hedef öğe için Canvas.Left XAML ekli özelliğinin değerini ayarlar. |
5 | SetTop Bir hedef öğe için Canvas.Top XAML ekli özelliğinin değerini ayarlar. |
6 | SetZIndex Bir hedef öğe için Canvas.ZIndex XAML ekli özelliğinin değerini ayarlar. |
Aşağıdaki örnek, alt öğelerin bir Canvas. Aşağıda, farklı uzaklık özelliklerine sahip bir Canvas içinde bir Elipsin oluşturulduğu XAML uygulaması yer almaktadır.
<UserControl x:Class = "FirstExample.MainPage"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable = "d"
d:DesignHeight = "300" d:DesignWidth = "400">
<Grid x:Name = "LayoutRoot" Background = "White">
<Canvas Width = "380" Height = "280" >
<Ellipse Canvas.Left = "30" Canvas.Top = "30"
Fill = "Gray" Width = "200" Height = "120" />
</Canvas>
</Grid>
</UserControl>
Yukarıdaki kod derlendiğinde ve çalıştırıldığında, aşağıdaki çıktıyı göreceksiniz.