Wie kann ich eine Schaltfläche in den Tabs einer TabbedPage in Xamarin.Forms platzieren?

Question

Ich verwende eine Registerkarte mit einer Master-Detailseite zur Navigation in meiner Xamarin.Forms App. Wenn derzeit eine Menüoption aus der Seite "Master-Details" ausgewählt wird, wird eine neue Registerkarte mit dem Inhalt der Seite hinzugefügt. Ich möchte eine Schaltfläche platzieren, um die Registerkarte im Titelfeld der Registerkarte zu schließen. Ist das möglich? Derzeit habe ich nur eine Schaltfläche innerhalb der Inhaltsseite für die Registerkarte, aber das ist weniger als ideal. Ich möchte, dass es sehr Webbrowser ähnlich ist. Danke im Voraus!

Edit: Ich habe die image hinzugefügt. Grundsätzlich möchte ich nur einen "X" -Button rechts von jedem Element in der Tableiste hinzufügen, mit dem ich diesen Tab schließen kann. Genau wie in Chrome oder so.

Answer 1

Sie können benutzerdefinierten Renderer verwenden, um Ihre benutzerdefinierte TabbedPage in Android-Plattform zu erstellen. Mit Yuri nicht einverstanden, auf Android können wir ein Bild zu Tab hinzufügen, in der Tat können wir das Layout der Registerkarte anpassen.

Da in Ihrem Bild, sah ich, dass Sie nicht die Icon Eigenschaft für jede Registerkarte verwendet habe, verwende ich dieses Symbol als eine Schaltfläche zum Schließen. Aber sicher können Sie auch nicht verwenden, es ist selbst angepasst.

In PCL, erstellen MyTabbedPage:

public class MyTabbedPage : TabbedPage 
{ 
} 

In Android-Plattform für eine Renderer erstellen:

[assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedPageRenderer))] 

namespace YOURNAMESPACE.Droid 
{ 
    public class MyTabbedPageRenderer : TabbedPageRenderer 
    { 
     private ObservableCollection<Xamarin.Forms.Element> children; 
     private IPageController controller; 

     protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon) 
     { 
      base.SetTabIcon(tab, icon); 

      tab.SetCustomView(Resource.Layout.mytablayout); 

      var imagebtn = tab.CustomView.FindViewById<ImageButton>(Resource.Id.closebtn); 
      imagebtn.SetBackgroundDrawable(tab.Icon); 

      var title = tab.CustomView.FindViewById<TextView>(Resource.Id.tabtitle); 
      title.Text = tab.Text; 

      imagebtn.Click += (sender, e) => 
      { 
       var closebtn = sender as ImageButton; 
       var parent = closebtn.Parent as Android.Widget.RelativeLayout; 
       var closingtitle = parent.FindViewById<TextView>(Resource.Id.tabtitle); 
       foreach (var child in children) 
       { 
        var page = child as ContentPage; 
        if (page.Title == closingtitle.Text) 
        { 
         children.Remove(child); 
         break; 
        } 
       } 
      }; 
     } 

     protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e) 
     { 
      base.OnElementChanged(e); 
      if (e.NewElement != null) 
      { 
       controller = Element as IPageController; 
       children = controller.InternalChildren; 
      } 
     } 
    } 
} 

es wie folgt verwendet:

<local:MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:TabbedPageForms" 
      x:Class="TabbedPageForms.MainPage"> 

    <local:TodayPage Title="Today" Icon="hamburger.jpg" /> 

    <local:SchedulePage Title="Schedule" Icon="hamburger.jpg" /> 
</local:MyTabbedPage> 

-Code hinter, don Vergessen Sie nicht, MainPage zu ändern, um von MyTabbedPage zu erben :

public partial class MainPage : MyTabbedPage 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 
    } 
} 

Aufmerksamkeit hier zahlen Bitte, wenn Sie meinen Code näher betrachten, werden Sie I, für die Vergleichs- Title jedes Register verwendet und das Entfernen des passenden Artikel finden, dass es finden der erste übereinstimmende Titel und entfernen Sie die Seite dieses Titels. Dies kann zu einem Problem führen, wenn Sie mehrere Registerkarten mit demselben Titel haben. Dies ist ein potenzieller Bug dieser Demo, Sie können versuchen, es zu lösen.

Update:

vergessen, den Code von mytablayout zu schreiben, hier ist es:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView android:id="@+id/tabtitle" 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center_horizontal" /> 

    <ImageButton 
    android:id="@+id/closebtn" 
    android:layout_height="30dp" 
    android:layout_width="30dp" 
    android:scaleType="fitCenter" 
    android:layout_alignParentRight="true" 
    android:gravity="center" /> 
</RelativeLayout>