Windows Dev Center

Language: HTML | XAML

Steuerelemente nach Funktion (XAML)

Das XAML-Benutzeroberflächenframework für Windows bietet eine umfangreiche Bibliothek von Steuerelementen, die die Entwicklung von Benutzeroberflächen unterstützen. Einige dieser Steuerelemente weisen eine visuelle Darstellung auf. Andere fungieren als Container für andere Steuerelemente oder Inhalte (z. B. Bilder und Medien). Laden Sie sich das Steuerelement- und Layoutgaleriebeispiel und das Beispiel für wichtige XAML-Steuerelemente herunter. Diese Beispiele zeigen viele Windows-UI-Steuerelemente in Aktion.

Die folgende nach Funktionen geordnete Liste enthält die allgemeinen XAML-Steuerelemente, die Sie in Ihrer App verwenden können. Eine alphabetische Liste der Steuerelemente finden Sie unter Steuerelementliste.

Sie können die meisten Steuerelemente in Ihren App-Benutzeroberflächen für Telefon und PC verwenden. Diese Steuerelemente sehen in der Regel ähnlich aus, unterscheiden sich in einigen Fällen aber auf Telefon und PC. Andere Steuerelemente sind nur für Telefon-Apps oder nur für PC-Apps verfügbar.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Neu bei Windows 10 Insider Preview

CalendarDatePicker

Ein Steuerelement, mit dem Benutzer ein Datum über eine Kalender-Dropdownanzeige auswählen können.


<CalendarDatePicker/>

Referenz: CalendarDatePicker

CalendarView

Eine konfigurierbare Kalenderanzeige, in der Benutzer ein einzelnes Datum oder mehrere Daten auswählen können.


<CalendarView/>

Referenz: CalendarView

InkCanvas

Ein Steuerelement, das Freihandstriche empfängt und anzeigt.


<InkCanvas/>

Referenz: InkCanvas

MediaTransportControls

Ein Steuerelement, das Wiedergabesteuerelemente für ein MediaElement bereitstellt.


<MediaTransportControls/>

Referenz: MediaTransportControls

RelativePanel

Ein Bereich, in dem Sie untergeordnete Objekte relativ zueinander oder in Relation zum übergeordneten Objekt positionieren und ausrichten können.


<RelativePanel>
    <TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
    <Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>

Referenz: RelativePanel

SplitView

Ein Containersteuerelement mit zwei Ansichten: einer Ansicht für den Hauptinhalt und einer weiteren Ansicht, die in der Regel für ein Navigationsmenü verwendet wird.


<SplitView>
    <SplitView.Pane>
        <!-- Menu content -->
    </SplitView.Pane>
    <SplitView.Content>
        <!-- Main content -->
    </SplitView.Content>
</SplitView>

Referenz: SplitView

App-Leisten und -Befehle

App-Leiste (nur Windows)

Eine Symbolleiste für anwendungsspezifische Befehle.

Unteres App-Leisten-Steuerelement

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <Grid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
                <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>


Referenz: AppBar

So wird's gemacht: Hinzufügen von App-Leisten

Design: App-Leiste oben, App-Leiste unten

Beispielcode: XAML-Beispiel für ein AppBar-Steuerelement, Steuerelement- und Layoutgaleriebeispiel

App-Leistenschaltfläche

Eine Schaltfläche, die Befehle mit dem Stil der App-Leiste anzeigt.

Referenz: AppBarButton

Design: Zurück-Schaltfläche, App-Leiste unten

Trennzeichen der App-Leiste (nur Windows)

Trennt Gruppen von Befehlen in einer App-Leiste grafisch.

Referenz: AppBarSeparator

Umschaltfläche der App-Leiste

Eine Schaltfläche zum Wechseln zwischen den Befehlen mit dem Stil der App-Leiste.

Referenz: AppBarToggleButton

Befehlsleiste

Eine spezielle App-Leiste für das Ändern der Größe von Elementen der App-Leistenschaltfläche.


    <CommandBar>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    </CommandBar>


Referenz: CommandBar

So wird's gemacht: Hinzufügen von App-Leisten

Design: App-Leiste unten

Beispielcode: XAML-Beispiel für ein AppBar-Steuerelement, Steuerelement- und Layoutgaleriebeispiel

Schaltflächen

Schaltfläche

Ein Steuerelement, das auf Benutzereingaben reagiert und ein "Click"-Ereignis auslöst.

Eine Standardschaltfläche und eine formatierte Schaltfläche

<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />


Referenz: Button

So wird's gemacht: Hinzufügen von Schaltflächen

Design: Schaltfläche

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Hyperlink

Siehe "Linkschaltfläche"

Linkschaltfläche

Eine Schaltfläche, die als erhöhter Text angezeigt und normalerweise inline in Textblöcken verwendet wird.

Linkschaltfläche

<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>


Referenz: HyperlinkButton

So wird's gemacht: Hinzufügen von Schaltflächen

Design: Link

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Wiederholungsschaltfläche

Eine Schaltfläche, die ihr Click-Ereignis von dem Moment an, da es betätigt wird, bis zu dem Zeitpunkt, an dem es losgelassen wird, wiederholt auslöst.

Ein Schaltflächen-Steuerelement zum Wiederholen

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />


Referenz: RepeatButton

So wird's gemacht: Hinzufügen von Schaltflächen

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Push-Schaltfläche

Siehe "Schaltfläche"

Sammlungs-/Datensteuerelemente

Flip-Ansicht

Ein Steuerelement, das eine Sammlung von Elementen, durch die der Benutzer jeweils einzeln blättern kann, darstellt.

Flip-Ansicht-Steuerelement

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>


Referenz: FlipView

So wird's gemacht: Hinzufügen von FlipView-Steuerelementen

Design: Flip-Ansicht

Beispielcode: Beispiel für ein XAML-FlipView-Steuerelement, Steuerelement- und Layoutgaleriebeispiel

Rasteransicht

Ein Steuerelement, das eine Sammlung von Elementen in Zeilen und Spalten darstellt, für die ein horizontaler Bildlauf durchgeführt werden kann.

Rasteransicht-Steuerelement

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>


Referenz: GridView

So wird's gemacht: Hinzufügen von ListView- und GridView-Steuerelementen

Design: Rasteransicht und Listenansicht

Beispielcode: Beispiel für XAML-ListView- und -GridView-Steuerelemente, XAML ListView and GridView customizing interactivity sample, XAML GridView grouping and SemanticZoom sample, Controls and layout gallery sample

Hub

Ein Containersteuerelement, mit dem der Benutzer verschiedene Abschnitte des Inhalts anzeigen und zu ihnen navigieren kann.


<Hub>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
    <HubSection>
        <!--- hub section content -->
				</HubSection>
</Hub>

Referenz: Hub

So wird's gemacht: Schnellstart: Verwenden von Hubs

Design: Hub

Beispielcode: XAML-Beispiel für ein Hub-Steuerelement, Steuerelement- und Layoutgaleriebeispiel

Elementsteuerelement

Ein Steuerelement, das eine Sammlung von Elementen in einer Benutzeroberfläche darstellt, die von einer Datenvorlage angegeben wird.


<ItemsControl/>

Referenz: ItemsControl

Listenansicht

Ein Steuerelement, das eine Sammlung von Elementen in einer Liste darstellt, für die ein horizontaler Bildlauf durchgeführt werden kann.

Listenansicht-Steuerelement

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>


Referenz: ListView

So wird's gemacht: Hinzufügen von ListView- und GridView-Steuerelementen

Design: Rasteransicht und Listenansicht

Beispielcode: Beispiel für XAML-ListView- und -GridView-Steuerelemente, Beispiel für die Interaktivitätsanpassung von XAML-ListView- und -GridView-Steuerelementen, Steuerelement- und Layoutgaleriebeispiel

Semantischer Zoom

Ein Containersteuerelement, das es dem Benutzer ermöglicht, zwischen zwei Ansichten einer Sammlung zu zoomen.

Semantisches Zoomsteuerelement


<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

Referenz: SemanticZoom

So wird's gemacht: Hinzufügen von SemanticZoom-Steuerelementen

Design: Semantischer Zoom, Windows – einzigartig und einmalig: Semantischer Zoom

Beispielcode: Beispiel für XAML-GridView-Gruppierung und SemanticZoom, Steuerelement- und Layoutgaleriebeispiel

Flyouts

Kontextmenü

Siehe "Popupmenü"

Flyout

Zeigt eine Meldung an, die einen Benutzereingriff erfordert. (Im Gegensatz zu einem Dialogfeld wird von einem Flyout kein separates Fenster erstellt und keine Benutzerinteraktion blockiert.)

Flyout-Steuerelement

<Flyout>
    <StackPanel>
        <TextBlock>All items will be permanently removed from your cart.</TextBlock>
        <Button Click="DeleteConfirmation_Click">Empty my cart</Button>
    </StackPanel>
</Flyout>


Referenz: Flyout

So wird's gemacht: Schnellstart: Hinzufügen eines Flyouts

Design: Flyout

Beispielcode: Beispiel für XAML-Flyout- und -MenuFlyout-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Menü-Flyout

Zeigt vorübergehend eine Liste der Befehle oder Optionen im Kontext der Benutzeraktion an.

Menü-Flyoutsteuerelement

<MenuFlyout>
    <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
    <MenuFlyoutSeparator/>
    <ToggleMenuFlyoutItem Text="Shuffle" 
                          IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
    <ToggleMenuFlyoutItem Text="Repeat" 
                          IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>



Referenz: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem

So wird's gemacht: Schnellstart: Hinzufügen eines MenuFlyout-Steuerelements

Beispielcode: Beispiel für XAML-Flyout- und -MenuFlyout-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Popupmenü

Ein benutzerdefiniertes Menü, das von Ihnen festgelegte Befehle anbietet.

Referenz: PopupMenu

Beispiel für wichtige XAML-Steuerelemente

QuickInfo

Ein Popupfenster, das Informationen zu einem Element anzeigt.

QuickInfo-Steuerelement

<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />


Referenz: ToolTip, ToolTipService

So wird's gemacht: Hinzufügen von QuickInfos

Design: QuickInfo

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Bilder

Bild

Ein Steuerelement, das ein Bild darstellt.

Bildsteuerelement

<Image Source="Assets/Logo.png" />


Referenz: Image

So wird's gemacht: Schnellstart: Image und ImageBrush

Beispielcode: Beispiel für XAML-Bilder, Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Grafiken

Formen

Verschiedene grafische Speichermodusobjekte, die als Ellipsen, Rechtecke, Linien, Bézierpfade usw. dargestellt werden können.

Ein PolygonEin Pfad

<Ellipse/>
<Path/>
<Rectangle/>

Referenz: Shapes

So wird's gemacht: Schnellstart: Zeichnen von Formen

Beispielcode: Beispiel für vektorbasierte XAML-Zeichnung

Layoutsteuerelemente

Rahmen

Ein Containersteuerelement, das einen Rahmen, einen Hintergrund oder beides um ein anderes Objekt herum zeichnet.

Ein Rahmen um zwei Rechtecke

<Border BorderBrush="Gray" BorderThickness="4" 
        Height="108" Width="64">
    <StackPanel>
        <Rectangle Fill="Yellow"/>
        <Rectangle Fill="Green"/>
    </StackPanel>
</Border>


Referenz: Border

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Canvas

Ein Layoutpanel, das die absolute Positionierung untergeordneter Elemente relativ zur oberen linken Ecke des Canvas unterstützt.

Canvaslayoutpanel

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>


Referenz: Canvas

So wird's gemacht: Schnellstart: Hinzufügen von Layoutsteuerelementen

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Flexbox

Siehe "StackPanel-Element".

Raster

Ein Layoutpanel, das die Anordnung von untergeordneten Elementen in Zeilen und Spalten unterstützt.

Rasterlayoutpanel

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>


Referenz: Grid

So wird's gemacht: Schnellstart: Hinzufügen von Layoutsteuerelementen

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Verschiebungs-Bildlaufanzeige

Siehe Bildlaufanzeige

Bildlaufleiste

Ein Steuerelement, das eine Bildlaufleiste mit Thumb-Schieber zur Verfügung stellt, dessen Position einem Wert entspricht.


<ScrollBar/>

Referenz: ScrollBar

Bildlaufanzeige

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

Bildlaufanzeige-Steuerelement

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10" 
              HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>


Referenz: ScrollViewer

Design: Bildlaufanzeige

Beispielcode: Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen, Steuerelement- und Layoutgaleriebeispiel

StackPanel

Ein Layoutpanel, das untergeordnete Elemente in einer einzelnen Zeile anordnet. Die Zeile kann horizontal oder vertikal ausgerichtet werden.

StackPanel-Layoutsteuerelement

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Yellow"/>
</StackPanel>


Referenz: StackPanel

So wird's gemacht: Schnellstart: Hinzufügen von Layoutsteuerelementen

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

VariableSizedWrapGrid

Ein Layoutpanel, das die Anordnung von untergeordneten Elementen in Zeilen und Spalten unterstützt. Jedes untergeordnete Element kann sich über mehrere Zeilen und Spalten erstrecken.

Umbruchrasterlayoutpanel mit variabler Größe

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>


Referenz: VariableSizedWrapGrid

So wird's gemacht: Schnellstart: Hinzufügen von Layoutsteuerelementen

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Viewbox

Ein Containersteuerelement, das seinen Inhalt auf eine angegebene Größe skaliert.

Viewbox-Steuerelement

<Viewbox MaxWidth="25" MaxHeight="25">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
    <Image Source="Assets/Logo.png"/>
</Viewbox>


Referenz: Viewbox

Beispielcode: Steuerelement- und Layoutgaleriebeispiel

Zoombildlaufanzeige

Siehe Bildlaufanzeige

Mediensteuerelemente

Audio

Siehe "Medienelement".

Medienelement

Ein Steuerelement, das Audio- und Videoinhalte wiedergibt.


<MediaElement/>

Referenz: MediaElement

Design: Apps mit Audiounterstützung

Beispielcode: XAML-Beispiel für die Medienwiedergabe

Video

Siehe "Medienelement".

Navigation

Pivot (nur Windows Phone)

Ein Vollbild-Container und Navigationsmodell, das auch eine schnelle Methode zum Wechseln zwischen verschiedenen Pivots (Ansichten oder Filtern) bereitstellt und normalerweise in ein und demselben Datensatz zum Einsatz kommt.

Referenz: Pivot

Design: Pivot

Webansicht

Ein Containersteuerelement, das Webinhalt hostet.


<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />



<Rectangle Height="400" Width="800">
    <Rectangle.Fill>
        <WebViewBrush SourceName="webView1"/>
    </Rectangle.Fill>
</Rectangle>


Referenz: WebView, WebViewBrush

Design: Webansicht

Beispielcode: Beispiel für XAML-WebView-Steuerelement

Statussteuerelemente

Statusleiste

Ein Steuerelement, das den Fortschritt durch Anzeigen einer Leiste angibt.

Statusleistensteuerelement

Eine Fortschrittsleiste, die einen bestimmten Wert anzeigt.


<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>


Steuerelement für unbestimmte Statusanzeige

Eine Fortschrittsleiste, die einen unbestimmten Fortschritt anzeigt.


<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>


Referenz: ProgressBar

So wird's gemacht: Hinzufügen von Statussteuerelementen

Design: Statusanzeige und Statusring

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Statusring

Ein Steuerelement, das den Status durch Anzeigen eines Rings angibt.

Statusringsteuerelement

<ProgressRing x:Name="progressRing1" IsActive="True"/>


Referenz: ProgressRing

So wird's gemacht: Hinzufügen von Statussteuerelementen

Design: Statusanzeige und Statusring

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Textsteuerelemente

Feld mit automatischen Vorschlägen (nur Windows Phone)

Ein Texteingabefeld, das Text vorschlägt, während der Benutzer Zeichen eingibt.

Referenz: AutoSuggestBox

Mehrzeiliges Textfeld

Siehe "Textfeld".

Kennwortfeld

Ein Steuerelement zur Eingabe von Kennwörtern.

Kennwortfeldsteuerelement

<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True" 
             PasswordChanged="PasswordBox_PasswordChanged" />


Referenz: PasswordBox

So wird's gemacht: Schnellstart: Hinzufügen von Steuerelementen für Texteingabe und -bearbeitung

Design: Kennwortfeld

Beispielcode: Beispiel für die XAML-Textanzeige, Beispiel für die XAML-Textbearbeitung, Steuerelement- und Layoutgaleriebeispiel

Rich-Edit-Feld

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


<RichEditBox />

Referenz: RichEditBox

So wird's gemacht: Schnellstart: Hinzufügen von Steuerelementen für Texteingabe und -bearbeitung

Design: Rechtschreibprüfung der Texteingabe

Beispielcode: XAML-Beispiel für Text, Steuerelement- und Layoutgaleriebeispiel

Suchfeld (nur Windows)

Ein Steuerelement, in dem der Benutzer Suchabfragen eingeben kann.

Suchfeldsteuerelement

<SearchBox />

Referenz: SearchBox

So wird's gemacht: Hinzufügen von Suchfunktionen

Design: Suchfeld

Beispielcode: Beispiel für ein Suchfeldsteuerelement, Steuerelement- und Layoutgaleriebeispiel

Einzeiliges Textfeld

Siehe "Textfeld".

Statischer Text/Absatz

Siehe "Textblock".

Textblock

Ein Steuerelement, das Text angezeigt.

Textblocksteuerelement

<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />


Referenz: TextBlock, RichTextBlock

So wird's gemacht: Schnellstart: Anzeigen von Text

Design: Typ

Beispielcode: XAML-Beispiel für Text, Steuerelement- und Layoutgaleriebeispiel

Textfeld

Ein einzeiliges oder mehrzeiliges Nur-Text-Feld.

Textfeldsteuerelement

<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged" />


Referenz: TextBox

So wird's gemacht: Schnellstart: Hinzufügen von Steuerelementen für Texteingabe und -bearbeitung

Design: Texteingabefeld, Rechtschreibprüfung der Texteingabe

Beispielcode: XAML-Beispiel für Text, Steuerelement- und Layoutgaleriebeispiel

Auswahlsteuerelemente

Kontrollkästchen

Ein Steuerelement, das der Benutzer aktivieren und deaktivieren kann.

Die drei Zustände eines Kontrollkästchens

<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>


Referenz: CheckBox

So wird's gemacht: Hinzufügen von Kontrollkästchen

Design: Kontrollkästchen

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Kombinationsfeld

Eine Dropdownliste mit Elementen, in der ein Benutzer eine Auswahl treffen kann.

Offenes Kombinationsfeld

<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>


Referenz: ComboBox

So wird's gemacht: Hinzufügen von Kombinationsfeldern und Listenfeldern

Design: Dropdownliste

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Datumsauswahl

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

Datumsauswahl-Steuerelement

<DatePicker Header="Arrival Date"/>

Referenz: DatePicker

So wird's gemacht: Schnellstart: Hinzufügen von DatePicker-Steuerelementen

Design: Datumsauswahl

Beispielcode: Beispiel für XAML-DatePicker- und -TimePicker-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Listenfeld

Ein Steuerelement, das eine Inlineliste mit Elementen darstellt, aus der ein Benutzer eine Auswahl treffen kann.

Listenfeldsteuerelement

<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListBox>


Referenz: ListBox

So wird's gemacht: Hinzufügen von Kombinationsfeldern und Listenfeldern

Design: Listenfeld

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Optionsfeld

Ein Steuerelement, das es einem Benutzer ermöglicht, eine einzelne Option aus einer Gruppe von Optionen auszuwählen. Wenn Optionsfelder zusammengefasst werden, schließen sie sich gegenseitig aus.

Optionsfeldsteuerelemente

<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" 
             Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" 
             Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" 
             Checked="RadioButton_Checked"/>


Referenz: RadioButton

So wird's gemacht: Hinzufügen von Optionsfeldern

Design: Optionsfeld

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Schieberegler

Ein Steuerelement, über das der Benutzer aus einer Reihe von Werten auswählen kann, indem er ein Thumb-Steuerelement über einen Bereich verschiebt.

Schiebereglersteuerelement

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />


Referenz: Slider

So wird's gemacht: Hinzufügen von Schiebereglern

Design: Schieberegler

Beispielcode: Beispiel für wichtige XAML-Steuerelemente

Uhrzeitauswahl

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

TimePicker-Steuerelement

<TimePicker Header="Arrival Time"/>

Referenz: TimePicker

So wird's gemacht: Schnellstart: Hinzufügen eines TimePicker-Steuerelements

Design: Uhrzeitauswahl

Beispielcode: Beispiel für XAML-DatePicker- und -TimePicker-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Umschalter

Eine Schaltfläche, mit der zwischen zwei Zuständen hin und her geschaltet werden kann.

Ein Schaltflächen-Steuerelement zum Umschalten

<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>


Referenz: ToggleButton

So wird's gemacht: Hinzufügen von Schaltflächen

Umschalter

Ein Schalter, mit dem zwischen zwei Zuständen hin und her geschaltet werden kann.

Umschaltersteuerelement

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>


Referenz: ToggleSwitch

So wird's gemacht: Hinzufügen von Umschaltern

Design: Umschalter

Beispielcode: Beispiel für wichtige XAML-Steuerelemente, Steuerelement- und Layoutgaleriebeispiel

Verwandte Themen

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++

 

 

Anzeigen:
© 2015 Microsoft