XAML 控制項XAML Controls

下載範例 下載範例Download Sample Download the sample

Views 是使用者介面物件,例如標籤、按鈕和滑杆,在其他圖形化程式設計環境中通常稱為控制項工具。Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments. Xamarin 支援的視圖全都衍生自View類別。The views supported by Xamarin.Forms all derive from the View class.

所有在 Xamarin 中定義的視圖都可以從 XAML 檔案參考。All of the views that are defined in Xamarin.Forms can be referenced from XAML files.

簡報的檢視Views for presentation

BoxViewBoxView

顯示特定色彩的矩形。Displays a rectangle of a particular color.

BoxView 的螢幕擷取畫面Screenshot of a BoxView

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

影像Image

顯示點陣圖。Displays a bitmap.

影像的螢幕擷取畫面Screenshot of an Image

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

標籤Label

顯示一或多行文字。Displays one or more lines of text.

標籤的螢幕擷取畫面Screenshot of a Label

API / 指南API / Guide

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

對應Map

顯示地圖。Displays a map.

地圖的螢幕擷取畫面Screenshot of a Map

API / 指南API / Guide

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

MediaElementMediaElement

播放影片或音訊。Play video or audio.

MediaElement 的螢幕擷取畫面Screenshot of a MediaElement

API / 指南API / Guide

<MediaElement Source="https://sec.ch9.ms/ch9/XamarinShow_mid.mp4"
AutoPlay="True"
ShowsPlaybackControls="True" />

WebViewWebView

顯示網頁或 HTML 內容。Displays Web pages or HTML content.

Web 工作的螢幕擷取畫面Screenshot of a WebView

API / 指南API / Guide

<WebView Source="https://docs.microsoft.com/xamarin/"
VerticalOptions="FillAndExpand" />

起始命令的檢視Views that initiate commands

按鈕Button

顯示矩形物件中的文字。Displays text in a rectangular object.

按鈕的螢幕擷取畫面Screenshot of a Button

API / 指南API / Guide

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

ImageButtonImageButton

顯示矩形物件中的影像。Displays an image in a rectangular object.

ImageButton 的螢幕擷取畫面Screenshot of an ImageButton

API / 指南API / Guide

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

RefreshViewRefreshView

提供可滾動內容的提取重新整理功能。Provides pull-to-refresh functionality for scrollable content.

RefreshView 的螢幕擷取畫面Screenshot of a RefreshView

Guide

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

搜尋列SearchBar

接受用來執行搜尋的使用者輸入。Accepts user input that it uses to perform a search.

搜尋列的螢幕擷取畫面Screenshot of a SearchBar

Guide

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

SwipeViewSwipeView

提供滑動手勢所顯示的內容功能表項目。Provides context menu items that are revealed by a swipe gesture.

SwipeView 的螢幕擷取畫面Screenshot of a SwipeView

Guide

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

設定值的檢視Views for setting values

CheckBoxCheckBox

允許選取 boolean 值。Allows the selection of a boolean value.

核取方塊的螢幕擷取畫面Screenshot of a CheckBox

Guide

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

滑桿Slider

允許從連續範圍選取 double 值。Allows the selection of a double value from a continuous range.

滑杆的螢幕擷取畫面Screenshot of a Slider

API / 指南API / Guide

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

StepperStepper

允許從增量範圍選取 double 值。Allows the selection of a double value from an incremental range.

分檔器的螢幕擷取畫面Screenshot of a Stepper

API / 指南API / Guide

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

SwitchSwitch

允許選取 boolean 值。Allows the selection of a boolean value.

交換器的螢幕擷取畫面Screenshot of a Switch

API / 指南API / Guide

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

DatePickerDatePicker

允許選取日期。Allows the selection of a date.

DatePicker 的螢幕擷取畫面Screenshot of a DatePicker

API / 指南API / Guide

<DatePicker Format="D"
VerticalOptions="CenterAndExpand" />

TimePickerTimePicker

允許選取一段時間。Allows the selection of a time.

TimePicker 的螢幕擷取畫面Screenshot of a TimePicker

API / 指南API / Guide

<TimePicker Format="T"
VerticalOptions="CenterAndExpand" />

編輯文字的檢視Views for editing text

項目Entry

允許輸入和編輯單行文字。Allows a single line of text to be entered and edited.

專案的螢幕擷取畫面Screenshot of an Entry

API / 指南API / Guide

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

編輯器Editor

允許輸入和編輯多行文字。Allows multiple lines of text to be entered and edited.

編輯器的螢幕擷取畫面Screenshot of an Editor

API / 指南API / Guide

<Editor VerticalOptions="FillAndExpand" />

表示活動的檢視Views to indicate activity

ActivityIndicatorActivityIndicator

顯示一個動畫,顯示應用程式正在進行長時間的活動,而不會提供進度的指示。Displays an animation to show that the application is engaged in a lengthy activity, without giving any indication of progress.

ActivityIndicator 的螢幕擷取畫面Screenshot of an ActivityIndicator

API / 指南API / Guide

<ActivityIndicator IsRunning="True"
VerticalOptions="CenterAndExpand" />

ProgressBarProgressBar

顯示動畫,以顯示應用程式正在經歷冗長的活動。Displays an animation to show that the application is progressing through a lengthy activity.

ProgressBar 的螢幕擷取畫面Screenshot of a ProgressBar

API / 指南API / Guide

<ProgressBar Progress=".5"
VerticalOptions="CenterAndExpand" />

顯示集合的檢視Views that display collections

CarouselViewCarouselView

顯示資料項目目的可滾動清單。Displays a scrollable list of data items.

CarouselView 的螢幕擷取畫面Screenshot of a CarouselView

Guide

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

CollectionViewCollectionView

使用不同的版面配置規格,顯示可選取資料項目的可滾動清單。Displays a scrollable list of selectable data items, using different layout specifications.

CollectionView 的螢幕擷取畫面Screenshot of a CollectionView

Guide

<CollectionView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}"
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
</CollectionView/>

IndicatorViewIndicatorView

顯示表示 CarouselView中專案數的指標。Displays indicators that represent the number of items in a CarouselView.

IndicatorView 的螢幕擷取畫面Screenshot of an IndicatorView

Guide

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

ListViewListView

顯示可選取資料項目的可滾動清單。Displays a scrollable list of selectable data items.

ListView 的螢幕擷取畫面Screenshot of a ListView

API / 指南API / Guide

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

PickerPicker

顯示文字字串清單中的選取專案。Displays a select item from a list of text strings.

選擇器的螢幕擷取畫面Screenshot of a Picker

API / 指南API / Guide

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

TableViewTableView

顯示互動式資料列的清單。Displays a list of interactive rows.

TableView 的螢幕擷取畫面Screenshot of a TableView

API / 指南API / Guide

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