2016-06-18 13 views
0

EntryImageのようないくつかのコントロールでnice Gridを書きましたが、今では最も単純な方法で再利用したいと思います。Xamarin.Formsで再利用可能なXAMLコントロール

これは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を定義する方法現時点では、私は持っています:

これは正しいですか?それともXamarin.Formsでも可能ですか?

+0

を意味する "動作しない" んか?問題の内容を具体的に記述してください。 – Jason

+0

まず、 'declaringType'は' BindableProperty'を宣言するコントロールの型でなければなりません。 –

+0

は、I型と、その手段は動作しない。<ユーザーコントロール:EntryControl \t \t \t \t \t MainText = "{バインディングUSEREMAIL}" \t \t \t \t \t MainTextPlaceholder = "{I18N:UserEmailPlaceholder翻訳は}" />はMainTextとMainTextPlaceholderがされている値それらの値に束縛されていません。 –

答えて

3

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/> 
+0

私はこの仕事を得ることができません –

+0

@TomaszKowalczykここでは、[サンプル](https://github.com/gromadskyi/HoldingViewSample/blob/master/HoldingViewSample/HoldingViewSample/MainPage.xaml)ですが、xamlなしのコントロールです。 –

+0

DataBindingを使用した別の実装https://forums.xamarin.com/discussion/73350/help-with-reusable-xaml-user-control-icommand-and-viewmodel –

関連する問題