熟悉一些Xamarin前端控制元件（一）
C#使用Xamarin開發可移植移動應用目錄
原始碼地址:https://github.com/l2999019/DemoApp
可以Star一下,隨意 - -
說點什麼..
.NET core2.0 釋出了,刺激,大致看了一下,很不錯,打算後期學習.(不出意外,應該也會寫個小系列).
雖然官方推薦用共享類庫建立新的類庫..然而我這個Demo還是使用的可移植..
嗯..解釋一下 為什麼暫時沒用共享類庫..
有些小BUG 可能是為了迎合其他型別的專案..所以在共享類庫裡建立的Page並不能很好的結合 - - 類似如下:
正常的應該是這樣
呃其實我前面也說過這個,這個解決方案也很簡單..在PCL專案裡建立了..在複製過去..就好了..就是正常的..類似下面:
今天的學習內容?
嗯..今天主要學習Xamarin中的各種原裝控制元件
比較多..你們可以不看..或者隨便看看..我會把這些控制元件的相關屬性都翻譯一下,列出來,就當這是一個控制元件的查詢字典吧..
效果如下:
正文
1.ActivityIndicator
嗯,其實就是一個載入的圈..如圖:
推薦場景..例如下拉重新整理,或者上拉載入的時候,可以顯示出來.
常用屬性:
| 屬性 | 值 |
|---|---|
| Color |
顏色屬性，可以設定顏色 例如，“Color.Red”和“Red”都指定顏色為紅色。 |
| IsRunning |
Bool值,表示這個圈圈是否在轉動. |
示例程式碼:
<ActivityIndicator Color="Red" IsRunning="true" x:Name="Loading" />
2.BoxView
標識一個色塊,作用有點類似於HTML裡面的DIV..嗯 你可以繼承它 做一些自定義的東西.也可以用來填充
常用屬性:
| 屬性 | 值 |
|---|---|
| Color |
顏色屬性，指定色塊的顏色. |
示例程式碼:
<BoxView Color="Red" x:Name="Box" WidthRequest="20" HeightRequest="20" />
3.Button
這..我就不多說了,按鈕..你們懂的
常用屬性:
| 屬性 | 值 |
|---|---|
| BorderColor |
邊框顏色. |
| BorderRadius
|
設定邊框的圓角 |
| BorderWidth | 邊框寬度 |
| Command | 命令,獲取或設定啟用該按鈕時要呼叫的命令。這是一個可繫結的屬性。 |
| CommandParameter | 命令引數,獲取或設定要傳遞給Command屬性的引數。這是一個可繫結的屬性。 |
| ContentLayout | 獲取或設定一個物件來控制按鈕影象的位置以及按鈕影象與按鈕文字之間的間距。 |
| Font | 獲取或設定標籤文字的字型。這是一個可繫結的屬性。 |
| FontAttributes | 獲取一個值，該值指示按鈕文字的字型是粗體還是斜體. |
| FontFamily | 獲取按鈕文字的字型所屬的字型. |
| FontSize | 獲取或設定按鈕文字的字型大小。 |
| Image | 獲取或設定按鈕中顯示在文字旁邊的影象。這是一個可繫結的屬性。 |
| Text | 獲取或設定顯示為按鈕內容的文字。這是一個可繫結的屬性。 |
| TextColor | 獲取或設定按鈕文字的顏色。這是一個可繫結的屬性。 |
| Clicked | 設定按鈕的點選事件 |
示例程式碼:
<Button Text="測試按鈕" TextColor="Red" BackgroundColor="Blue" BorderRadius="10" HeightRequest="80" Clicked="Button_Clicked"/>
4.DatePicker
日期選擇器,提供給使用者選擇日期使用.
常用屬性:
| 屬性 | 值 |
|---|---|
| Format |
指定控制所選日期的顯示格式的字串。如:"yyyy-MM-dd" |
| Date |
設定預設顯示的日期 |
| MinimumDate |
設定最小可選擇的日期 |
| MaximumDate |
設定最大可選擇的日期 |
示例程式碼:
<DatePicker Format="yyyy-MM-dd" TextColor="Blue" x:Name="TimePic" MinimumDate="2015-05-30" />
5.TimePicker
時間選擇器,提供給使用者選擇時間使用.
常用屬性:
| 屬性 | 值 |
|---|---|
| Format |
指定控制所選時間的顯示格式的字串。如:"ss" |
| TextColor |
設定顯示文字的顏色 |
| Time |
設定預設選中的時間 |
示例程式碼:
<TimePicker TextColor="Blue" />
6.Editor
一個文字編輯框,類似於html的textarea
常用屬性:
| 屬性 | 值 |
|---|---|
| FontAttributes |
獲取一個值，該值指示編輯器的字型是粗體，斜體還是不顯示 |
| FontFamily |
獲取編輯器的字型所屬的字型. |
| FontSize |
獲取編輯器的字型大小。 |
| Text |
獲取或設定顯示的文字。這是一個可繫結的屬性。 |
| TextColor | 獲取或設定文字顏色。 |
示例程式碼:
<Editor WidthRequest="50" HeightRequest="200" />
7.Entry
一個文字輸入框,類似於html的input 的text
常用屬性:
| 屬性 | 值 |
|---|---|
| IsPassword |
設定Entry是否為密碼狀態.是則輸入的內容顯示* |
| Placeholder |
設定預設的輸入框灰色提示資訊, |
| Text |
獲取或設定顯示的文字。這是一個可繫結的屬性。 |
| TextColor |
獲取設定字型的顏色 |
示例程式碼:
<Entry Text="內容" />
8.Image
一個圖片控制元件,主要作用就是顯示圖片..
常用屬性:
| 屬性 | 值 |
|---|---|
| Aspect |
獲取或設定影象的縮放模式。這是一個列舉 |
| IsLoading |
獲取影象的載入狀態。(這是一個只讀屬性) |
| IsOpaque |
獲取或設定影象的不透明度標誌。 |
| Source |
獲取或設定影象的源。圖片源有很多種,可以來自於檔案,圖片流,或者URL |
示例程式碼:
<Image Source="icon.png" />
9.Label
顯示文字專用..這個.大家都熟悉..我就不BB了 - -
常用屬性:
| 屬性 | 值 |
|---|---|
| FontAttributes |
獲取一個值，該值指示編輯器的字型是粗體，斜體還是不顯示 |
| FontFamily |
獲取編輯器的字型所屬的字型. |
| FontSize |
字型大小 |
| Text |
文字內容 |
| TextColor | 文字顏色 |
| HorizontalTextAlignment | 獲取或設定Text水平對齊方式。 |
| VerticalTextAlignment | 獲取或設定Text垂直對齊方式。 |
| LineBreakMode | 設定行的排列方式(列舉) |
示例程式碼:
<Label Text="LableText"/>
10.Picker
這個,大家也應該很熟悉,就是HTML的Select, 下拉列表
常用屬性:
| 屬性 | 值 |
|---|---|
| Items |
下拉列表的內容(字串集合) |
| SelectedIndex |
獲取或設定選中值的下標 |
| SelectedItem |
獲取選中值的內容 |
| Title |
設定選擇框的標題 |
示例程式碼:
<Picker x:Name="Pickeritem" Title="adasasdwww"/>
11.ProgressBar
嗯..很簡單..載入進度條.
常用屬性:
| 屬性 | 值 |
|---|---|
| Progress |
設定進度條的載入進度.. 1為滿值 .5為50% |
示例程式碼:
<ProgressBar Progress=".5" />
12.SearchBar
一個搜尋欄
常用屬性:
| 屬性 | 值 |
|---|---|
| CancelButtonColor |
搜尋欄顏色 |
| Placeholder |
搜尋欄為空時的預設文字 |
| SearchCommand |
搜尋命令 |
| Text |
搜尋欄的文字值
|
| SearchButtonPressed |
搜尋欄的搜尋事件 |
示例程式碼:
<SearchBar Text="搜尋" SearchButtonPressed="SearchBar_SearchButtonPressed"/>
13.Slider
一個滑塊..
常用屬性:
| 屬性 | 值 |
|---|---|
| Maximum |
滑塊能選擇的最大值 |
| Minimum |
最小值 |
| Value |
滑塊的值 |
示例程式碼:
<Slider Maximum="50" Minimum="10" Value="10" />
14.Switch
一個開關.
常用屬性:
| 屬性 | 值 |
|---|---|
| IsToggled |
True或False，以指示開關是否已經切換。 |
| Toggled |
開關切換觸發的事件 |
示例程式碼:
<Switch IsToggled="True" Toggled="Switch_Toggled_1">
</Switch>
15.Stepper
一個數值選擇器,
常用屬性:
| 屬性 | 值 |
|---|---|
| Increment |
增量值,就是點選一下,加多少,或者減多少。 |
| Maximum |
最大值 |
| Minimum |
最小值 |
| Value | 預設值 |
| ValueChanged | 值改變觸發的事件 |
示例程式碼:
<Stepper Increment="10" Maximum="100" Minimum="0" Value="20" ValueChanged="Stepper_ValueChanged" />