控制項
.NET 多平臺應用程式 UI (.NET MAUI) 應用程式的使用者介面是由對應至每個目標平臺原生控件的物件所建構。
用來建立 .NET MAUI 應用程式使用者介面的主要控件群組是頁面、版面配置和檢視。 .NET MAUI 頁面通常會佔用全螢幕或視窗。 頁面通常包含一個版面配置,其中包含檢視和其他版面配置。 頁面、版面配置和檢視衍生自 VisualElement 類別。 這個類別提供各種屬性、方法和事件,這些屬性、方法和事件在衍生類別中很有用。
頁面
.NET MAUI 應用程式包含一或多個頁面。 頁面通常會佔用所有畫面或視窗,而且每個頁面通常至少包含一個版面配置。
.NET MAUI 包含下列頁面:
頁面 | 描述 |
---|---|
ContentPage | ContentPage 會顯示單一檢視,而且是最常見的頁面類型。 如需詳細資訊,請參閱 ContentPage。 |
FlyoutPage | FlyoutPage 是管理兩個相關信息頁面的頁面 – 一個顯示專案的飛出視窗頁面,以及顯示飛出視窗頁面上專案詳細數據的詳細數據頁面。 如需詳細資訊,請參閱 FlyoutPage。 |
NavigationPage | NavigationPage 提供階層式導覽體驗,讓您能夠視需要瀏覽頁面、向前和向後流覽。 如需詳細資訊,請參閱 NavigationPage。 |
TabbedPage | TabbedPage 由一系列頁面所組成,這些頁面會透過頁面頂端或底部的索引標籤巡覽,每個索引標籤都會載入頁面內容。 如需詳細資訊,請參閱 TabbedPage。 |
版面配置
.NET MAUI 版面配置可用來將使用者介面控件撰寫成視覺結構,而且每個版面配置通常包含多個檢視。 版面配置類別通常包含邏輯來設定子專案的位置和大小。
.NET MAUI 包含下列版面配置:
版面配置 | 描述 |
---|---|
AbsoluteLayout | AbsoluteLayout 將子專案放置在相對於其父系的特定位置。 如需詳細資訊,請參閱 AbsoluteLayout。 |
BindableLayout | BindableLayout 可讓任何版面配置類別藉由系結至專案集合來產生其內容,以及設定每個專案外觀的選項。 如需詳細資訊,請參閱 BindableLayout。 |
FlexLayout | FlexLayout 可讓其子系以不同的對齊和方向選項來堆疊或包裝。 FlexLayout 是以 CSS 彈性方塊配置模組為基礎,稱為 彈性版面配置 或 彈性方塊。 如需詳細資訊,請參閱 FlexLayout。 |
Grid | Grid 將其子專案放置在數據列和數據行的方格中。 如需詳細資訊,請參閱 方格。 |
HorizontalStackLayout | HorizontalStackLayout 將子專案放置在水平堆疊中。 如需詳細資訊,請參閱 HorizontalStackLayout。 |
StackLayout | StackLayout 將子專案放置在垂直或水平堆疊中。 如需詳細資訊,請參閱 StackLayout。 |
VerticalStackLayout | VerticalStackLayout 將子專案放置在垂直堆疊中。 如需詳細資訊,請參閱 VerticalStackLayout。 |
檢視
.NET MAUI 檢視是 UI 物件,例如標籤、按鈕和滑桿,通常稱為 其他環境中的控件 或 小工具 。
.NET MAUI 包含下列檢視:
檢視 | 描述 |
---|---|
ActivityIndicator | ActivityIndicator 會使用動畫來顯示應用程式從事冗長的活動,而不提供任何進度指示。 如需詳細資訊,請參閱 ActivityIndicator。 |
BlazorWebView | BlazorWebView 可讓您在 .NET MAUI 應用程式中裝載 Blazor Web 應用程式。 如需詳細資訊,請參閱 BlazorWebView。 |
Border | Border 是容器控件,會在另一個控件周圍繪製框線、背景或兩者。 如需詳細資訊,請參閱 框線。 |
BoxView | BoxView 繪製指定寬度、高度和色彩的矩形或正方形。 如需詳細資訊,請參閱 BoxView。 |
Button | Button 顯示文字並回應點選或按兩下,指示應用程式執行工作。 如需詳細資訊,請參閱 按鈕。 |
CarouselView | CarouselView 會顯示可捲動的數據項清單,讓使用者撥動以移動集合。 如需詳細資訊,請參閱 CarouselView。 |
CheckBox | CheckBox 可讓您使用可以檢查或空白的按鈕類型來選取布爾值。 如需詳細資訊,請參閱 CheckBox。 |
CollectionView | CollectionView 會使用不同的版面配置規格,顯示可選取資料項的可捲動清單。 如需詳細資訊,請參閱 CollectionView。 |
ContentView | ContentView 是一個控件,可讓您建立自定義、可重複使用的控件。 如需詳細資訊,請參閱 ContentView。 |
DatePicker | DatePicker 可讓您使用平臺日期選擇器來選取日期。 如需詳細資訊,請參閱 DatePicker。 |
Editor | Editor 可讓您輸入和編輯多行文字。 如需詳細資訊,請參閱 編輯器。 |
Ellipse | Ellipse 會顯示橢圓形或圓形。 如需詳細資訊,請參閱 Ellipse。 |
Entry | Entry 可讓您輸入和編輯單行文字。 如需詳細資訊,請參閱 Entry。 |
Frame | Frame 是用來以色彩、陰影和其他選項設定的框線來包裝檢視或版面配置。 如需詳細資訊,請參閱 Frame。 |
GraphicsView | GraphicsView 是圖形畫布,可使用命名空間中的 Microsoft.Maui.Graphics 類型繪製 2D 圖形。 如需詳細資訊,請參閱 GraphicsView。 |
Image | Image 會顯示可從本機檔案、URI、內嵌資源或數據流載入的影像。 如需詳細資訊,請參閱 影像。 |
ImageButton | ImageButton 顯示影像並回應點選或按兩下以指示應用程式執行工作。 如需詳細資訊,請參閱 ImageButton。 |
IndicatorView | IndicatorView 顯示表示 中 CarouselView項目數的指標。 如需詳細資訊,請參閱 IndicatorView。 |
Label | Label 會顯示單行和多行文字。 如需詳細資訊,請參閱 標籤。 |
Line | Line 顯示從起點到結束點的線條。 如需詳細資訊,請參閱 行。 |
ListView | ListView 會顯示可選取資料項的可捲動清單。 如需詳細資訊,請參閱 ListView。 |
Map | Map 會顯示地圖,而且需要 在您的應用程式中安裝 Microsoft.Maui.Controls.Maps NuGet 套件。 |
Path | Path 顯示曲線和複雜的圖形。 如需詳細資訊,請參閱 路徑。 |
Picker | Picker 會顯示項目的簡短清單,您可以從中選取專案。 如需詳細資訊,請參閱 選擇器。 |
Polygon | Polygon 顯示多邊形。 如需詳細資訊,請參閱 多邊形。 |
Polyline | Polyline 會顯示一系列連接的直線。 如需詳細資訊,請參閱 Polyline。 |
ProgressBar | ProgressBar 會使用動畫來顯示應用程式正透過冗長的活動進行。 如需詳細資訊,請參閱 ProgressBar。 |
RadioButton | RadioButton 是一種按鈕類型,允許從集合中選取一個選項。 如需詳細資訊,請參閱 RadioButton。 |
Rectangle | Rectangle 會顯示矩形或正方形。 如需詳細資訊,請參閱 Rectangle。 |
RefreshView | RefreshView 是容器控件,可提供可捲動內容的提取重新整理功能。 如需詳細資訊,請參閱 RefreshView。 |
RoundRectangle | RoundRectangle 顯示具有圓角的矩形或正方形。 如需詳細資訊,請參閱 Rectangle。 |
ScrollView | ScrollView 提供其內容的捲動,通常是版面配置。 如需詳細資訊,請參閱 ScrollView。 |
SearchBar | SearchBar 是用來起始搜尋的使用者輸入控件。 如需詳細資訊,請參閱 SearchBar。 |
Slider | Slider 可讓您從連續範圍選取 double 值。 如需詳細資訊,請參閱 滑桿。 |
Stepper | Stepper 可讓您從增量值範圍中選取 double 值。 如需詳細資訊,請參閱 Stepper。 |
SwipeView | SwipeView 是包裝內容專案的容器控件,並提供撥動手勢所顯示的內容功能表項。 如需詳細資訊,請參閱 SwipeView。 |
Switch | Switch 可讓您使用可開啟或關閉的按鈕類型來選取布爾值。 如需詳細資訊,請參閱 Switch。 |
TableView | TableView 會顯示可捲動項目的數據表,可分組為區段。 如需詳細資訊,請參閱 TableView。 |
TimePicker | TimePicker 可讓您使用平台時間選擇器來選取時間。 如需詳細資訊,請參閱 TimePicker。 |
TwoPaneView | TwoPaneView 表示具有兩個檢視的容器,其大小和位置在可用空間中,並排或由上至下。 如需詳細資訊,請參閱 TwoPaneView。 |
WebView | WebView 會顯示網頁或本機 HTML 內容。 如需詳細資訊,請參閱 WebView。 |
檢視 | 描述 |
---|---|
ActivityIndicator | ActivityIndicator 會使用動畫來顯示應用程式從事冗長的活動,而不提供任何進度指示。 如需詳細資訊,請參閱 ActivityIndicator。 |
BlazorWebView | BlazorWebView 可讓您在 .NET MAUI 應用程式中裝載 Blazor Web 應用程式。 如需詳細資訊,請參閱 BlazorWebView。 |
Border | Border 是容器控件,會在另一個控件周圍繪製框線、背景或兩者。 如需詳細資訊,請參閱 框線。 |
BoxView | BoxView 繪製指定寬度、高度和色彩的矩形或正方形。 如需詳細資訊,請參閱 BoxView。 |
Button | Button 顯示文字並回應點選或按兩下,指示應用程式執行工作。 如需詳細資訊,請參閱 按鈕。 |
CarouselView | CarouselView 會顯示可捲動的數據項清單,讓使用者撥動以移動集合。 如需詳細資訊,請參閱 CarouselView。 |
CheckBox | CheckBox 可讓您使用可以檢查或空白的按鈕類型來選取布爾值。 如需詳細資訊,請參閱 CheckBox。 |
CollectionView | CollectionView 會使用不同的版面配置規格,顯示可選取資料項的可捲動清單。 如需詳細資訊,請參閱 CollectionView。 |
ContentView | ContentView 是一個控件,可讓您建立自定義、可重複使用的控件。 如需詳細資訊,請參閱 ContentView。 |
DatePicker | DatePicker 可讓您使用平臺日期選擇器來選取日期。 如需詳細資訊,請參閱 DatePicker。 |
Editor | Editor 可讓您輸入和編輯多行文字。 如需詳細資訊,請參閱 編輯器。 |
Ellipse | Ellipse 會顯示橢圓形或圓形。 如需詳細資訊,請參閱 Ellipse。 |
Entry | Entry 可讓您輸入和編輯單行文字。 如需詳細資訊,請參閱 Entry。 |
Frame | Frame 是用來以色彩、陰影和其他選項設定的框線來包裝檢視或版面配置。 如需詳細資訊,請參閱 Frame。 |
GraphicsView | GraphicsView 是圖形畫布,可使用命名空間中的 Microsoft.Maui.Graphics 類型繪製 2D 圖形。 如需詳細資訊,請參閱 GraphicsView。 |
HybridWebView | HybridWebView 可讓您在網頁檢視中裝載任意 HTML/JS/CSS 內容,並啟用 Web 檢視中程式代碼 (JavaScript) 與裝載 Web 檢視的程式代碼之間的通訊 (C#/.NET)。 如需詳細資訊,請參閱 HybridWebView。 |
Image | Image 會顯示可從本機檔案、URI、內嵌資源或數據流載入的影像。 如需詳細資訊,請參閱 影像。 |
ImageButton | ImageButton 顯示影像並回應點選或按兩下以指示應用程式執行工作。 如需詳細資訊,請參閱 ImageButton。 |
IndicatorView | IndicatorView 顯示表示 中 CarouselView項目數的指標。 如需詳細資訊,請參閱 IndicatorView。 |
Label | Label 會顯示單行和多行文字。 如需詳細資訊,請參閱 標籤。 |
Line | Line 顯示從起點到結束點的線條。 如需詳細資訊,請參閱 行。 |
ListView | ListView 會顯示可選取資料項的可捲動清單。 如需詳細資訊,請參閱 ListView。 |
Map | Map 會顯示地圖,而且需要 在您的應用程式中安裝 Microsoft.Maui.Controls.Maps NuGet 套件。 |
Path | Path 顯示曲線和複雜的圖形。 如需詳細資訊,請參閱 路徑。 |
Picker | Picker 會顯示項目的簡短清單,您可以從中選取專案。 如需詳細資訊,請參閱 選擇器。 |
Polygon | Polygon 顯示多邊形。 如需詳細資訊,請參閱 多邊形。 |
Polyline | Polyline 會顯示一系列連接的直線。 如需詳細資訊,請參閱 Polyline。 |
ProgressBar | ProgressBar 會使用動畫來顯示應用程式正透過冗長的活動進行。 如需詳細資訊,請參閱 ProgressBar。 |
RadioButton | RadioButton 是一種按鈕類型,允許從集合中選取一個選項。 如需詳細資訊,請參閱 RadioButton。 |
Rectangle | Rectangle 會顯示矩形或正方形。 如需詳細資訊,請參閱 Rectangle。 |
RefreshView | RefreshView 是容器控件,可提供可捲動內容的提取重新整理功能。 如需詳細資訊,請參閱 RefreshView。 |
RoundRectangle | RoundRectangle 顯示具有圓角的矩形或正方形。 如需詳細資訊,請參閱 Rectangle。 |
ScrollView | ScrollView 提供其內容的捲動,通常是版面配置。 如需詳細資訊,請參閱 ScrollView。 |
SearchBar | SearchBar 是用來起始搜尋的使用者輸入控件。 如需詳細資訊,請參閱 SearchBar。 |
Slider | Slider 可讓您從連續範圍選取 double 值。 如需詳細資訊,請參閱 滑桿。 |
Stepper | Stepper 可讓您從增量值範圍中選取 double 值。 如需詳細資訊,請參閱 Stepper。 |
SwipeView | SwipeView 是包裝內容專案的容器控件,並提供撥動手勢所顯示的內容功能表項。 如需詳細資訊,請參閱 SwipeView。 |
Switch | Switch 可讓您使用可開啟或關閉的按鈕類型來選取布爾值。 如需詳細資訊,請參閱 Switch。 |
TableView | TableView 會顯示可捲動項目的數據表,可分組為區段。 如需詳細資訊,請參閱 TableView。 |
TimePicker | TimePicker 可讓您使用平台時間選擇器來選取時間。 如需詳細資訊,請參閱 TimePicker。 |
TwoPaneView | TwoPaneView 表示具有兩個檢視的容器,其大小和位置在可用空間中,並排或由上至下。 如需詳細資訊,請參閱 TwoPaneView。 |
WebView | WebView 會顯示網頁或本機 HTML 內容。 如需詳細資訊,請參閱 WebView。 |