共用方式為

XAML 控制項

  • 發行項

檢視是使用者介面物件，例如標籤、按鈕和滑桿，通常稱為 其他圖形化程序設計環境中的控件 或 小工具 。 所有衍生自 View 類別支持的Xamarin.Forms檢視。

中定義 Xamarin.Forms 的所有檢視都可以從 XAML 檔案參考。

簡報的檢視

檢視 範例

BoxView

顯示特定色彩的矩形。

BoxView 的螢幕快照

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

橢圓形

顯示省略號或圓形。

Ellipse 的螢幕快照

API / 指南		 
<橢圓形 Fill=“Red”
         WidthRequest=“150”
         HeightRequest=“50”
         HorizontalOptions="Center" />

映像

顯示點陣圖。

影像的螢幕快照

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

標籤

顯示一或多行文字。

卷標的螢幕快照

API / 指南		 
<卷標文字=“Hello， Xamarin.Forms！”
       FontSize=“Large”
       FontAttributes=“Italic”
       HorizontalTextAlignment="Center" />

線條

顯示線條。

線條的螢幕快照

API / 指南		 
<行 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 / 指南		 
<多邊形點=“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" />

矩形

顯示矩形或正方形。

矩形的螢幕快照

API / 指南		 
<矩形填滿=“紅色”
           WidthRequest=“150”
           HeightRequest=“50”
           HorizontalOptions="Center" />

WebView

顯示網頁或 HTML 內容。

WebView 的螢幕快照

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

起始命令的檢視

檢視 範例

Button

在矩形物件中顯示文字。

按鈕的螢幕快照

API / 指南		 
<按鈕文字=「按下我！
        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 的螢幕快照

指南		 
<SearchBar 佔位元=“輸入搜尋字詞”
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

提供撥動手勢所顯示的內容功能表項。

SwipeView 的螢幕快照

指南		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <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 / 指南		 
<Slider Minimum=“0”
        Maximum=“100”
        VerticalOptions="CenterAndExpand" />

Stepper

允許從累加範圍選取 double 值。Stepper 的螢幕快照

API / 指南		 
<Stepper Minimum=“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" />

編輯文字的檢視

檢視 範例

Entry

允許輸入和編輯單行文字。

項目螢幕快照

API / 指南		 <
<Entry Keyboard=“Email”
       Placeholder=“輸入電子郵件位址”
       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

使用不同的配置規格，顯示可選取資料項的可捲動清單。

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 / 指南		 <
<選擇器標題=“選取猴子”
        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>