XAML-Steuerelemente

  • Artikel

Ansichten sind Benutzeroberflächenobjekte wie Beschriftungen, Schaltflächen und Schieberegler, die in anderen grafischen Programmierumgebungen allgemein als Steuerelemente oder Widgets bezeichnet werden. Die von Xamarin.Forms allen unterstützten Ansichten werden von der View Klasse abgeleitet.

Auf alle Ansichten, die in Xamarin.Forms definiert sind, kann aus XAML-Dateien verwiesen werden.

Ansichten für die Präsentation

Ansicht Beispiel

BoxView

Zeigt ein Rechteck einer bestimmten Farbe an.

Screenshot eines BoxView-Steuerelements

API-Leitfaden / 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Ellipse

Zeigt eine Ellipse oder einen Kreis an.

Screenshot einer Ellipse

API-Leitfaden / 
<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Abbildung

Zeigt eine Bitmap an.

Screenshot eines Bilds

API-Leitfaden / 
<Bildquelle="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Label

Zeigt eine oder mehrere Textzeilen an.

Screenshot einer Bezeichnung

API-Leitfaden / 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Kursiv"
       HorizontalTextAlignment="Center" />

Line

Zeigt eine Linie an.

Screenshot einer Zeile

API-Leitfaden / 
<Zeile X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Plan

Zeigt eine Karte an.

Screenshot einer Karte

API-Leitfaden / 
<maps:Map ItemsSource="{Binding Locations}" />

Pfad

Zeigen Sie Kurven und komplexe Formen an.

Screenshot eines Pfads

API-Leitfaden / 
<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Zentriert"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

Zeigt ein Polygon an.

Screenshot eines Polygons

API-Leitfaden / 
<Polygonpunkte="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Polylinie

Zeigt eine Reihe verbundener gerader Linien an.

Screenshot einer Polylinie

API-Leitfaden / 
<Polylinienpunkte="0,0 10.30, 15.0 18.60 23.30 35.30 40.0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Rechteck

Zeigt ein Rechteck oder ein Quadrat an.

Screenshot eines Rechtecks

API-Leitfaden / 
<Rechteck Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Zeigt Webseiten oder HTML-Inhalte an.

Screenshot einer WebView

API-Leitfaden / 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Ansichten, die Befehle initiieren

Ansicht Beispiel

Schaltfläche

Zeigt Text in einem rechteckigen Objekt an.

Screenshot einer Schaltfläche

API-Leitfaden / 
<Button Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Zentriert"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Zeigt ein Bild in einem rechteckigen Objekt an.

Screenshot eines ImageButton-Elements

API-Leitfaden / 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Zentriert"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Ermöglicht die Auswahl einer Option aus einem Satz.

Screenshot eines RadioButton-Steuerelements

Leitfaden		 
<RadioButton Text="Pineapple"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Stellt Pull-to-Refresh-Funktionen für bildlauffähige Inhalte bereit.

Screenshot einer RefreshView

Leitfaden		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- Scrollbares Steuerelement geht hier -->
</RefreshView>

SearchBar

Akzeptiert Benutzereingaben, die zum Ausführen einer Suche verwendet werden.

Screenshot einer Suchleiste

Leitfaden		 
<Suchleiste Platzhalter="Suchbegriff eingeben"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Stellt Kontextmenüelemente bereit, die durch eine Streifbewegung angezeigt werden.

Screenshot einer SwipeView

Leitfaden		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Inhalt-->
</SwipeView>

Ansichten zum Festlegen von Werten

Ansicht Beispiel

CheckBox

Ermöglicht die Auswahl eines boolean Werts.

Screenshot eines CheckBox-Steuerelements

Leitfaden		 
<CheckBox IsChecked="true"
          HorizontalOptions="Zentriert"
          VerticalOptions="CenterAndExpand" />

Schieberegler

Ermöglicht die Auswahl eines double Werts aus einem fortlaufenden Bereich.

Screenshot eines Schiebereglers

API-Leitfaden / 
<Schieberegler Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Stepper

Ermöglicht die Auswahl eines double Werts aus einem inkrementellen Bereich.Screenshot eines Steppers

API-Leitfaden / 
<Stepper Minimum="0"
         Maximum="10"
         Increment="0.1"
         HorizontalOptions="Zentriert"
         VerticalOptions="CenterAndExpand" />

Schalter

Ermöglicht die Auswahl eines boolean Werts.

Screenshot einer Option

API-Leitfaden / 
<Switch IsToggled="false"
        HorizontalOptions="Zentriert"
        VerticalOptions="CenterAndExpand" />

DatePicker

Ermöglicht die Auswahl eines Datums.

Screenshot eines DatePicker

API-Leitfaden / 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Ermöglicht die Auswahl einer Uhrzeit.

Screenshot eines TimePicker

API-Leitfaden / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Ansichten zum Bearbeiten von Text

Ansicht Beispiel

Eingabe

Ermöglicht die Eingabe und Bearbeitung einer einzelnen Textzeile.

Screenshot eines Eintrags

API-Leitfaden / 		<
<Entry Keyboard="Email"
       Placeholder="E-Mail-Adresse eingeben"
       VerticalOptions="CenterAndExpand" />

Editor

Ermöglicht die Eingabe und Bearbeitung mehrerer Textzeilen.

Screenshot eines Editors

API-Leitfaden / 
<Editor VerticalOptions="FillAndExpand" />

Ansichten zum Anzeigen einer Aktivität

Ansicht Beispiel

ActivityIndicator

Zeigt eine Animation an, um zu zeigen, dass die Anwendung in einer längeren Aktivität tätig ist, ohne einen Hinweis auf den Fortschritt zu geben.

Screenshot eines ActivityIndicator

API-Leitfaden / 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Zeigt eine Animation an, um anzuzeigen, dass die Anwendung durch eine langwierige Aktivität voranschreitet.

Screenshot einer Statusleiste

API-Leitfaden / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Ansichten, die Sammlungen anzeigen

Ansicht Beispiel

CarouselView

Zeigt eine bildlauffähige Liste mit Datenelementen an.

Screenshot einer Karussellansicht

Leitfaden		 
<CarouselView ItemsSource="{Binding Monkeys}">
              ItemTemplate="{StaticResource MonkeyTemplate}" />

CollectionView

Zeigt eine bildlauffähige Liste von auswählbaren Datenelementen mit unterschiedlichen Layoutspezifikationen an.

Screenshot einer CollectionView

Leitfaden		 
<CollectionView ItemsSource="{Binding Monkeys}">
                ItemTemplate="{StaticResource MonkeyTemplate}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Zeigt Indikatoren an, die die Anzahl der Elemente in einem CarouselView.

Screenshot einer IndicatorView

Leitfaden		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

ListView

Zeigt eine bildlauffähige Liste mit auswählbaren Datenelementen an.

Screenshot einer ListView

API-Leitfaden / 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Zeigt ein Auswahlelement aus einer Liste von Textzeichenfolgen an.

Screenshot einer Auswahl

API-Leitfaden / 		<
<Picker Title="Select a monkey"
        TitleColor="Red">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanisch Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

Zeigt eine Liste interaktiver Zeilen an.

Screenshot einer TableView

API-Leitfaden / 
<TableView Intent="Einstellungen">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="Neue Voicemail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>