注意
這本書於2016年春季出版,此後一直沒有更新。 這本書中有很多仍然有價值,但一些材料已經過時,有些主題不再完全正確或完整。
本章探討允許與用戶互動的八 View 個衍生專案。
檢視概觀
Xamarin.Forms 包含衍生自 View 但不是 Layout的20個可具現化類別。 前幾章已涵蓋其中六個:
Label: 第 2 章。應用程式的剖析BoxView: 第 3 章。捲動堆疊Button: 第六章。按鈕點選Image: 第 13 章。點陣圖ActivityIndicator: 第 13 章。點陣圖ProgressBar: 第 14 章。AbsoluteLayout
本章中的八個檢視可有效地讓使用者與基本 .NET 數據類型互動:
| 資料類型 | 檢視 |
|---|---|
Double |
Slider, Stepper |
Boolean |
Switch |
String |
Entry、 、 EditorSearchBar |
DateTime |
DatePicker, TimePicker |
您可以將這些檢視視為基礎數據類型的視覺互動式表示法。 本概念會在下一章第 16 章中進一步探討。數據系結。
其餘六個檢視涵蓋在下列章節中:
WebView: 第 16 章。數據系結Picker: 第 19 章。集合檢視ListView: 第 19 章。集合檢視TableView: 第 19 章。集合檢視Map: 第 28 章。位置和地圖OpenGLView:本書未涵蓋 (不支援 Windows 平臺)
滑桿和逐步執行程式
Slider和 Stepper 都允許使用者從範圍中選擇數值。 Slider是連續範圍,Stepper而 牽涉到離散值。
滑桿基本概念
Slider是水平橫條,代表從左邊的最小值到右邊最大值的值範圍。 它會定義三個公用屬性:
備份這些屬性的可系結屬性可確保它們一致:
- 針對這三個屬性,
coerceValue針對可系結屬性指定的 方法可確保 介於Value和Maximum之間Minimum。 - 如果
Minimum設定為大於或等於Maximum的值,且 與MaximumProperty類似,則validateValue傳回false的方法MinimumProperty。 從validateValue方法傳false回會導致ArgumentException引發 。
SliderValueChanged以程序設計方式或使用者操作 Slider時Value,以自變數引發 事件。ValueChangedEventArgs
SliderDemo 範例示範 的簡單用法Slider。
常見陷阱
在程式代碼和 XAML 中, Minimum 和 Maximum 屬性都是以您指定的順序來設定。 請務必初始化這些屬性, Maximum 這樣一律大於 Minimum。 否則將會引發例外狀況。
初始化 Slider 屬性可能會導致 Value 屬性變更,並 ValueChanged 引發 事件。 您應該確定 Slider 事件處理程式無法存取頁面初始化期間尚未建立的檢視。
除非屬性變更,Value否則在ValueChanged初始化期間Slider不會引發事件。 您可以直接從程式代碼呼叫 ValueChanged 處理程式。
滑桿色彩選取
RgbSliders 程式包含三Slider個元素,可讓您藉由指定其 RGB 值,以互動方式選取色彩:
TextFade 範例會使用兩Slider個元素,將兩Label個元素移過 ,AbsoluteLayout並將一個元素淡入另一個元素。
Stepper 差異
Stepper會定義與 相同的屬性和事件Slider,但 Maximum 屬性會初始化為100,並Stepper定義第四個屬性:
Increment型double別 的 ,初始化為1
在視覺上,Stepper是由兩個標示為 和+的按鈕所組成。 按 – 將 減少ValueIncrement為 最小值Minimum。 按下 + 會增加IncrementValue為 最大值Maximum。
此步驟是由 StepperDemo 範例所示範。
Switch 和 CheckBox
Switch可讓使用者指定布爾值。
參數基本概念
以可視化方式, Switch 由可關閉和開啟的切換所組成。 類別會定義屬性:
- 型別
IsToggled的bool
Switch 定義事件:
Toggled由ToggledEventArgs物件所伴隨,當IsToggled屬性變更時引發。
SwitchDemo 程式示範 Switch。
傳統 CheckBox
有些開發人員可能會偏好較傳統的 CheckBox Switch。 Book.Toolkit 連結Xamarin.Forms庫包含CheckBox衍生自 ContentView的類別。 CheckBox 是由 CheckBox.xaml 和 CheckBox.xaml.cs 檔案實作 。 CheckBox定義三個CheckedChanged屬性 (Text、 FontSize和 IsChecked) 和事件。
CheckBoxDemo 範例會示範這個 CheckBox。
鍵入文字
Xamarin.Forms 定義三個檢視,讓使用者輸入和編輯文字:
Entry 和 Editor 衍生自 InputView,其衍生自 View。 SearchBar 直接衍生自 View。
鍵盤和焦點
在沒有實體鍵盤的 Entry手機和平板電腦上,、 Editor和 SearchBar 元素都會導致虛擬鍵盤彈出。 螢幕上此鍵盤的存在與輸入焦點有關。 檢視必須同時將 和 IsVisible IsEnabled 屬性設定為 , true 才能取得輸入焦點。
兩種方法、一個唯讀屬性和兩個事件都涉及輸入焦點。 這些都是由 所 VisualElement定義:
- 方法
Focus會嘗試將輸入焦點設定為專案,並在成功時傳true回 - 方法
Unfocus會從專案移除輸入焦點 IsFocused唯讀屬性會指出元素是否有輸入焦點- 事件
Focused指出專案何時取得輸入焦點 - 事件
Unfocused指出元素何時失去輸入焦點
選擇鍵盤
與 InputView Editor 衍生類別 Entry 只會定義屬性:
這表示顯示的鍵盤類型。 某些鍵盤已針對 URI 或數位進行優化。
類別Keyboard允許使用具有 類型KeyboardFlags自變數的靜態Keyboard.Create方法定義鍵盤,其列舉具有下列位旗標:
None設定為 0CapitalizeSentence設定為 1Spellcheck設定為 2Suggestions設定為 4All設定為 \xFFFFFFFFFF
當預期段落或更多文字時使用多行 Editor 時,呼叫 Keyboard.Create 是選取鍵盤的好方法。 對於單行 Entry,下列靜態只讀屬性 Keyboard 很有用:
KeyboardTypeConverter允許在 XAML 中指定這些屬性,如 EntryKeyboards 程式所示。
項目屬性和事件
單行 Entry 會定義下列屬性:
Text型string別為 ,出現在中的文字Entry- 型別
TextColor的Color - 型別
FontFamily的string - 型別
FontSize的double - 型別
FontAttributes的FontAttributes IsPassword型bool別 為 ,導致字元遮罩Placeholder型string別 為 ,針對在Entry輸入任何專案之前出現的暗色文字- 型別
PlaceholderColor的Color
Entry也會定義兩個事件:
TextChangedTextChangedEventArgs具有物件,每當屬性變更時Text引發Completed,會在使用者完成且鍵盤關閉時引發。 使用者會以平臺特定方式指出完成
QuadraticEquations 範例示範這兩個事件。
編輯器差異
多行 Editor 會定義與 相同的 Text 和 Font 屬性 Entry ,但不會定義其他屬性。 Editor 也會定義與 Entry相同的兩個屬性。
JustNotes 是一個自由格式的記事程式,可儲存及還原 的內容 Editor。
The SearchBar
SearchBar不會衍生自 InputView,因此沒有 Keyboard 屬性。 但它確實具有定義的所有 Text、 Font和 Placeholder 屬性 Entry 。 此外, SearchBar 定義三個額外的屬性:
- 型別
CancelButtonColor的Color SearchCommand型ICommand別用於數據系結和MVVMSearchCommandParameter型Object別 為 ,以便與 搭配使用SearchCommand
平臺特定的取消按鈕會清除文字。 SearchBar也有平臺特定的搜尋按鈕。 按下其中一個按鈕會引發兩個定義的事件 SearchBar 之一:
SearchBarDemo 範例示範 SearchBar。
日期和時間選取
DatePicker和 TimePicker 檢視會實作平臺特定的控件,讓使用者指定日期或時間。
The DatePicker
DatePicker 定義四個屬性:
MinimumDate型DateTime別 ,初始化為 1900 年 1 月 1 日MaximumDate型DateTime別 ,初始化為 2100 年 12 月 31 日Date型DateTime別的 ,初始化為DateTime.TodayFormat類型string為,初始化為 「d」 的 .NET 格式字串,即簡短日期模式,導致美國顯示日期,例如 “7/20/1969”。
您可以在 DateTime XAML 中設定屬性,方法是將屬性表示為屬性元素,並使用不因文化特性而異的簡短日期格式 (“7/20/1969” )。
DaysBetweenDates 範例會計算用戶所選取兩個日期之間的天數。
TimePicker (還是 TimeSpanPicker?)
TimePicker 定義兩個屬性,而且沒有事件:
Time的類型TimeSpan不是DateTime,表示自午夜以來經過的時間Format型string別為 的 .NET 格式字串初始化為 “t”,這是短時間模式,導致美國時間顯示如 “1:45 PM”。
SetTimer 程式示範如何使用 TimePicker 來指定定時器的時間。 只有在您將程式保留在前景時,才能運作。
SetTimer 也會示範如何使用 DisplayAlert 的 方法來 Page 顯示警示方塊。
