c# - Xamarin.Forms 中的可重用 XAML 控件

Question

我已经用一些其他控件编写了一个不错的 Grid，例如:Entry 和 Image 现在我想以最简单的方式重用它.

这是我对 Email 属性的控制:

<Grid
                Style="{StaticResource gridEntryStyle}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="9*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20" />
                    <RowDefinition Height="7" />
                    <RowDefinition Height="20" />
                </Grid.RowDefinitions>

                <controls:ExtendedEntry
                    Grid.Row="0"
                    Grid.Column="0"
                    Text="{Binding UserEmail, Mode=TwoWay}"
                    Placeholder="{i18n:Translate UserEmailPlaceholder}"
                    Style="{StaticResource entryStyle}">

                    <controls:ExtendedEntry.Behaviors>
                        <behavior:EventToCommandBehavior 
                            EventName="Focused" 
                            Command="{Binding ControlFocusCommand}"
                            CommandParameter="UserEmail"/>
                        <behavior:EventToCommandBehavior 
                            EventName="Unfocused" 
                            Command="{Binding ControlUnfocusedCommand}"
                            CommandParameter="UserEmail"/>
                    </controls:ExtendedEntry.Behaviors>

                </controls:ExtendedEntry>

                <Image
                    Grid.Row="0"
                    Grid.Column="1"
                    Source="clear.png"
                    IsVisible="{Binding IsEntryFocused}"
                    Style="{StaticResource imageClearStyle}">

                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding ClearCommand}"
                            CommandParameter="UserEmail"/>
                    </Image.GestureRecognizers>

                </Image>

                <Image
                    Grid.Row="1"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    Source="lineWhite.png"
                    Style="{StaticResource imageLineStyle}"/>

                <Image
                    Grid.Row="1"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    Source="linePure.png"
                    Style="{StaticResource imageLineStyle}"
                    IsVisible="{Binding IsError}"/>

                <Image
                    Grid.Row="1"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    Source="lineGradient.png"
                    Style="{StaticResource imageLineStyle}"
                    IsVisible="{Binding IsEntryFocused}"/>

                <Label
                    Grid.Row="2"
                    Grid.Column="0"
                    Text="{Binding ErrorMessage}"
                    Style="{StaticResource labelErrorStyle}"
                    IsVisible="{Binding IsError}"/>

                <Image
                    Grid.Row="2"
                    Grid.Column="1"
                    Source="error.png"
                    Style="{StaticResource imageErrorStyle}"
                    IsVisible="{Binding IsError}"/>

            </Grid>

我想重用它，例如如下:

<usercontrols:EntryControl 
                MainText="{Binding UserEmail}"
                MainTextPlaceholder="{i18n:Translate UserEmailPlaceholder}" />

目前，即使是这个简单的示例也无法正常工作，我不知道如何在此控件中定义 Command。现在我有:

public partial class EntryControl : ContentView
{
    public EntryControl()
    {
        InitializeComponent();
    }

    public static readonly BindableProperty MainTextProperty =
        BindableProperty.Create(
            propertyName: "MainText",
            returnType: typeof(string),
            declaringType: typeof(string),
            defaultValue: string.Empty,
            defaultBindingMode: BindingMode.TwoWay);

    public string MainText
    {
        get { return (string)this.GetValue(MainTextProperty); }
        set { this.SetValue(MainTextProperty, value); }
    }

    public static readonly BindableProperty MainTextPlaceholderProperty =
        BindableProperty.Create(
            propertyName: "MainTextPlaceholder", 
            returnType: typeof(string), 
            declaringType: typeof(string), 
            defaultValue: string.Empty, 
            defaultBindingMode: BindingMode.TwoWay);

    public string MainTextPlaceholder
    {
        get { return (string)this.GetValue(MainTextPlaceholderProperty); }
        set { this.SetValue(MainTextPlaceholderProperty, value);}
    }
}

这是正确的方法吗？或者这在 Xamarin.Forms 中甚至可能吗？

Answer 1

XAML:

    <?xml version="1.0" encoding="utf-8" ?>
    <Grid xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Class="ApplicationName.Controls.EntryControl"
      Style="{StaticResource gridEntryStyle}">
    </Grid>

xaml.cs:

namespace ApplicationName.Controls
{
    public partial class EntryControl : Grid
    {
        public static readonly BindableProperty CommandProperty =
        BindableProperty.Create(
            propertyName: nameof(Command),
            returnType: typeof(ICommand),
            declaringType: typeof(EntryControl),
            defaultValue: null,
            defaultBindingMode: BindingMode.TwoWay);

        public string Command
        {
            get { return (string)this.GetValue(CommandProperty); }
            set { this.SetValue(CommandProperty, value); }
        }

        public EntryControl()
        {
            InitializeComponent();
        }
    }
}

使用:

xmlns:controls="clr-namespace:ApplicationName.Controls;assembly=ApplicationName"

<controls:EntryLabel/>