I'm having a go at Xamarin Forms trying to create my custom 'GroupBox' control which is a just a grid with two rows. The first row should just show a box with a header . The header has a background rectangle with a label. The second row shows the content via ContentPresenter
the content goes below in the second row.
I believe I've done the XAML correctly, this is how I'd do it in WPF
, it shows in the GroupBox.xaml
Forms Previewer fine, but when I add it into the main page, the content of the Groupbox goes into the first row (the header) instead of the second for some reason within the Previewer.
furthermore, when I attempt to run on an android phone, it just looks like this:
the group boxes are blank frames with no background colour or text
This is the code of the GroupBox 'user control'
<?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>
This code is in the main form:
<?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 the main page XAML I can add a grid row to the label, even though there is no grid in the content, and it will work in the previewer -- but it's still blank on the phone (Which is most important).
<local:GroupBox Grid.Row="0">
<Label Text="I'm some content 1" Grid.Row="1"/>
</local:GroupBox>