Xamarin.Forms Views介紹(一)

Views指的就是組成我們App的用戶控件,如前面我們頻繁用到的Label,由于跨平臺(tái)因素的影響,F(xiàn)orms并沒(méi)有為我們提供太多的用戶控件。這些控件均繼承View。


Label使用

Label用來(lái)顯示文本內(nèi)容。

常用屬性介紹:

  • Text :Label顯示的文本內(nèi)容。
  • FontSize :Label顯示的文本字體大小,double值或者特殊的字符串值(Default、Micro、Small、Medium、Large)。

FontSize 設(shè)置為NamedSize枚舉時(shí),會(huì)根據(jù)不同平臺(tái)選擇效果最佳的一個(gè)值。Xaml中指定對(duì)應(yīng)的枚舉字符串,代碼中設(shè)置label.FontSize=Device.GetNamedSize(NamedSize.Large,typeof(Label));, Device.GetNamedSize返回各個(gè)平臺(tái)對(duì)應(yīng)ElementType的合適值。

  • TextColor :Label顯示的文本顏色。
  • BackgroundColor :Label背景色。
  • FontAttributes :Label顯示的文本樣式(加粗、斜體)。
    FontAttributes枚舉
  • LineBreakMode :Label顯示的文本換行模式,默認(rèn)為WordWrap。
public enum LineBreakMode
{
    NoWrap, //不換行,超出部分隱藏
    WordWrap,//單詞為單位換行
    CharacterWrap,//字符換行,即會(huì)出現(xiàn)單詞隔斷現(xiàn)象
    HeadTruncation,//頭部截?cái)?,省略頭部文本以...代替
    TailTruncation,//尾部截?cái)?    MiddleTruncation//中間截?cái)?}
  • FormattedTextFormattedString類型,可以對(duì)一個(gè)Label設(shè)置多段不同樣式文本。
    使用示例:
<Label VerticalOptions="Center" HorizontalOptions="Center" >
    <Label.FormattedText>
        <FormattedString>
          <FormattedString.Spans>
              <Span Text="Red Bold" ForegroundColor="Red" FontAttributes="Bold" />
                <Span Text="Default" />
                <Span Text="italic small" FontAttributes="Italic" FontSize="Small" />
            </FormattedString.Spans>
    </FormattedString>
    </Label.FormattedText>
</Label>
FormattedString使用效果圖

示例中涉及到了兩個(gè)屬性節(jié)點(diǎn)Label.FormattedTextFormattedString.Spans,顯得代碼冗長(zhǎng),可以刪除FormattedString.Spans節(jié)點(diǎn),只保留節(jié)點(diǎn)內(nèi)元素,顯示同樣效果。

FormattedString 定義

FormattedString定義時(shí)添加了ContentProperty特性,指示內(nèi)容屬性,對(duì)于內(nèi)容屬性在XAML中以節(jié)點(diǎn)屬性方式使用時(shí)可以省略對(duì)應(yīng)的屬性節(jié)點(diǎn)直接設(shè)置內(nèi)容元素。

Label使用示例:

<Label Text="Welcome to Xamarin Forms!
                Welcome to Xamarin Forms!
                Welcome to Xamarin Forms!
                Welcome to Xamarin Forms!
                Welcome to Xamarin Forms!
                Welcome to Xamarin Forms!" 
        FontAttributes="Bold"
        TextColor="Silver"
        BackgroundColor="Aqua"
        FontSize="Small"
        LineBreakMode="WordWrap"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />

效果圖:

Label示例

Entry使用

Entry單行文本錄入控件,適合簡(jiǎn)短信息錄入,如登錄界面的用戶名和密碼。

常用屬性:

  • Text :Entry內(nèi)的文本內(nèi)容。

  • TextColor :Entry文本顏色。

  • Placeholder :占位符,Text為空時(shí)顯示。

  • PlaceholderColor :占位符顏色。

  • IsPassword :是否為密碼格式,默認(rèn)false,設(shè)置true時(shí)輸入內(nèi)容以密碼格式顯示。

  • Keyboard :軟鍵盤(pán)類型。

    Keyboard類提供的靜態(tài)屬性

    更多信息參考:https://developer.xamarin.com/recipes/cross-platform/xamarin-forms/controls/choose-keyboard-for-entry/

  • WidthRequest :設(shè)置控件寬度,HorizontalOptions="Fill"時(shí)無(wú)效 ,同理HeightRequest。

  • InputTransparent :是否接受用戶輸入。默認(rèn)false,設(shè)置true時(shí),控件接收用戶輸入時(shí)不做響應(yīng),傳遞父控件處理。

使用示例:

<Entry 
    Text="Entry內(nèi)文本"
    TextColor="Fuchsia"
    Placeholder="錄入數(shù)據(jù)"
    PlaceholderColor="Green"
    IsPassword="true"
    Keyboard="Telephone"
    InputTransparent="false"
    WidthRequest="200"
    VerticalOptions="Start"
    HorizontalOptions="Center"/>

效果圖:

常用事件:

  • Focused :控件獲取焦點(diǎn)時(shí)觸發(fā),定義在VisualElement中的事件。
  • Unfocused :控件失去焦點(diǎn)時(shí)觸發(fā),定義在VisualElement中的事件。
  • SizeChanged :控件大小改變,定義在VisualElement中的事件。
  • Completed :用戶錄入結(jié)束時(shí)出發(fā)(IOS用戶按下Done鍵,Android,Windows Phone用戶點(diǎn)擊回車鍵或者物理鍵盤(pán)返回)。
  • TextChanged :Entry文本改變時(shí)觸發(fā)。

以Completed事件為例:
在CS文件中定義一個(gè)方法:

void Entry_Completed(object sender, EventArgs e)
{
    var entry = (Entry)sender;
    ...
}

接下來(lái)就是將定義的方法與Entry的Completed事件綁定。

Xaml 方式綁定事件,設(shè)置Entry的Completed屬性Completed="Entry_Completed"。
代碼方式綁定事件代碼 entry.Completed+=Entry_Completed;

也可以省略方法的定義,借助Lambda表達(dá)式:

entry.Completed += (sender, e) => {
    var entry = (Entry)sender;
};

其它事件同理,區(qū)別在于第二個(gè)參數(shù)可能是EventArgs的子類以傳遞更多的信息。


Editor使用

Editor同樣作為一個(gè)用戶輸入控件使用,與Entry不同Editor允許輸入多行數(shù)據(jù)。

使用事例:

<Editor VerticalOptions="Start"
    HeightRequest="200" 
    BackgroundColor="Gray"
    TextColor="Red" />

運(yùn)行效果:

Editor效果

Editor使用與Entry相似。不同的是Completed事件的觸發(fā),Editor中回車鍵文本換行并不會(huì)觸發(fā)Completed事件。


BoxView使用

定義一個(gè)帶有顏色的矩形,默認(rèn)大小40*40,自定義大小可以通過(guò)WidthRequestHeightRequest設(shè)置BoxView的大小。除此之外還不知道這東西有什么用...

<BoxView Color="Blue" VerticalOptions="Center" HorizontalOptions="Center"/>
默認(rèn)大小Boxview
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,645評(píng)論 19 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,176評(píng)論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,426評(píng)論 4 61
  • 考驗(yàn)來(lái)了:在研究女兒上什么學(xué)校的過(guò)程中,我被灌輸了一種自己當(dāng)時(shí)深以為然的說(shuō)法,就是無(wú)論是選公立學(xué)校還是選私立學(xué)校,...
    莉莉俺的路西閱讀 447評(píng)論 0 0
  • 畢業(yè)離開(kāi)學(xué)校近兩個(gè)月。 租了房子,工作轉(zhuǎn)正,買了生活用品。 每天上班下班擠地鐵,人多,擠不上。擠...
    當(dāng)法律與事業(yè)相遇閱讀 287評(píng)論 2 3

友情鏈接更多精彩內(nèi)容