Xamarin XAML语言教程ContentView视图作为自定义视图的父类

Xamarin XAML语言教程ContentView视图作为自定义视图的父类

自定义视图的父类：ContentView视图可以作为自定义视图的父类。

【示例14-2】以下将自定义一个颜色视图。具体的操作步骤如下：

（1）创建一个Forms Xaml View文件，命名为ColorView。

（2）打开ColorView.xaml文件，编写代码，构建自定义颜色视图。代码如下：

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="ContentViewCustomControls.ColorView">

WidthRequest="70"

HeightRequest="70" />

FontSize="Large"

VerticalOptions="CenterAndExpand" />

VerticalOptions="CenterAndExpand" />

（3）打开ColorView.xaml.cs文件，编写代码，实现一些与颜色视图相关的属性。代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace ContentViewCustomControls

{

public partial class ColorView : ContentView

{

string colorName;

ColorTypeConverter colorTypeConv = new ColorTypeConverter();

public ColorView()

{

InitializeComponent();

}

//颜色名称

public string ColorName

{

set

{

colorName = value;

colorNameLabel.Text = value;

Color color = (Color)colorTypeConv.ConvertFromInvariantString(colorName);

boxView.Color = color;

colorValueLabel.Text = String.Format("{0:X2}-{1:X2}-{2:X2}",

(int)(255 * color.R),

(int)(255 * color.G),

(int)(255 * color.B));

}

get

{

return colorName;

}

}

}

}

（4）打开MainPage.xaml文件，编写代码，通过颜色视图实现对内容页面的布局。代码如下：

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:ContentViewCustomControls"

x:Class="ContentViewCustomControls.MainPage">

iOS="0, 20, 0, 0" />

此时运行程序，会看到如图14.10~14.11所示的效果。

（5）构建更复杂的布局模式：在ContentView中可以包含视图，还可以包括布局，从而构建更为复杂的布局模式。