C#使用Xamarin開發可移植移動應用(3.Xamarin.Views控件)附源碼

原文: C#使用Xamarin開發可移植移動應用(3.Xamarin.Views控件)附源碼

前言

系列目錄

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