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

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

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

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

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

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

• <?xml version="1.0" encoding="UTF-8"?>
• <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
• xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
• x:Class="ContentViewCustomControls.ColorView">
• <Frame OutlineColor="Accent">
• <StackLayout Orientation="Horizontal">
• <BoxView x:Name="boxView"
• WidthRequest="70"
• HeightRequest="70" />
• <StackLayout>
• <Label x:Name="colorNameLabel"
• FontSize="Large"
• VerticalOptions="CenterAndExpand" />
• <Label x:Name="colorValueLabel"
• VerticalOptions="CenterAndExpand" />
• </StackLayout>
• </StackLayout>
• </Frame>
• </ContentView>

（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文件，编写代码，通过颜色视图实现对内容页面的布局。代码如下：

• <?xml version="1.0" encoding="utf-8" ?>
• <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
• xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
• xmlns:local="clr-namespace:ContentViewCustomControls"
• x:Class="ContentViewCustomControls.MainPage">
• <ContentPage.Padding>
• <OnPlatform x:TypeArguments="Thickness"
• iOS="0, 20, 0, 0" />
• </ContentPage.Padding>
• <StackLayout Padding="6, 0">
•  <local:ColorView ColorName="Aqua" />
•     <local:ColorView ColorName="Black" />
•     <local:ColorView ColorName="Blue" />
•     <local:ColorView ColorName="Fuchsia" />
•     <local:ColorView ColorName="Gray" />
• </StackLayout>
• </ContentPage>

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

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