通过

XAML 控件

  • 项目

视图是用户界面对象，例如标签、按钮和滑块，在其他图形编程环境中通常称为控件或小组件。 Xamarin.Forms 支持的视图均派生自 View 类。

Xamarin.Forms 中定义的所有视图都可以从 XAML 文件引用。

用于演示的视图

视图 示例

BoxView

显示特定颜色的矩形。

BoxView 的屏幕截图

API / 指南		 
<BoxView Color="Accent"
         WidthRequest="150"
         HeightRequest="150"
         HorizontalOptions="Center">

椭圆形

显示省略号或圆圈。

Ellipse 的屏幕截图

API / 指南		 
<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Center" />

映像

显示位图。

Image 的屏幕截图

API / 指南		 
<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFit"
       HorizontalOptions="Center" />

Label

显示一行或多行文本。

Label 的屏幕截图

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

线条

显示一行。

Line 的屏幕截图

API / 指南		 
<Line X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

映射

显示地图。

Map 的屏幕截图

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

路径

显示曲线和复杂形状。

Path 的屏幕截图

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" />

多边形

显示多边形。

Polygon 的屏幕截图

API / 指南		 
<Polygon Points="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" />

折线

显示一系列相互连接的直线。

Polyline 的屏幕截图

API / 指南		 
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

矩形

显示矩形或正方形。

Rectangle 的屏幕截图

API / 指南		 
<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

显示网页或 HTML 内容。

WebView 的屏幕截图

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

启动命令的视图

视图 示例

Button

显示矩形对象中的文本。

Button 的屏幕截图

API / 指南		 
<Button 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="Pineapple"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

为可滚动内容提供拉起刷新功能。

RefreshView 的屏幕截图

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

SearchBar

接受用于执行搜索的用户输入。

SearchBar 的屏幕截图

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

SwipeView

提供通过轻扫手势显示的上下文菜单项。

SwipeView 的屏幕截图

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

设置值的视图

视图 示例

CheckBox

允许选择 boolean 值。

CheckBox 的屏幕截图

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

滑块

允许从连续范围内选择 double 值。

Slider 的屏幕截图

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

步进器

允许从增量范围内选择 double 值。Stepper 的屏幕截图

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

Switch

允许选择 boolean 值。

Switch 的屏幕截图

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

DatePicker

允许选择日期。

DatePicker 的屏幕截图

API / 指南		 
<DatePicker Format="D"
            VerticalOptions="CenterAndExpand" />

TimePicker

允许选择时间。

TimePicker 的屏幕截图

API / 指南		 
<TimePicker Format="T"
            VerticalOptions="CenterAndExpand" />

用于编辑文本的视图

视图 示例

条目

允许输入和编辑单行文本。

Entry 的屏幕截图

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

编辑器

允许输入和编辑多行文本。

Editor 的屏幕截图

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

使用不同的布局规范显示可选择的数据项的可滚动列表。

CollectionView 的屏幕截图

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

IndicatorView

显示表示 CarouselView 中项数的指示器。

IndicatorView 的屏幕截图

指南		 
<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 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>

TableView

显示交互式行的列表。

TableView 的屏幕截图

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