Xamarin.Forms Views介绍（一）

以下主要内容摘录于：http://www.jianshu.com/p/efc2f78557c8

   

Views指的就是组成我们App的用户控件，如前面我们频繁用到的Label，由于跨平台因素的影响，Forms并没有为我们提供太多的用户控件。这些控件均继承View。

 

Label使用

Label用来显示文本内容。

常用属性介绍：

Text ：Label显示的文本内容。

FontSize ：Label显示的文本字体大小，double值或者特殊的字符串值（Default、Micro、Small、Medium、Large）。

FontSize 设置为NamedSize枚举时，会根据不同平台选择效果最佳的一个值。Xaml中指定对应的枚举字符串,代码中设置label.FontSize=Device.GetNamedSize(NamedSize.Large,typeof(Label));, Device.GetNamedSize返回各个平台对应ElementType的合适值。

TextColor ：Label显示的文本颜色。

BackgroundColor ：Label背景色。

FontAttributes ：Label显示的文本样式（加粗、斜体）。

FontAttributes枚举

LineBreakMode ：Label显示的文本换行模式,默认为WordWrap。

public enum LineBreakMode
{
  NoWrap, //不换行，超出部分隐藏
  WordWrap,//单词为单位换行
  CharacterWrap,//字符换行，即会出现单词隔断现象
  HeadTruncation,//头部截断，省略头部文本以...代替
  TailTruncation,//尾部截断
  MiddleTruncation//中间截断
}

FormattedText ：FormattedString类型，可以对一个Label设置多段不同样式文本。

使用示例：

C#方式

            new Label
            {
                Text = "Hello from Code!",
                IsVisible = true,
                Opacity = 0.75,
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                TextColor = Color.Blue,
                BackgroundColor = Color.FromRgb(255, 128, 128),
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                FontAttributes = FontAttributes.Bold | FontAttributes.Italic

            };

XAML方式

  <Label Text="Hello from XAML!"
    IsVisible="True"
    Opacity="0.75"
    HorizontalTextAlignment="Center"
    VerticalOptions="CenterAndExpand"
    TextColor="Blue"
    BackgroundColor="#FF8080"
    FontSize="Large"

    FontAttributes="Bold,Italic" />

效果图：

Entry使用

Entry单行文本录入控件，适合简短信息录入，如登录界面的用户名和密码。

常用属性：

Text ：Entry内的文本内容。

TextColor ：Entry文本颜色。

Placeholder ：占位符，Text为空时显示。

PlaceholderColor ：占位符颜色。

IsPassword ：是否为密码格式，默认false，设置true时输入内容以密码格式显示。

Keyboard ：软键盘类型。

Keyboard类提供的静态属性

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

WidthRequest ：设置控件宽度，HorizontalOptions="Fill"时无效 ，同理HeightRequest。

InputTransparent ：是否接受用户输入。默认false，设置true时，控件接收用户输入时不做响应，传递父控件处理。

使用示例：

<Entry x:Name="entry"
    Text="Entry内文本"
    TextColor="Fuchsia"
    Placeholder="录入数据"
    PlaceholderColor="Green"
    IsPassword="true"
    Keyboard="Telephone"
    InputTransparent="false"
    WidthRequest="200"
    VerticalOptions="Start"

    HorizontalOptions="Center"/>

效果图：

常用事件：

Focused ：控件获取焦点时触发，定义在VisualElement中的事件。

Unfocused ：控件失去焦点时触发，定义在VisualElement中的事件。

SizeChanged ：控件大小改变，定义在VisualElement中的事件。

Completed ：用户录入结束时出发（IOS用户按下Done键，Android，Windows Phone用户点击回车键或者物理键盘返回）。

TextChanged ：Entry文本改变时触发。

以Completed事件为例：

在CS文件中定义一个方法：

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

接下来就是将定义的方法与Entry的Completed事件绑定。

Xaml 方式绑定事件，设置Entry的Completed属性Completed="Entry_Completed"。

代码方式绑定事件代码 entry.Completed+=Entry_Completed;

也可以省略方法的定义，借助Lambda表达式（我用的这个方法）：

            entry.Completed += (sender, e) => {

                //add your code

            };

其它事件同理，区别在于第二个参数可能是EventArgs的子类以传递更多的信息。

 

Editor使用

Editor同样作为一个用户输入控件使用，与Entry不同Editor允许输入多行数据。

使用事例：

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

Editor使用与Entry相似。不同的是Completed事件的触发，Editor中回车键文本换行并不会触发Completed事件。

 

BoxView使用

定义一个带有颜色的矩形，默认大小40*40,自定义大小可以通过WidthRequest和HeightRequest设置BoxView的大小。除此之外还不知道这东西有什么用...

<BoxView
     Color="Blue"
     VerticalOptions="Center"
     HorizontalOptions="Center"/>