Udostępnij za pośrednictwem

Kontrolki XAML

  • Artykuł

Widoki to obiekty interfejsu użytkownika, takie jak etykiety, przyciski i suwaki, które są powszechnie znane jako kontrolki lub widżety w innych środowiskach programowania graficznego. Widoki obsługiwane przez Xamarin.Forms wszystkie pochodzą z View klasy .

Wszystkie widoki zdefiniowane w programie Xamarin.Forms można odwoływać się z plików XAML.

Widoki do prezentacji

Widok Przykład

BoxView

Wyświetla prostokąt określonego koloru.

Zrzut ekranu przedstawiający widok BoxView

Przewodnik po interfejsie API / 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Elipsa

Wyświetla wielokropek lub okrąg.

Zrzut ekranu przedstawiający wielokropek

Przewodnik po interfejsie API / 
<Wypełnienie wielokropka ="Czerwony"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Obraz

Wyświetla mapę bitową.

Zrzut ekranu przedstawiający obraz

Przewodnik po interfejsie API / 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Etykieta

Wyświetla co najmniej jeden wiersz tekstu.

Zrzut ekranu przedstawiający etykietę

Przewodnik po interfejsie API / 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Kursywa"
       HorizontalTextAlignment="Center" />

Linia

Wyświetl wiersz.

Zrzut ekranu przedstawiający linię

Przewodnik po interfejsie API / 
<Wiersz X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Mapowanie

Wyświetla mapę.

Zrzut ekranu przedstawiający mapę

Przewodnik po interfejsie API / 
<maps:Map ItemsSource="{Binding Locations}" />

Ścieżka

Wyświetla krzywe i złożone kształty.

Zrzut ekranu przedstawiający ścieżkę

Przewodnik po interfejsie API / 
<Ścieżka Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      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" />

Wielokąt

Wyświetl wielokąt.

Zrzut ekranu przedstawiający wielokąt

Przewodnik po interfejsie API / 
<Punkty wielokątne="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" />

Linia łamana

Wyświetl serię połączonych linii prostych.

Zrzut ekranu przedstawiający wielolinię

Przewodnik po interfejsie API / 
<Punkty polyline="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Prostokąt

Wyświetl prostokąt lub kwadrat.

Zrzut ekranu przedstawiający prostokąt

Przewodnik po interfejsie API / 
<Wypełnienie prostokątne="Czerwone"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Wyświetla strony sieci Web lub zawartość HTML.

Zrzut ekranu przedstawiający element WebView

Przewodnik po interfejsie API / 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Widoki inicjujące polecenia

Widok Przykład

Przycisk

Wyświetla tekst w obiekcie prostokątnym.

Zrzut ekranu przedstawiający przycisk

Przewodnik po interfejsie API / 
<Przycisk Text="Kliknij mnie!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Wyświetla obraz w prostokątnym obiekcie.

Zrzut ekranu przedstawiający element ImageButton

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

RadioButton

Umożliwia wybór jednej opcji z zestawu.

Zrzut ekranu przedstawiający przycisk radiowy

Przewodnik		 
<RadioButton Text="Ananas"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Udostępnia funkcje ściągania do odświeżania zawartości z możliwością przewijania.

Zrzut ekranu przedstawiający widok RefreshView

Przewodnik		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- kontrolka przewijana jest tutaj ->
</RefreshView>

Pasek wyszukiwania

Akceptuje dane wejściowe użytkownika używane do wykonywania wyszukiwania.

Zrzut ekranu przedstawiający pasek wyszukiwania

Przewodnik		 
<Symbol zastępczy paska wyszukiwania="Wprowadź termin wyszukiwania"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Udostępnia elementy menu kontekstowego, które są ujawniane za pomocą gestu przesunięcia.

Zrzut ekranu przedstawiający widok SwipeView

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

Widoki do ustawiania wartości

Widok Przykład

CheckBox

Umożliwia wybór boolean wartości.

Zrzut ekranu przedstawiający pole wyboru

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

Suwak

Umożliwia wybór double wartości z zakresu ciągłego.

Zrzut ekranu przedstawiający suwak

Przewodnik po interfejsie API / 
<Slider Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Stepper

Umożliwia wybór double wartości z zakresu przyrostowego.Zrzut ekranu przedstawiający krok

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

Switch

Umożliwia wybór boolean wartości.

Zrzut ekranu przedstawiający przełącznik

Przewodnik po interfejsie API / 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

Selektor daty

Umożliwia wybór daty.

Zrzut ekranu przedstawiający platformę DatePicker

Przewodnik po interfejsie API / 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Umożliwia wybór czasu.

Zrzut ekranu przedstawiający platformę TimePicker

Przewodnik po interfejsie API / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Widoki do edycji tekstu

Widok Przykład

Wpis

Umożliwia wprowadzanie i edytowanie pojedynczego wiersza tekstu.

Zrzut ekranu przedstawiający wpis

Przewodnik po interfejsie API / 		<
<Entry Keyboard="Email"
       Symbol zastępczy="Wprowadź adres e-mail"
       VerticalOptions="CenterAndExpand" />

Redaktor

Umożliwia wprowadzanie i edytowanie wielu wierszy tekstu.

Zrzut ekranu przedstawiający edytor

Przewodnik po interfejsie API / 
<Editor VerticalOptions="FillAndExpand" />

Widoki do wskazywania działania

Widok Przykład

ActivityIndicator

Wyświetla animację pokazującą, że aplikacja jest zaangażowana w długotrwałe działanie bez wskazania postępu.

Zrzut ekranu przedstawiający element ActivityIndicator

Przewodnik po interfejsie API / 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Wyświetla animację pokazującą, że aplikacja przechodzi przez długotrwałe działanie.

Zrzut ekranu przedstawiający pasek postępu

Przewodnik po interfejsie API / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Widoki, które wyświetlają kolekcje

Widok Przykład

CarouselView

Wyświetla przewijaną listę elementów danych.

Zrzut ekranu przedstawiający widok karuzeli

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

CollectionView

Wyświetla przewijaną listę elementów danych możliwych do wyboru przy użyciu różnych specyfikacji układu.

Zrzut ekranu przedstawiający obiekt CollectionView

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

IndicatorView

Wyświetla wskaźniki reprezentujące liczbę elementów w obiekcie CarouselView.

Zrzut ekranu przedstawiający kontrolkę IndicatorView

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

ListView

Wyświetla przewijaną listę wybranych elementów danych.

Zrzut ekranu przedstawiający obiekt ListView

Przewodnik po interfejsie API / 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Wyświetla element zaznaczenia z listy ciągów tekstowych.

Zrzut ekranu przedstawiający selektor

Przewodnik po interfejsie API / 		<
<Tytuł selektora="Wybierz małpę"
        TitleColor="Red">
  <Selektor.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>— japoński macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

Wyświetla listę interakcyjnych wierszy.

Zrzut ekranu przedstawiający kontrolkę TableView

Przewodnik po interfejsie API / 
<TableView Intent="Ustawienia">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="Nowa poczta głosowa" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>