XamarinフォームのGoogleマテリアルデザインエントリー

Question

Xamarin.FormsでGoogleマテリアルデザインの入力/入力を達成するには（下部のラベルのアニメーションがなくてもレンダラーなどがないので）

Answer 1

以下のコードは、入門アプローチのようなXamarin.Forms Googleマテリアルデザインです。総XAML +少しコーディング:)

ステップ1：PCLプロジェクトにクラスを作成します

public class CustomEntry : Entry 
    { 

    } 

ステップ2：

<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> 

App.xaml

にコントロールテンプレートを作成します。ステップ3：スーパーを作成します。材料設計入門クラス

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に適切な名前空間を追加することを忘れないでください。それはとにかくあなたに伝えます。