Поделиться через

Элементы управления XAML

  • Статья

Представления — это объекты пользовательского интерфейса, такие как метки, кнопки и ползунки, которые обычно называются элементами управления или мини-приложениями в других графических средах программирования. Представления, поддерживаемые всеми производными Xamarin.Forms от View класса.

Все представления, определенные в Xamarin.Forms них, можно ссылаться на файлы XAML.

Визуальные элементы для представления данных

Представления Пример

BoxView

Отображает прямоугольник определенного цвета.

Снимок экрана: BoxView

Руководство по API / 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

Эллипс

Отображает многоточие или круг.

Снимок экрана: эллипс

Руководство по API / 
<Эллипс Заливка="Красный"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

Изображения

Отображает растровое изображение.

Снимок экрана: изображение

Руководство по API / 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Этикетка

Отображает одну или несколько строк текста.

Снимок экрана: метка

Руководство по API / 
<Label Text="Hello, Xamarin.Forms!"
       FontSize="Large"
       FontAttributes="Курсив"
       HorizontalTextAlignment="Center" />

График

Отображение строки.

Снимок экрана: строка

Руководство по API / 
<Line X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Карта

Отображает карту.

Снимок экрана: карта

Руководство по API / 
<maps:Map ItemsSource="{Binding Locations}" />

Путь

Отображение кривых и сложных фигур.

Снимок экрана: путь

Руководство по API / 
<Path 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" />

Многоугольник

Отображение многоугольника.

Снимок экрана: многоугольник

Руководство по API / 
<Polygon Point="0 48, 0 144, 96 150, 100, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Ломаная линия

Отображение ряда подключенных прямых линий.

Снимок экрана: Polyline

Руководство по API / 
<Polyline Point="0 0 10 30, 15 0 18 60 23 30 35 30 40 0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Прямоугольник

Отображение прямоугольника или квадрата.

Снимок экрана: прямоугольник

Руководство по API / 
<Прямоугольник Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Отображает веб-страницы или HTML-содержимое.

Снимок экрана: WebView

Руководство по API / 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Визуальные элементы, инициирующие команды

Представления Пример

Кнопка

Отображает текст в прямоугольном объекте.

Снимок экрана: кнопка

Руководство по API / 
<Кнопка Text="Click Me!"
        Font="Large"
        BorderWidth="1"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand"
        Clicked="OnButtonClicked" />

ImageButton

Отображает изображение в прямоугольном объекте.

Снимок экрана: ImageButton

Руководство по API / 
<ImageButton Source="XamarinLogo.png"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"
             Clicked="OnImageButtonClicked" />

RadioButton

Позволяет выбрать один из вариантов из набора.

Снимок экрана: RadioButton

Гид		 
<RadioButton Text="Ананас"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Предоставляет функции извлечения и обновления для прокручиваемого содержимого.

Снимок экрана: RefreshView

Гид		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <-- Прокручиваемый элемент управления идет здесь->
</RefreshView>

Панель поиска

Принимает входные данные пользователя, которые он использует для выполнения поиска.

Снимок экрана: панель поиска

Гид		 
<SearchBar Placeholder="Ввод условия поиска"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Предоставляет элементы контекстного меню, отображаемые жестом прокрутки.

Снимок экрана с элементом SwipeView

Гид		 
<SwipeView>
    <SwipeView.LeftItems>
        <Проводите пальцем>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!--Содержание-->
</SwipeView>

Визуальные элементы для установки значений

Представления Пример

CheckBox

Позволяет выбрать boolean значение.

Снимок экрана: checkBox

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

Ползунок

Позволяет выбрать double значение из непрерывного диапазона.

Снимок экрана: ползунок

Руководство по API / 
<Ползунок Minimum="0"
        Maximum="100"
        VerticalOptions="CenterAndExpand" />

Шаговый переключатель

Позволяет выбрать double значение из добавочного диапазона.Снимок экрана: шаг

Руководство по API / 
<Минимальный шаг="0"
         Maximum="10"
         Increment="0.1"
         HorizontalOptions="Center"
         VerticalOptions="CenterAndExpand" />

Switch

Позволяет выбрать boolean значение.

Снимок экрана: переключатель

Руководство по API / 
<Switch IsToggled="false"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />

DatePicker

Позволяет выбрать дату.

Снимок экрана: DatePicker

Руководство по API / 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

Разрешает выбор времени.

Снимок экрана: TimePicker

Руководство по API / 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

Визуальные элементы для редактирования текста

Представления Пример

Формат ввода

Позволяет вводить и изменять одну строку текста.

Снимок экрана: запись

Руководство по API / 		<
<Ввод клавиатуры="Email"
       Заполнитель="Ввод адреса электронной почты"
       VerticalOptions="CenterAndExpand" />

Редактор

Позволяет вводить и изменять несколько строк текста.

Снимок экрана редактора

Руководство по API / 
<Editor VerticalOptions="FillAndExpand" />

Визуальные элементы для обозначения действий

Представления Пример

ActivityIndicator

Отображает анимацию, показывающую, что приложение участвует в длительном действии, не указывая на ход выполнения.

Снимок экрана: ActivityIndicator

Руководство по API / 
<ActivityIndicator IsRunning="True"
                   VerticalOptions="CenterAndExpand" />

ProgressBar

Отображает анимацию, показывающую, что приложение выполняется с помощью длительного действия.

Снимок экрана: ProgressBar

Руководство по API / 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Визуальные элементы для отображения коллекций

Представления Пример

CarouselView

Отображает прокручиваемый список элементов данных.

Снимок экрана: CarouselView

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

CollectionView

Отображает список прокручиваемых элементов данных с использованием различных спецификаций макета.

Снимок экрана: КоллекцияView

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

IndicatorView

Отображает индикаторы, представляющие количество элементов в объекте CarouselView.

Снимок экрана: индикаторный просмотр

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

ListView

Отображает прокручиваемый список элементов данных, доступных для выбора.

Снимок экрана: ListView

Руководство по API / 
<ListView ItemsSource="{Binding Monkeys}">
          ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Отображает элемент выбора из списка текстовых строк.

Снимок экрана: средство выбора

Руководство по API / 		<
<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>Обезьяна</x:String>
      <x:String Golden Lion Tamarin</x:String>>
      <x:String Howler Monkey</x:String>>
      <x:String японский Macaque</x:String>>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

TableView

Отображает список интерактивных строк.

Снимок экрана: TableView

Руководство по API / 
<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>