Xamarin Forms Label Benutzerkontrolle

Question

Ich versuche, ein Xamarin Forms-Benutzersteuerelement zu erstellen, das ein Label und einen Platzhalter enthält, wo ich ein untergeordnetes Steuerelement "verschachteln" kann.

Ich möchte das Label auf der linken Seite und das geschachtelte Steuerelement auf der rechten Seite. Sie müssen einen Prozentsatz des verfügbaren Platzes einnehmen, d. H. Das Etikett sollte ein Drittel und das verschachtelte Steuerelement zwei Drittel einnehmen.

Ich versuche, einen Inhalt Moderator als Platzhalter zu verwenden, so dass ich die Benutzersteuerung wie diese

<userControls:PanelControl HeadingText="FIRST HEADING"> 
    <DatePicker /> 
</userControls:PanelControl> 

verwenden kann, wenn ich die Benutzersteuerung auf einem Stapel-Layout basieren, erscheinen die beiden Kontrollen in den richtigen Position. Das Problem bei der Verwendung eines Stack-Layouts ist, dass ich keine prozentualen Breiten implementieren kann.

Wenn ich das Benutzersteuerelement auf einem Raster basieren, erscheint das verschachtelte Steuerelement in der ersten Spalte das Etikett überschreiben. Es sieht so aus, als ob der Content Presenter in einem Grid nicht richtig funktioniert. Hier

ist der Stack-Layout basiert Benutzerkontrolle

<?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="BasicAppTemplate.UserControls.PanelControl" 
      Orientation="Horizontal"> 

    <Label x:Name="HeadingLabel" VerticalOptions="Center"/> 

    <ContentPresenter/> 

</StackLayout> 

Hier wird das Gitter basierte Benutzersteuerung

<?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="BasicAppTemplate.UserControls.PanelGridControl"> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="2*"/> 
    </Grid.ColumnDefinitions> 

    <Label x:Name="HeadingLabel" VerticalOptions="Center" Grid.Column="0"/> 

    <StackLayout Grid.Column="1"> 
     <ContentPresenter/> 
    </StackLayout> 

</Grid> 

Hier wird die Seite

<?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:userControls="clr-namespace:BasicAppTemplate.UserControls;assembly=BasicAppTemplate" 
      x:Class="BasicAppTemplate.Pages.MainPage"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <userControls:PanelControl HeadingText="FIRST HEADING"> 
      <DatePicker /> 
     </userControls:PanelControl> 

     <userControls:PanelGridControl HeadingText="SECOND HEADING" Grid.Row="1"> 
      <DatePicker /> 
     </userControls:PanelGridControl> 
    </Grid> 

</ContentPage> 

Das, was sie beide aussehen

Irgendwelche Ideen, wie dies zu implementieren? Gibt es eine andere Möglichkeit, mein verschachteltes Benutzersteuerelement zu erstellen?

Answer 1

Dank der Zeiger von DavidS ist die Lösung eine Control im User Control auf dieser

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="BasicAppTemplate.UserControls.PanelGridControl"> 

    <ContentView.ControlTemplate> 

     <ControlTemplate> 

      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="2*" /> 
       </Grid.ColumnDefinitions> 

       <Label VerticalOptions="Center" Grid.Column="0" Text="{TemplateBinding HeadingText}" /> 

       <ContentPresenter Grid.Column="1" /> 

      </Grid> 

     </ControlTemplate> 

    </ContentView.ControlTemplate> 

</ContentView>