Silverlight - Feste Layouts

Das Layout der Steuerelemente ist sehr wichtig und entscheidend für die Benutzerfreundlichkeit der Anwendung. Es wird verwendet, um eine Gruppe von GUI-Elementen in Ihrer Anwendung anzuordnen. Bei der Auswahl von Layout-Bedienfeldern sind bestimmte wichtige Punkte zu beachten. Sie sind -

  • Positionen der untergeordneten Elemente.
  • Größen der untergeordneten Elemente.
  • Überlappende übergeordnete Elemente übereinander legen.

Eine feste Pixelanordnung von Steuerelementen funktioniert nicht, wenn die Anwendung mit unterschiedlichen Bildschirmauflösungen verwendet wurde. XAML bietet eine Vielzahl integrierter Layout-Panels, um die GUI-Elemente in geeigneter Weise anzuordnen.

Wir beginnen mit einem Blick auf simple fixedLayouts. Dann schauen wir uns das anDynamicLayout-Szenarien, die Silverlight unterstützt. Wir werden die layoutbezogenen Eigenschaften und Konzepte sehen, die alle Elemente der Benutzeroberfläche durchdringen.

Festes Layout

Die einfachste Art von Layout bietet die CanvasElement. DasCanvas Panel ist das grundlegende Layout-Panel, in dem die untergeordneten Elemente explizit mithilfe der Koordinaten positioniert werden können, die sich auf eine beliebige Seite des Canvas beziehen, z. B. links, rechts, oben und unten.

Typischerweise ist die Canvaswird für 2D-Grafikelemente (wie Ellipse, Rechteck usw.) verwendet. Es wird nicht für UI-Elemente verwendet, da die Angabe absoluter Koordinaten Probleme beim Ändern der Größe, Lokalisierung oder Skalierung Ihrer XAML-Anwendung verursacht.

Nachstehend sind die häufig verwendeten aufgeführt properties von Canvas Klasse.

Sr. Nr. Objektbeschreibung
1

Background

Ruft einen Pinsel ab oder legt ihn fest, der den Inhaltsbereich des Bedienfelds ausfüllt. (Vom Panel geerbt)

2

Children

Ruft eine UIElementCollection von untergeordneten Elementen dieses Panels ab. (Vom Panel geerbt.)

3

Height

Ruft die vorgeschlagene Höhe des Elements ab oder legt diese fest. (Von FrameworkElement geerbt.)

4

ItemHeight

Ruft einen Wert ab oder legt einen Wert fest, der die Höhe aller in einem WrapPanel enthaltenen Elemente angibt.

5

ItemWidth

Ruft einen Wert ab oder legt einen Wert fest, der die Breite aller in einem WrapPanel enthaltenen Elemente angibt.

6

LogicalChildren

Ruft einen Enumerator ab, der die logischen untergeordneten Elemente dieses Panel-Elements iterieren kann. (Vom Panel geerbt.)

7

LogicalOrientation

Die Ausrichtung des Bedienfelds, wenn das Bedienfeld das Layout nur in einer einzigen Dimension unterstützt. (Vom Panel geerbt.)

8

LeftProperty

Identifiziert die angehängte Eigenschaft Canvas.Left XAML.

9

Margin

Ruft den äußeren Rand eines Elements ab oder legt diesen fest. (Von FrameworkElement geerbt.)

10

Name

Ruft den identifizierenden Namen des Elements ab oder legt diesen fest. Der Name stellt eine Referenz bereit, damit Code-Behind, z. B. Ereignishandlercode, auf ein Markup-Element verweisen kann, nachdem es während der Verarbeitung durch einen XAML-Prozessor erstellt wurde. (Von FrameworkElement geerbt.)

11

Orientation

Ruft einen Wert ab oder legt einen Wert fest, der die Dimension angibt, in der untergeordneter Inhalt angeordnet ist.

12

Parent

Ruft das logische übergeordnete Element dieses Elements ab. (Von FrameworkElement geerbt.)

13

Resources

Ruft das lokal definierte Ressourcenwörterbuch ab oder legt dieses fest. (Von FrameworkElement geerbt.)

14

Style

Ruft den von diesem Element beim Rendern verwendeten Stil ab oder legt diesen fest. (Von FrameworkElement geerbt.)

15

TopProperty

Identifiziert die angehängte Canvas.Top XAML-Eigenschaft.

16

Width

Ruft die Breite des Elements ab oder legt diese fest. (Von FrameworkElement geerbt.)

17

ZIndexProperty

Identifiziert die angehängte Canvas.ZIndex XAML-Eigenschaft.

Nachstehend sind die häufig verwendeten aufgeführt methods von Canvas.

Sr. Nr. Methode & Beschreibung
1

GetLeft

Ruft den Wert der angehängten Canvas.Left XAML-Eigenschaft für das Zielelement ab.

2

GetTop

Ruft den Wert der angehängten Canvas.Top XAML-Eigenschaft für das Zielelement ab.

3

GetZIndex

Ruft den Wert der angehängten Canvas.ZIndex XAML-Eigenschaft für das Zielelement ab.

4

SetLeft

Legt den Wert der angehängten Canvas.Left XAML-Eigenschaft für ein Zielelement fest.

5

SetTop

Legt den Wert der angehängten Canvas.Top XAML-Eigenschaft für ein Zielelement fest.

6

SetZIndex

Legt den Wert der angehängten Canvas.ZIndex XAML-Eigenschaft für ein Zielelement fest.

Das folgende Beispiel zeigt, wie untergeordnete Elemente zu einem hinzugefügt werden Canvas. Unten finden Sie die XAML-Implementierung, in der eine Ellipse in einem Canvas mit unterschiedlichen Offset-Eigenschaften erstellt wird.

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

Wenn der obige Code kompiliert und ausgeführt wird, wird die folgende Ausgabe angezeigt.