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.
