xamarin 自定义ContentView

新建基于xmal的ContentView

<?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="Tourism.ColorView">
    <ContentView.Content>
        <Frame OutlineColor="Aqua">
            <StackLayout Orientation="Horizontal">
                <BoxView x:Name="boxView" WidthRequest="70" MinimumHeightRequest="70" />
                <StackLayout>
                    <Label x:Name="colorNameLabel" FontSize="Large" VerticalOptions="CenterAndExpand">
                    </Label>
                    <Label x:Name="colorValueLabel" VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </StackLayout>
        </Frame>
    </ContentView.Content>
</ContentView>

分别声明了： BoxView Label 两个UI变量和一个Lable的Color变量

cs类

 public partial class ColorView : ContentView
    {

        string colorName;

        ColorTypeConverter colorTypeCov;
        public ColorView()
        {
            colorTypeCov  = new ColorTypeConverter();
            InitializeComponent();
        }
        public string ColorName{
            set{
                colorName = value;
                colorNameLabel.Text = value;
                Color color = (Color)colorTypeCov.ConvertFromInvariantString(value);
                boxView.Color = color;
                colorValueLabel.Text = String.Format("{0}-{1}-{2}", 255 * color.R, 255 * color.G, 255 * color.B);
            }
            get{
                return colorName;
            }
        }
    }

声明外部的xmal访问的public变量ColorName

使用

1 应用xmal的根节点声明

xmlns:local="clr-namespace:Tourism;assembly=Tourism"

格式说明: clr-namespace:工程名;assembly=工程名
2 使用

 <local:ColorView ColorName="red"/>

3 整体

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:Tourism;assembly=Tourism" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Tourism.ColorViewListpage">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <local:ColorView ColorName="red"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

使用预览