Xamarin 表单中的 Google Material Design 条目答案

【问题标题】：Google Material Design Entry in Xamarin FormsXamarin 表单中的 Google Material Design 条目
【发布时间】：2016-08-05 09:55:55
【问题描述】：

即使没有底部标签的动画，如何在 Xamarin.Forms 中实现 google material design entry/input（所以没有渲染器等）？

【问题讨论】：

标签： xamarin.forms

【解决方案1】：

下面的代码是一个 Xamarin.Forms google material design like entry 方法。总 xaml + 一点编码 :)

Step1：在PCL项目中创建一个类

public class CustomEntry : Entry
    {

    }

Step2：在App.xaml中创建控件模板

<ControlTemplate x:Key="MyControlTemplate">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <controls:CustomEntry x:Name="myEntry" Text="{TemplateBinding Text, Mode=TwoWay}" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" IsPassword="{TemplateBinding IsPassword}" MinimumHeightRequest="25"/>
      <BoxView Grid.Row="1" BackgroundColor="#D2D2D2" HeightRequest="1" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
        <BoxView.Triggers>
          <DataTrigger TargetType="BoxView" Binding="{Binding Source={x:Reference myEntry}, Path=IsFocused}" Value="true">
            <Setter Property="BackgroundColor" Value="Black" />
            <Setter Property="HeightRequest" Value="2"/>
          </DataTrigger>
        </BoxView.Triggers>
      </BoxView>
    </Grid>
  </ControlTemplate>

第三步：创建超级材料设计入门类

public class MyMaterialDesignEntry : ContentView, INotifyPropertyChanged
    {
        public static readonly BindableProperty TextProperty =
        BindableProperty.Create("Text", typeof(string), typeof(ContentPage), "");
        public static readonly BindableProperty IsPasswordProperty =
        BindableProperty.Create("IsPassword", typeof(bool), typeof(ContentPage), false);

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, (string)value); }
        }       

        public bool IsPassword => (bool)GetValue(IsPasswordProperty);

        public MyMaterialDesignEntry()
        {
            ControlTemplate = (ControlTemplate)Application.Current.Resources.FirstOrDefault(x => x.Key == "MyControlTemplate").Value;
        }      
    }

第 4 步：在 xaml 中使用您的超级材料设计条目

<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
            <Label Text="Login"/>
            <controls:MyMaterialDesignEntry Text="{Binding Login, Mode=TwoWay}"/>
          </StackLayout>

不要忘记将适当的命名空间添加到您的页面 xaml。反正它会告诉你的。

【讨论】：