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=""
•              xmlns:x=""
•              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=""
•              xmlns:x=""
•              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中可以包含檢視，還可以包括佈局，從而構建更為複雜的佈局模式。