XAML-SteuerelementeXAML Controls

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Sichten sind Benutzeroberflächen Objekte, wie z. b. Bezeichnungen, Schaltflächen und Schieberegler, die in anderen grafischen Programmierumgebungen häufig als Steuer Elemente oder Widgets bezeichnet werden.Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments. Die von xamarin. Forms unterstützten Ansichten werden von der View -Klasse abgeleitet.The views supported by Xamarin.Forms all derive from the View class.

Auf alle Sichten, die in xamarin. Forms definiert sind, kann in XAML-Dateien verwiesen werden.All of the views that are defined in Xamarin.Forms can be referenced from XAML files.

Ansichten für die PräsentationViews for presentation

BoxViewBoxView

Zeigt ein Rechteck einer bestimmten Farbe an.Displays a rectangle of a particular color.

Screenshot einer boxviewScreenshot of a BoxView

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

ImageImage

Zeigt eine Bitmap an.Displays a bitmap.

Screenshot eines BildsScreenshot of an Image

API - / HandbuchAPI / Guide
<Image Source="https://aka.ms/campus.jpg"
Aspect="AspectFit"
HorizontalOptions="Center" />

BezeichnungLabel

Zeigt eine oder mehrere Textzeilen an.Displays one or more lines of text.

Screenshot einer BezeichnungScreenshot of a Label

API - / HandbuchAPI / Guide

<Label Text="Hello, Xamarin.Forms!"
FontSize="Large"
FontAttributes="Italic"
HorizontalTextAlignment="Center" />

KarteMap

Zeigt eine Karte an.Displays a map.

Screenshot einer KarteScreenshot of a Map

API - / HandbuchAPI / Guide

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

MediaElementMediaElement

Abspielen von Videos oder Audiodaten.Play video or audio.

Screenshot eines Media Element-ElementsScreenshot of a MediaElement

API - / HandbuchAPI / Guide

<MediaElement Source="https://sec.ch9.ms/ch9/XamarinShow_mid.mp4"
AutoPlay="True"
ShowsPlaybackControls="True" />

WebViewWebView

Zeigt Webseiten oder HTML-Inhalte an.Displays Web pages or HTML content.

Screenshot einer WebViewScreenshot of a WebView

API - / HandbuchAPI / Guide

<WebView Source="https://docs.microsoft.com/xamarin/"
VerticalOptions="FillAndExpand" />

Ansichten, die Befehle initiierenViews that initiate commands

TasteButton

Zeigt Text in einem rechteckigen Objekt an.Displays text in a rectangular object.

Screenshot einer SchaltflächeScreenshot of a Button

API - / HandbuchAPI / Guide

<Button Text="Click Me!"
Font="Large"
BorderWidth="1"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="OnButtonClicked" />

ImageButtonImageButton

Zeigt ein Bild in einem rechteckigen Objekt an.Displays an image in a rectangular object.

Screenshot von ImageButtonScreenshot of an ImageButton

API - / HandbuchAPI / Guide

<ImageButton Source="XamarinLogo.png"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="OnImageButtonClicked" />

RefreshViewRefreshView

Stellt Pull-to-Refresh-Funktionen für scrollbaren Inhalt bereit.Provides pull-to-refresh functionality for scrollable content.

Screenshot einer aktuerfrischenden AnsichtScreenshot of a RefreshView

LenkenGuide

<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}" >
<!-- Scrollable control goes here -->
</RefreshView>

SearchBarSearchBar

Akzeptiert Benutzereingaben, die zum Durchführen einer Suche verwendet werden.Accepts user input that it uses to perform a search.

Screenshot einer SuchleisteScreenshot of a SearchBar

LenkenGuide

<SearchBar Placeholder="Enter search term"
SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeViewSwipeView

Stellt Kontextmenü Elemente bereit, die durch eine Schwenkbewegung angezeigt werden.Provides context menu items that are revealed by a swipe gesture.

Screenshot einer swidanviewScreenshot of a SwipeView

LenkenGuide

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

Ansichten zum Festlegen von WertenViews for setting values

CheckBoxCheckBox

Ermöglicht die Auswahl eines boolean Werts.Allows the selection of a boolean value.

Screenshot eines KontrollkästchensScreenshot of a CheckBox

LenkenGuide

<CheckBox IsChecked="true"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

SchiebereglerSlider

Ermöglicht die Auswahl eines double Werts aus einem kontinuierlichen Bereich.Allows the selection of a double value from a continuous range.

Screenshot eines SchiebereglersScreenshot of a Slider

API - / HandbuchAPI / Guide

<Slider Minimum="0"
Maximum="100"
VerticalOptions="CenterAndExpand" />

StepperStepper

Ermöglicht die Auswahl eines double Werts aus einem inkrementellen Bereich.Allows the selection of a double value from an incremental range.

Screenshot eines StepperScreenshot of a Stepper

API - / HandbuchAPI / Guide

<Stepper Minimum="0"
Maximum="10"
Increment="0.1"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

SchalterSwitch

Ermöglicht die Auswahl eines boolean Werts.Allows the selection of a boolean value.

Screenshot eines SchaltersScreenshot of a Switch

API - / HandbuchAPI / Guide

<Switch IsToggled="false"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

DatePickerDatePicker

Ermöglicht die Auswahl eines Datums.Allows the selection of a date.

Screenshot eines DatePickerScreenshot of a DatePicker

API - / HandbuchAPI / Guide

<DatePicker Format="D"
VerticalOptions="CenterAndExpand" />

TimePickerTimePicker

Ermöglicht die Auswahl einer Uhrzeit.Allows the selection of a time.

Screenshot einer timePickerScreenshot of a TimePicker

API - / HandbuchAPI / Guide

<TimePicker Format="T"
VerticalOptions="CenterAndExpand" />

Ansichten zum Bearbeiten von TextViews for editing text

EintragEntry

Ermöglicht das eingeben und Bearbeiten einer einzelnen Textzeile.Allows a single line of text to be entered and edited.

Screenshot eines EintragsScreenshot of an Entry

API - / HandbuchAPI / Guide

<Entry Keyboard="Email"
Placeholder="Enter email address"
VerticalOptions="CenterAndExpand" />

EditorEditor

Ermöglicht das eingeben und Bearbeiten mehrerer Textzeilen.Allows multiple lines of text to be entered and edited.

Screenshot eines EditorsScreenshot of an Editor

API - / HandbuchAPI / Guide

<Editor VerticalOptions="FillAndExpand" />

Ansichten zum Anzeigen einer AktivitätViews to indicate activity

ActivityIndicatorActivityIndicator

Zeigt eine Animation an, die anzeigt, dass die Anwendung mit einer langwierigen Aktivität beschäftigt ist, ohne dass der Fortschritt angegeben wird.Displays an animation to show that the application is engaged in a lengthy activity, without giving any indication of progress.

Screenshot eines activityindicatorScreenshot of an ActivityIndicator

API - / HandbuchAPI / Guide

<ActivityIndicator IsRunning="True"
VerticalOptions="CenterAndExpand" />

StatusanzeigeProgressBar

Zeigt eine Animation an, die anzeigt, dass die Anwendung durch eine lange Aktivität verläuft.Displays an animation to show that the application is progressing through a lengthy activity.

Screenshot einer ProgressBarScreenshot of a ProgressBar

API - / HandbuchAPI / Guide

<ProgressBar Progress=".5"
VerticalOptions="CenterAndExpand" />

Ansichten, die Sammlungen anzeigenViews that display collections

CarouselViewCarouselView

Zeigt eine scrollbare Liste von Datenelementen an.Displays a scrollable list of data items.

Screenshot einer "carouselview"Screenshot of a CarouselView

LenkenGuide

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

CollectionViewCollectionView

Zeigt eine Bild lauffähigen Liste auswählbarer Datenelemente mit unterschiedlichen layoutspezifikationen an.Displays a scrollable list of selectable data items, using different layout specifications.

Screenshot einer CollectionViewScreenshot of a CollectionView

LenkenGuide

<CollectionView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}"
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
</CollectionView/>

IndicatorViewIndicatorView

Zeigt Indikatoren an, die die Anzahl der Elemente in einer CarouselViewdarstellen.Displays indicators that represent the number of items in a CarouselView.

Screenshot einer "indikatorview"Screenshot of an IndicatorView

LenkenGuide

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

ListViewListView

Zeigt eine Liste auswählbarer Datenelemente an.Displays a scrollable list of selectable data items.

Screenshot einer ListViewScreenshot of a ListView

API - / HandbuchAPI / Guide

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

AuswahlPicker

Zeigt ein SELECT-Element aus einer Liste von Text Zeichenfolgen an.Displays a select item from a list of text strings.

Screenshot einer AuswahlScreenshot of a Picker

API - / HandbuchAPI / Guide

<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>Japanese Macaque</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>

TableViewTableView

Zeigt eine Liste interaktiver Zeilen an.Displays a list of interactive rows.

Screenshot einer TableViewScreenshot of a TableView

API - / HandbuchAPI / Guide

<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Ring">
<SwitchCell Text="New Voice Mail" />
<SwitchCell Text="New Mail" On="true" />
</TableSection>
</TableRoot>
</TableView>