XAML 控件

Download Sample下载示例

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

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

用于演示的视图

视图 示例

BoxView

显示特定颜色的矩形。

Screenshot of a BoxView

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

椭圆形

显示省略号或圆圈。

Screenshot of an Ellipse

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

映像

显示位图。

Screenshot of an Image

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

Label

显示一行或多行文本。

Screenshot of a Label

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

线条

显示一行。

Screenshot of a Line

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

映射

显示地图。

Screenshot of a Map

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

路径

显示曲线和复杂形状。

Screenshot of a 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" />

多边形

显示多边形。

Screenshot of a 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" />

折线

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

Screenshot of a 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" />

矩形

显示矩形或正方形。

Screenshot of a Rectangle

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

WebView

显示网页或 HTML 内容。

Screenshot of a WebView

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

启动命令的视图

视图 示例

Button

显示矩形对象中的文本。

Screenshot of a Button

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

ImageButton

显示矩形对象中的图像。

Screenshot of an ImageButton

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

RadioButton

允许从集中选择一个选项。

Screenshot of a RadioButton

指南
<RadioButton Text="Pineapple"
CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

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

Screenshot of a RefreshView

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

SearchBar

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

Screenshot of a SearchBar

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

SwipeView

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

Screenshot of a SwipeView

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

设置值的视图

视图 示例

CheckBox

允许选择 boolean 值。

Screenshot of a CheckBox

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

滑块

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

Screenshot of a Slider

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

步进器

允许从增量范围内选择 double 值。Screenshot of a Stepper

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

Switch

允许选择 boolean 值。

Screenshot of a Switch

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

DatePicker

允许选择日期。

Screenshot of a DatePicker

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

TimePicker

允许选择时间。

Screenshot of a TimePicker

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

用于编辑文本的视图

视图 示例

条目

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

Screenshot of an Entry

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

编辑器

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

Screenshot of an Editor

API / 指南
<Editor VerticalOptions="FillAndExpand" />

指示活动的视图

视图 示例

ActivityIndicator

显示一个动画,以显示应用程序正在执行长时间的活动,但不指示进度。

Screenshot of an ActivityIndicator

API / 指南
<ActivityIndicator IsRunning="True"
VerticalOptions="CenterAndExpand" />

ProgressBar

显示一个动画,以显示应用程序正在经历一个漫长的活动。

Screenshot of a ProgressBar

API / 指南
<ProgressBar Progress=".5"
VerticalOptions="CenterAndExpand" />

显示集合的视图

视图 示例

CarouselView

显示数据项的可滚动列表。

Screenshot of a CarouselView

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

CollectionView

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

Screenshot of a CollectionView

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

IndicatorView

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

Screenshot of an IndicatorView

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

ListView

显示可选择的数据项的可滚动列表。

Screenshot of a ListView

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

选取器

显示文本字符串列表中的选择项。

Screenshot of a 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

显示交互式行的列表。

Screenshot of a TableView

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