2017-07-06 2 views
0

Ich bin bei Xamarin Formen zu versuchen, meine benutzerdefinierte 'GroupBox' Steuerelement, das ist nur ein Raster mit zwei Zeilen zu erstellen. Die erste Zeile sollte nur eine Box mit einem Header zeigen. Die Kopfzeile hat ein Hintergrundrechteck mit einer Beschriftung. Die zweite Zeile zeigt den Inhalt über ContentPresenter der Inhalt geht in der zweiten Zeile unter.Xamarin Formen contentpresenter geht in falsche Zeile und leer am Telefon

Ich glaube, ich habe die XAML richtig gemacht, das ist, wie ich es in WPF tun würde, zeigt es in der GroupBox.xaml Forms Previewer gut, aber wenn ich es auf der Hauptseite hinzufügen, geht der Inhalt der Groupbox in die erste Zeile (der Header) statt der zweiten Zeile aus irgendeinem Grund in der Vorschau.

the content is going into the header

ferner, wenn ich auf einem Android-Handy laufen zu lassen versuchen, es sieht aus wie folgt:

the group boxes are blank frames with no background colour or text

die Gruppenfelder sind leer Rahmen ohne Hintergrundfarbe oder Text

Dies ist der Code der GroupBox '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="XForms.GroupBox"> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="0.2*"/> 
     <RowDefinition Height="1*"/> 
    </Grid.RowDefinitions> 

    <Frame Grid.Row="0" Grid.RowSpan="2" Margin="1" OutlineColor="AliceBlue"/> 

    <BoxView Grid.Row="0" BackgroundColor="Red" Margin="1"/> 

    <Label Grid.Row="0" TextColor="White" Text="Label!" Margin="2" /> 

    <Grid Grid.Row="1"> 
     <ContentPresenter/> 
    </Grid> 

</Grid> 

Dieser Code ist in der Hauptform:

<?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:XForms;assembly=XForms" 
       x:Class="XForms.MainPage"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="auto"/> 
       <ColumnDefinition Width="1*"/> 
      </Grid.ColumnDefinitions> 
      <Grid Grid.Column="0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="1*"/> 
        <RowDefinition Height="1*"/> 
        <RowDefinition Height="1*"/> 
       </Grid.RowDefinitions> 

       <local:GroupBox Grid.Row="0"> 
        <Label Text="I'm some content 1"/> 
       </local:GroupBox> 

       <local:GroupBox Grid.Row="1"> 
        <Label Text="I'm some content 2"/> 
       </local:GroupBox> 

       <local:GroupBox Grid.Row="2"> 
        <Label Text="I'm some content 3"/> 
       </local:GroupBox> 
      </Grid> 
     </Grid> 
    </ContentPage> 

in der XAML-Haupt-Seite, die ich eine Startreihe auf das Etikett hinzufügen kann, auch wenn es kein Gitter in dem Inhalt ist, und es wird in der Vorschau arbeiten - aber es ist immer noch leer am Telefon (Was am wichtigsten ist).

<local:GroupBox Grid.Row="0"> 
        <Label Text="I'm some content 1" Grid.Row="1"/> 
       </local:GroupBox> 

Antwort

1

Ich weiß nicht, was die Frame für, ist aber zur Zeit deckt die BoxView und Etiketten und so machte sie unsichtbar. Kommentieren Sie die Frame und Sie werden die Etiketten und BoxView wieder sehen.

Ich glaube, ich habe die XAML richtig gemacht, das ist, wie ich es in WPF tun würde, zeigt es in der GroupBox.xaml Previewer feinen Formen, aber wenn ich hinzufügen, es in die Haupt-Seite, der Inhalt der Groupbox geht in die erste Zeile (der Header) statt der zweiten Zeile aus irgendeinem Grund in den Previewer.

ContentPresenter nicht wie that.In Xamarin.Forms funktioniert, wird es in der Regel in ControlTemplate verwendet. Informationen zur Verwendung von ContentPresenter finden Sie unter this blog.

In Ihrem Fall, wenn Sie ContentPresenter arbeiten möchten.

[XamlCompilation(XamlCompilationOptions.Compile)] 
public partial class GroupBox : ContentView 
{ 
    public GroupBox() 
    { 
     InitializeComponent(); 
    } 
} 

GroupBox.xaml: Statt Grid für GroupBox zu verwenden, Sie ContentView für GroupBox wie unten verwenden können

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     x:Class="Demo.GroupBox"> 
<ContentView.ControlTemplate> 
    <ControlTemplate> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="0.2*"/> 
       <RowDefinition Height="1*"/> 
      </Grid.RowDefinitions> 
      <!--<Frame Grid.Row="0" Grid.RowSpan="2" Margin="1" OutlineColor="AliceBlue"></Frame>--> 
      <BoxView Grid.Row="0" BackgroundColor="Red" Margin="1" /> 
      <Label Grid.Row="0" TextColor="White" Text="Label!" Margin="2" /> 
      <Grid Grid.Row="1"> 
       <ContentPresenter/> 
      </Grid> 
     </Grid> 
    </ControlTemplate> 
</ContentView.ControlTemplate> 

+0

Große, funktioniert es am Telefon, und sie sind in der rechten Position jetzt. Danke vielmals. Ich habe den Rahmen benutzt, um einen Umriss um die Schachtel herum zu erzeugen, ich hätte es wahrscheinlich vorher erwähnen sollen. – pm101