2016-03-24 6 views
2

Haben Xamarin.Forms ein Konzept von Includes?Xamarin.Forms - Gibt es einen Mechanismus zum "Einbinden" einer Teilansicht?

Ich erstelle eine App, die auf allen Seiten einen gemeinsamen Header hat. Gibt es eine Möglichkeit, den Header einmal zu erstellen und auf allen Seiten einzubinden? Besser noch, gibt es eine Möglichkeit, eine Vorlage oder ein wiederverwendbares Layout zu erstellen, dass Sie den gesamten Inhalt für jede Seite einfügen können? Es wäre ein ähnliches Konzept wie .NET MVC _Layout Datei.

Antwort

8

Was Sie brauchen, ist die ControlTemplate in 2.1.0 eingeführt.

Erstellen Sie eine Steuerelementvorlage in Ihrem ResourceDictionary in Application.Resources.

<?xml version="1.0" encoding="utf-8" ?> 
<Application 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="Mobile.App"> 
    <Application.Resources> 
    <ResourceDictionary> 
     <ControlTemplate x:Key="MainPageTemplate"> 
     <StackLayout> 
      <Label Text="Header Content" FontSize="24" />   
      <ContentPresenter /> 
     </StackLayout> 
     </ControlTemplate> 
    </ResourceDictionary> 
    </Application.Resources> 
</Application> 

Dann in Ihrem Content, die Control zugewiesen

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
       x:Class="Mobile.MainPage" 
       ControlTemplate="{StaticResource MainPageTemplate}"> 

    <Label Text="Main Page Content" FontSize="18" /> 

</ContentPage> 

Dann landen Sie mit

enter image description here

referenzierte aus: http://www.xamarinhelp.com/xamarin-forms-page-templates/

+0

Wenn ich eine Steuervorlage anwenden auf Seitenebene im Gegensatz zu Anwendungsebene, kann de rived Klassen verwenden diese Kontrollschablone? – Mark13426

+0

Kann dies mit C# -Code anstelle von XAML gemacht werden? – jbyrd

+0

@jbyrd - Ich habe es nicht versucht, aber Sie sollten in der Lage sein. Erstellen Sie ein neues ControlTemplate(), und fügen Sie die Steuerelemente hinzu. Weisen Sie es dann der Eigenschaft ControlTemplate auf der Seite zu. –

6

Ja. Sie können dafür Benutzersteuerelemente verwenden. Sie können XAML oder nur Code verwenden. Ich werde den XAML-Weg erklären.

Fügen Sie einfach eine neue XAML-Seite hinzu und ändern Sie den Root-Typ von ContentPage zu StackLayout. Der Stammtyp kann jedes andere Layout oder Steuerelement sein. Sie müssen entscheiden, was am besten passt.

MyControl.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="App6.MyControl"> 
    <Label Text="{Binding Name}" /> 
    <Label Text="{Binding Age}" /> 
    <Label Text="{Binding CatAmount}" /> 
</StackLayout> 

Wir binden die Eigenschaften Name, Age, CatAmount zu drei verschiedenen Etiketten. Wir nehmen an, dass die BindingContext dieser Steuerung ein Objekt vom Typ PersonData ist (siehe unten). In Ihrem Code hinter müssen Sie auch den Typ ändern.

MyControl.xaml.cs

public partial class MyControl : StackLayout 
{ 
    public MyControl() 
    { 
     InitializeComponent(); 
    } 
} 

In Ihrer Seite, müssen Sie einen neuen Namespace hinzufügen (z local, die Ihnen Punkte Montage, zum Beispiel App6 oder MyApp.Whatever). Dann können Sie es über local:MyControl verwenden. In unserem Beispiel-Steuerelement binden wir die BindingContext an Person, die eine Eigenschaft des BindingContext unserer Seite ist, die (in unserem Fall) die Seite selbst ist. Wenn sich Ihr Steuerelement in einem Sub-Namespace befindet, müssen Sie den Namespace-Teil entsprechend ändern.

Page2.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:App6;assembly=App6" 
      x:Class="App6.Page2"> 
    <local:MyControl BindingContext="{Binding Person}"></local:MyControl> 
</ContentPage> 

Page2.xaml.cs

public class PersonData 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
    public int CatAmount { get; set; } 
} 

public partial class Page2 : ContentPage 
{ 
    public PersonData Person { get; set; } 

    public Page2() 
    { 
     Person = new PersonData {Age = 28, Name = "Sven", CatAmount = 2}; 
     InitializeComponent(); 
     BindingContext = this; 
    } 
} 

Und in Ihrem Szenario erwähnt, können Sie einfach von ContentPage erben und Ihre gemeinsame Elemente hinzufügen und Sie geerbte Seite als Basisklasse Ihrer Seiten.

TemplatedPage - Xamarin.Forms 2,1

Mit Xamarin.Forms 2.1 eingeführt sie TemplatedPage. Sie finden das Beispiel hier: http://xfcomplete.net/general/2016/01/20/control-templates/. Das LoginView Beispiel mit der ContentPresenter passt genau zu Ihrem Szenario.

Verwandte Themen