Windows 10-Entwicklung - XAML-Steuerelemente

XAML steht für Extensible Application Markup Language. Es ist ein Benutzeroberflächen-Framework und bietet eine umfangreiche Bibliothek von Steuerelementen, die die UI-Entwicklung für Windows unterstützen. Einige von ihnen haben eine visuelle Darstellung wie eine Schaltfläche, ein Textfeld und ein TextBlock usw.; Während andere Steuerelemente als Container für andere Steuerelemente oder Inhalte wie Bilder usw. verwendet werden, werden alle XAML-Steuerelemente geerbt“System.Windows.Controls.Control”.

XAML Emerging Story

XAML wird in vielen wichtigen Microsoft-Plattformen wie der Windows Presentation Foundation (WPF), dem Silverlight und jetzt in Windows-Apps verwendet. Microsoft Office 2016 ist jetzt auch eine Familie von UWP-Apps. XAML ist eine umfangreiche Plattform, die sehr coole Funktionen und Steuerelemente bietet, die in UWP-Anwendungen verwendet werden können.

Die vollständige Vererbungshierarchie der Steuerelemente ist unten dargestellt.

Layout-Steuerelemente

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 der Layoutfelder sind bestimmte wichtige Punkte zu beachten:

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

Eine Liste von Layout Controls ist unten angegeben -

S.No. Bedienelemente & Beschreibung
1

StackPanel

StackPanelist ein einfaches und nützliches Layoutfenster in XAML. Im Stapelfenster können untergeordnete Elemente je nach Ausrichtungseigenschaft entweder horizontal oder vertikal in einer einzelnen Linie angeordnet werden.

2

WrapPanel

Im WrapPanelUntergeordnete Elemente werden basierend auf der Ausrichtungseigenschaft in aufeinanderfolgender Reihenfolge von links nach rechts oder von oben nach unten positioniert. Der einzige Unterschied zwischen StackPanel und WrapPanel besteht darin, dass nicht alle untergeordneten Elemente in einer einzigen Zeile gestapelt werden, sondern die verbleibenden Elemente in eine andere Zeile eingeschlossen werden, wenn kein Leerzeichen mehr vorhanden ist.

3

DockPanel

DockPanelDefiniert einen Bereich, in dem untergeordnete Elemente horizontal oder vertikal relativ zueinander angeordnet werden. Mit DockPanel können Sie untergeordnete Elemente mit der Dock-Eigenschaft ganz einfach oben, unten, rechts, links und mittig andocken.

Mit LastChildFill Eigenschaft, das letzte untergeordnete Element füllt den verbleibenden Platz unabhängig von einem anderen Dock-Wert, wenn es für dieses Element festgelegt wird.

4

Canvas

Canvasist das grundlegende Layoutfenster, in dem untergeordnete Elemente explizit mithilfe von Koordinaten positioniert werden können, die relativ zu einer beliebigen Seite sind, z. B. links, rechts, oben und unten. Normalerweise wird Canvas für 2D-Grafikelemente (wie Ellipse, Rechteck usw.) verwendet, nicht jedoch für UI-Elemente, da die Angabe absoluter Koordinaten Probleme beim Ändern der Größe, Lokalisierung oder Skalierung in einer XAML-Anwendung verursacht.

5

Grid

Gridbietet einen flexiblen Bereich, der aus Zeilen und Spalten besteht. In Grid können untergeordnete Elemente in Tabellenform angeordnet werden. Elemente können mithilfe von zu einer bestimmten Zeile und Spalte hinzugefügt werdenGrid.Row und Grid.Column Eigenschaften.

6

SplitView

SplitViewstellt einen Container mit zwei Ansichten dar; Eine Ansicht für den Hauptinhalt und eine andere Ansicht, die normalerweise für Navigationsbefehle verwendet wird.

7

RelativePanel

RelativePanel Definiert einen Bereich, in dem Sie untergeordnete Objekte in Bezug zueinander oder zum übergeordneten Bedienfeld positionieren und ausrichten können.

8

ViewBox

ViewBox Definiert einen Inhaltsdekorateur, der ein einzelnes Kind strecken und skalieren kann, um den verfügbaren Platz zu füllen.

9

FlipView

FlipView stellt das Steuerelement eines Elements dar, das jeweils ein Element anzeigt, und aktiviert das "Flip" -Verhalten zum Durchlaufen seiner Sammlung von Elementen.

10

GridView

GridView ist ein Steuerelement, das eine Sammlung von Elementen in Zeilen und Spalten darstellt und horizontal gescrollt werden kann.

UI-Steuerelemente

Hier ist eine Liste der UI-Steuerelemente, die für die Endbenutzer sichtbar sind.

S.No. UI-Steuerelemente und Beschreibung
1

Button

Ein Steuerelement, das auf Benutzereingaben reagiert

2

Calendar

Stellt ein Steuerelement dar, mit dem ein Benutzer ein Datum mithilfe einer visuellen Kalenderanzeige auswählen kann.

3

CheckBox

Ein Steuerelement, das ein Benutzer auswählen oder löschen kann.

4

ComboBox

Eine Dropdown-Liste mit Elementen, aus der ein Benutzer auswählen kann.

5

ContextMenu

Ruft das Kontextmenüelement ab oder legt dieses fest, das angezeigt werden soll, wenn das Kontextmenü über die Benutzeroberfläche innerhalb dieses Elements angefordert wird.

6

DataGrid

Stellt ein Steuerelement dar, das Daten in einem anpassbaren Raster anzeigt.

7

DatePicker

Ein Steuerelement, mit dem ein Benutzer ein Datum auswählen kann.

8

Dialogs

Eine Anwendung kann auch zusätzliche Fenster anzeigen, in denen der Benutzer wichtige Informationen sammeln oder anzeigen kann.

9

Flyout

Stellt ein Steuerelement dar, das eine einfache Benutzeroberfläche anzeigt, die entweder Informationen enthält oder Benutzerinteraktion erfordert. Im Gegensatz zu einem Dialogfeld kann ein Flyout durch Klicken oder Tippen außerhalb des Dialogfelds, Drücken der Zurück-Taste des Geräts oder Drücken der Esc-Taste leicht geschlossen werden.

10

Image

Ein Steuerelement, das ein Bild darstellt.

11

ListBox

Ein Steuerelement, das eine Inline-Liste von Elementen anzeigt, aus denen der Benutzer auswählen kann.

12

Menus

Stellt ein Windows-Menüsteuerelement dar, mit dem Sie die mit Befehlen und Ereignishandlern verknüpften Elemente hierarchisch organisieren können.

13

MenuFlyout

Stellt ein Flyout dar, das ein Befehlsmenü anzeigt.

14

PasswordBox

Ein Steuerelement zur Eingabe von Passwörtern.

15

Popup

Zeigt Inhalte über den vorhandenen Inhalten innerhalb der Grenzen des Anwendungsfensters an.

16

ProgressBar

Ein Steuerelement, das den Fortschritt durch Anzeigen eines Balkens anzeigt.

17

ProgressRing

Ein Steuerelement, das den unbestimmten Fortschritt durch Anzeigen eines Rings anzeigt.

18

RadioButton

Ein Steuerelement, mit dem ein Benutzer eine einzelne Option aus einer Gruppe von Optionen auswählen kann.

19

RichEditBox

Ein Steuerelement, mit dem ein Benutzer Rich-Text-Dokumente mit Inhalten wie formatiertem Text, Hyperlinks und Bildern bearbeiten kann.

20

ScrollViewer

Ein Containersteuerelement, mit dem der Benutzer seinen Inhalt schwenken und zoomen kann.

21

SearchBox

Ein Steuerelement, mit dem ein Benutzer Suchanfragen eingeben kann.

22

Slider

Ein Steuerelement, mit dem der Benutzer aus einem Wertebereich auswählen kann, indem er ein Thumb-Steuerelement entlang einer Spur bewegt.

23

TextBlock

Ein Steuerelement, das den Text anzeigt.

24

TimePicker

Ein Steuerelement, mit dem ein Benutzer einen Zeitwert festlegen kann.

25

ToggleButton

Eine Schaltfläche, die zwischen zwei Zuständen umgeschaltet werden kann.

26

ToolTip

Ein Popup-Fenster, in dem Informationen zu einem Element angezeigt werden.

27

Window

Das Stammfenster mit Minimierungs- / Maximierungsoption, Titelleiste, Rahmen und Schaltfläche zum Schließen.

Im Folgenden finden Sie ein Beispiel, das verschiedene Arten von Steuerelementen in a enthält SplitView. In der XAML-Datei werden verschiedene Steuerelemente mit einigen Eigenschaften und Ereignissen erstellt.

<Page 
   x:Class = "UWPControlsDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPControlsDemo" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Margin = "20"> 
		
         <StackPanel Orientation = "Horizontal"> 
			
            <ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
               Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked" 
               HorizontalAlignment = "Center"/> 
					
            <AppBarButton Icon = "Like" />
            <AppBarButton Icon = "Dislike" /> 
            <AppBarSeparator/> 
            <AppBarButton Icon = "Accept" /> 
            <AppBarButton Icon = "Add" /> 
				
         </StackPanel> 
			
         <SplitView x:Name = "splitView" DisplayMode = "Inline" 
            OpenPaneLength = "296"> 
				
            <SplitView.Pane> 
               <StackPanel> 
                  <TextBlock Text = "SplitView Pane" FontSize = "36" 
                     VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                     Margin = "10"/> 
							
                  <Button Content = "Options" Margin = "10"> 
						
                     <Button.Flyout> 
                        <MenuFlyout> 
                           <MenuFlyoutItem Text = "Reset"/> 
                           <MenuFlyoutSeparator/> 
                           <MenuFlyoutItem Text = "Repeat"/> 
                           <MenuFlyoutItem Text = "Shuffle"/> 
                        </MenuFlyout> 
                     </Button.Flyout> 
							
                  </Button> 
						
               </StackPanel> 
            </SplitView.Pane> 
					
            <StackPanel>
				
               <TextBlock Text = "SplitView Content" FontSize = "36" 
                  VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                  Margin = "10"/>
						
               <Border BorderThickness = "3" BorderBrush = "Red" Margin = "5"> 
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBlock Text = "Hyperlink example" Margin = "5"/> 
                     <HyperlinkButton Content = "www.microsoft.com" 
                        NavigateUri = "http://www.microsoft.com"/> 
                  </StackPanel> 
               </Border> 
					
               <RelativePanel BorderBrush = "Red" BorderThickness = "2"  
                  CornerRadius = "10" Padding = "12" Margin = "5"> 
						
                  <TextBlock x:Name = "txt" Text = "Relative Panel example" 
                     RelativePanel.AlignLeftWithPanel = "True" 
                     Margin = "5,0,0,0"/> 
							
                  <TextBox x:Name = "textBox1" RelativePanel.RightOf = "btn" 
                     Margin = "5,0,0,0"/> 
							
                  <Button x:Name = "btn" Content = "Name"  
                     RelativePanel.RightOf = "txt" Margin = "5,0,0,0"/> 
							
               </RelativePanel> 
					
               <FlipView Height = "400" Margin = "10" Width = "400"> 
                  <Image Source = "Images/DSC_0104.JPG"/> 
                  <Image Source = "Images/DSC_0080.JPG"/> 
                  <Image Source = "Images/DSC_0076.JPG"/> 
                  <Image Source = "Images/thGTF7BWGW.jpg"/> 
               </FlipView>
					
            </StackPanel> 
				
         </SplitView> 
			
      </StackPanel> 
		
   </Grid> 
	
</Page>

Unten ist die angegeben Events Implementierung in C #.

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
namespace UWPControlsDemo {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
    
      public MainPage() {
         this.InitializeComponent(); 
      } 
		
      private void HandleCheck(object sender, RoutedEventArgs e) { 
         splitView.IsPaneOpen = true; 
      }
		
      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         splitView.IsPaneOpen = false; 
      }
		
   }
	
}

Wenn der obige Code kompiliert und ausgeführt wird, wird das folgende Fenster angezeigt:

Wenn Sie oben links auf den Hamburger-Button klicken, wird der geöffnet / geschlossen SplitView Feld.

In dem SplitView Fenster, Sie können das sehen Flyout, MenuFlyout und FlipView Kontrollen.

In dem SplitView Inhalt können Sie den Hyperlink, das relative Bedienfeld, die ViewBox und andere Schaltflächen und Textfeldsteuerelemente sehen.