Xamarin.Forms UserControl utilizzando XAML e renderer personalizzato

Question

Ci sono alcuni buoni esempi già di come creare un "controllo personalizzato" di -

• Derivazione di una classe da vista o da un esistente built-in di controllo e poi creando un renderizzatore personalizzato per essa per piattaforma.
• http://blog.xamarin.com/using-custom-controls-in-xamarin.forms-on-android/
• http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

Voglio creare un "controllo personalizzato composto o UserControl", che contiene più elementi che sono definiti in XAML (nel codice comune), e poi personalizzati con un renderer (per dire aggiustare lo stile per piattaforma).

Qualcuno ha un esempio di fare questo favore? Un semplice esempio con una vista che ha un'etichetta collegabile e una casella di immissione dovrebbe essere sufficiente per mostrare i principi principali.

Ecco quello che ho finora -

definito un contentView per rappresentare il nostro layout usercontrols e contenuto.

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="News.Forms.VisualNewsContentView"> 
    <ContentView.Content> 
     <StackLayout> 
      <Label x:Name="MyLabel" Text="Label"></Label> 
      <Entry x:Name="MyEntry" Text="Entry"></Entry> 
     </StackLayout> 
    </ContentView.Content> 
</ContentView> 

con codebehind -

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

    // Not sure if I need this to access Entry ... 
    public Entry GetEntry() 
    { 
     return MyEntry; 
    } 
} 

Aggiungi un Android personalizzato renderer per questo contentView, come faccio ad accedere e personalizzare in modo nativo parti/controlli del contentView?

[assembly:ExportRenderer (typeof(VisualNewsContentView), typeof(VisualNewsRenderer))] 

namespace News.Forms.Android 
{ 
    public class VisualNewsRenderer: ViewRenderer 
    { 
     public VisualNewsRenderer() { } 

     protected override void OnModelChanged (VisualElement oldModel, VisualElement newModel) 
     { 
      base.OnModelChanged (oldModel, newModel); 

      if (newModel != null) { 
       VisualNewsContentView newsContentView = newModel as VisualNewsContentView; 

       // i.e. How could I get hold of EditText etc so I could natively customise its appearance? When you use a built in renderer like EntryRenderer you can use Control to access native control. 
       Console.WriteLine (newsContentView.GetLabel().Text); 
       EditText ed = (EditText)newsContentView.GetEntry().??? 
      } 
     } 
    } 
} 

Proprio non riesco a ottenere insieme i pezzi per lavorare, il contentView sembra rendere bene su pagina, ma non riesce a capire come accedere alle sue controlli nativi bambino nel viewrenderer.

Sii gentile per mostrare anche come è possibile utilizzare rilegatura per il Label e I valori di testo ingresso.

Io non voglio avere a definire un renderer personalizzato per ogni singola etichetta/ingresso etc di UserControl.

Answer 1

E 'questo quello che volevi dire?

Alcune proprietà per accedere ai controlli Xamarin.Forms:

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

     public Label Label 
     { 
      get 
      { 
       return MyLabel; 
      } 
      set 
      { 
       MyLabel = value; 
      } 
     } 

     public Entry Entry 
     { 
      get 
      { 
       return MyEntry; 
      } 
      set 
      { 
       MyEntry = value; 
      } 
     } 
    } 

qualche magia all'interno del renderer di personalizzare i controlli nella pagina:

[assembly:ExportRenderer (typeof(VisualNewsContentView), typeof(VisualNewsRenderer))] 

namespace News.Forms.Android 
{ 
    public class VisualNewsRenderer: ViewRenderer 
    { 
     public VisualNewsRenderer() { } 

     protected override void OnModelChanged (VisualElement oldModel, VisualElement newModel) 
     { 
      base.OnModelChanged (oldModel, newModel); 

      if (newModel != null) { 
       VisualNewsContentView newsContentView = newModel as VisualNewsContentView; 
       newsContentView.Label.Text = "It´s some kind of.."; 
       newsContentView.Entry.Text = "MAGIC!"; 
       newsContentView.Entry.BackgroundColor = Color.Blue; 
       newsContentView.Entry.RotationX = 180; 
       newsContentView.Entry.Focus(); 

      } 
     } 
    } 
} 

EDIT:

I don' so se è possibile mappare i controlli dalla pagina XAML ai controlli nativi. È possibile aggiungere i controlli che si desidera personalizzare in modo nativo @ il renderer.

[assembly:ExportRenderer (typeof(VisualNewsContentView), typeof(VisualNewsRenderer))] 

namespace News.Forms.Android 
{ 
    public class VisualNewsRenderer: NativeRenderer 
    { 
     public VisualNewsRenderer() { } 

     protected override void OnModelChanged (VisualElement oldModel, VisualElement newModel) 
     { 
      base.OnModelChanged (oldModel, newModel); 

      if (newModel != null) { 
       LinearLayout layout = new LinearLayout (Application.Context); 
       layout.Orientation = Orientation.Vertical; 

       TextView tv = new TextView (Application.Context); 
       tv.Ellipsize = TextUtils.TruncateAt.Middle; 
       tv.Text = "It´s some kind of.."; 

       EditText et = new EditText (Application.Context); 
       et.SetTextColor (Graphics.Color.Chocolate); 
       et.Text = "MAGIC!"; 

       layout.AddView (tv); 
       layout.AddView (et); 

       SetNativeControl (layout); 
      } 
     } 
    } 
} 

Ma in questo modo non si intende utilizzare la contentView .. Mi dispiace, non ho niente di meglio di questo ..

Answer 2

La mia soluzione per la personalizzazione di controllo utente composto è fare un controllo personalizzato per ciascun controllo utilizzato nel controllo utente composto. Per esempio, che questo controllo:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="News.Forms.VisualNewsContentView"> 
    <ContentView.Content> 
     <StackLayout> 
      <Label x:Name="MyLabel" Text="Label"></Label> 
      <Entry x:Name="MyEntry" Text="Entry"></Entry> 
     </StackLayout> 
    </ContentView.Content> 
</ContentView> 

farò qualcosa di simile:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:CustomControls="clr-namespace:App.CustomControls;assembly=App" x:Class="News.Forms.VisualNewsContentView"> 
     <ContentView.Content> 
      <CustomControls:StackLayout> 
       <CustomControls:Label x:Name="MyLabel" Text="Label"></CustomControls:Label> 
       <CustomControls:Entry x:Name="MyEntry" Text="Entry"></CustomControls:Entry> 
      </CustomControls:StackLayout> 
     </ContentView.Content> 
    </ContentView> 

classe Esempio per CustomControls: stackLayout è:

(in StackLayout.cs)

using Xamarin.Forms; 

namespace App.CustomControls 
{ 
    public class StackLayout : Xamarin.Forms.StackLayout 
    { 
    } 
} 

(in StackLayoutRenderer.cs per progetto Android)