How to separate two elements within a grid, with a BoxView? - xamarin.forms

I have a ListView that contains a grid with some Labels, I want to put a separating line between two labales, but in doing so I have to indicate to the BoxView in what row of the grid it should go, and in doing so, the BoxView covers the entire size of the grid. line, is there any way that only a thin line is drawn and not the thick blue line?
<?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:abstractions="clr-namespace:RoundedBoxView.Forms.Plugin.Abstractions;assembly=RoundedBoxView.Forms.Plugin.Abstractions"
x:Class="FortiaApp.Views.frmMovimientos">
<ContentPage.Content>
<StackLayout
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand">
<Image x:Name="imgFortia" Source="fortia" HeightRequest="40"></Image>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="Fondo1" Aspect="AspectFill"></Image>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ListView
BackgroundColor="Transparent"
HasUnevenRows="True"
x:Name="lsvTabla"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="2" Margin="7,10,7,10" HeightRequest="100">
<StackLayout>
<Grid
BackgroundColor="Transparent"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding Comercio}"
/>
<Label
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.RowSpan="3"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding DescripcionImporte}"
/>
<Label
Grid.Row="0"
Grid.Column="1"
TextColor="#969696"
FontAttributes="Bold"
HorizontalOptions="Center"
Text="{Binding CodigoAutorizacion}"
/>
<Label
Grid.Row="1"
Grid.Column="1"
TextColor="#969696"
FontSize="Large"
HorizontalOptions="Center"
Text="{Binding Importe}"
/>
<BoxView BackgroundColor="blue" HorizontalOptions="Fill" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="1"/>
<Label
Grid.Row="4"
Grid.Column="1"
TextColor="#005a9f"
FontSize="Small"
HorizontalOptions="Center"
Text="{Binding Fecha}"
/>
</Grid>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</AbsoluteLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I need it to be a very thin line, but a rectangle is too wide, please, I hope someone can help me

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" />
<Label Grid.Row="0" Grid.Column="1" />
<Label Grid.Row="1" Grid.Column="1" />
<BoxView Grid.Row="2" Grid.Columnspan="2"
HorizontalOptions="FillAndExpand" VerticallOptions="FillAndExpand" />
<Label Grid.Row="3" Grid.Column="1" />
</Grid>

Related

Lost scroll xamarin forms

Hello friends how are you?
I have a problem with a listview and a scroll. It turns out that when I move the scroll up and the list is lost I can no longer return the list down. I really don't know how to explain the problem more clearly, so I uploaded a video that might clarify it a bit more. Thank you for your help and have a great day.
Thanks for the help
Scroll error
Here my code:
<ContentPage x:Name="QuoteDetailContentPage" Title="Detalle cotización" >
<Grid Padding="3" Margin="3">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ScrollView>
<StackLayout Grid.Row="0" BindingContext="{Binding OpportunityDetailViewModel}">
<ListView
x:Name="QuoteDetailListView"
SeparatorVisibility="Default"
ItemsSource="{Binding OpportunityDetailView}"
IsRefreshing="{Binding IsRefreshing}"
ItemTapped="QuoteDetailListView_ItemTapped"
SelectionMode="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Nombre" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="Cant." HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="Precio" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="Total" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" />
<!--<Label Grid.Row="0" Grid.Column="4" Margin="0" Text="Acción" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />-->
<BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="1" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell >
<ViewCell.ContextActions>
<MenuItem x:Name="MenuItemEdit" Clicked="MenuItemEdit_Clicked" Text="Editar" CommandParameter="{Binding .}" IsEnabled="{Binding IsMenuEnabled}">
<!--<MenuItem.IconImageSource>
<FontImageSource Glyph="Aceptar" FontFamily="{StaticResource FontAwesomeSolid}" Color="#5694ff" />
</MenuItem.IconImageSource>-->
</MenuItem>
<MenuItem x:Name="MenuItemDelete" Clicked="MenuItemDelete_Clicked" Text="Eliminar" IsDestructive="True" CommandParameter="{Binding .}" IsEnabled="{Binding IsMenuEnabled}">
<!--<MenuItem.IconImageSource>
<FontImageSource Glyph="Rechazar" FontFamily="{StaticResource FontAwesomeSolid}" Color="#e82424" />
</MenuItem.IconImageSource>-->
</MenuItem>
</ViewCell.ContextActions>
<Grid x:Name="Item" Padding="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="{Binding ItemName}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" HorizontalOptions="FillAndExpand" LineBreakMode="CharacterWrap"/>
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="{Binding Quantity}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand"/>
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="{Binding Price,Converter={StaticResource CurrencyCultureConverter}}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="{Binding Total,Converter={StaticResource CurrencyCultureConverter}}" BackgroundColor="Transparent" VerticalTextAlignment="Center" HorizontalTextAlignment="End" HorizontalOptions="FillAndExpand"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer>
<StackLayout BindingContext="{Binding OpportunityDetailViewModel}">
<Grid BindingContext="{Binding OpportunityDetailViewModel}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Total" HorizontalTextAlignment="End" Style="{StaticResource labelTitleStyle}"/>
<Label x:Name="TotalLabel" Grid.Row="0" Grid.Column="1" Margin="0" Text="{Binding DetailTotal}" HorizontalTextAlignment="End" Style="{StaticResource labelTitleStyle}" />
</Grid>
</StackLayout>
</ListView.Footer>
</ListView>
</StackLayout>
</ScrollView>
<StackLayout Grid.Row="1">
<Button x:Name="AddItemButton" Text="Agregar item" Clicked="AddItemButton_Clicked" />
</StackLayout>
</Grid>
</ContentPage>

How do i get space between groupings in a listview through xaml (xamarin.forms)

I want to achieve a space between the different groupings in a listview like my picture.
How can I do this through xaml?
I have tried adding the some margin and padding to the GroupHeaderTemplate without any luck.
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="0,20,0,0" Padding="0,0,0,0" BackgroundColor="#324458" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="white" Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#2D3334" Margin="0,3,0,3" TextColor="#C4ced8" Text="LPic" />
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="#2D3334" Grid.Row="0" Grid.Column="2" TextColor="#C4ced8" Margin="0,3,0,3" Text="30. SEP" />
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
You can put the Frame in another Frame and set the Padding of it
<ViewCell>
<Frame Margin="0" Padding="0,20,0,0" BackgroundColor="#324458" >
<Frame >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="white" Grid.Row="0" Grid.Column="1" Text="{Binding Name}"/>
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#2D3334" Margin="0,3,0,3" TextColor="#C4ced8" Text="LPic" />
<Label HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" BackgroundColor="#2D3334" Grid.Row="0" Grid.Column="2" TextColor="#C4ced8" Margin="0,3,0,3" Text="30. SEP" />
</Grid>
</Frame>
</Frame>
</ViewCell>
You could try adding padding to the top and bottom of the Frame e.g. Padding="0,20,0,20"? play with the values for top and bottom padding until you get your ideal result.
If that doesn't work try adding the padding to the ViewCell.
What you can do is add another RowDefinition to the grid and give it some height saw 20 and make this new RowDefinition as the first row and existing row as the second row.

Xamarin Forms: How to place one layout on top of another layout

I am trying to create a UI like below:
My Code:
<RelativeLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</RelativeLayout>
Current Output:
How can I create a layout like the top? What property of relative layout needs to use to achieve this?
In fact it's pretty simple, use the TranslationY property on your images view:
<Image Grid.Column="0"
TranslationY="-20"
Source="ic_daily_reading_icon_xx.png"
WidthRequest="30"
HeightRequest="30" />
Agree with #Roubachof. Or you can put the stacklayouts in the same grid cell .
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
<Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
<Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
<Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
<Grid HeightRequest="30">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="33.3*" />
<ColumnDefinition Width="33.4*" />
<ColumnDefinition Width="33.3*" />
</Grid.ColumnDefinitions>
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
<Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
</Grid>
</StackLayout>
</Grid>
You can do it this way:
<Grid>
<Button HeightRequest="50" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Red"/>
<Button HeightRequest="100" WidthRequest="50" HorizontalOptions="Start" VerticalOptions="Start" BackgroundColor="Green"/>
</Grid>
Pay attention to HorizontalOptions and VerticalOptions properties, these specify how controls are placed. (In my case the objects are anchored to top left corner)
And controls order matter. You can see that green button is on top of the red one, it's because in the code it's placed after the red one.
Just to supplement the solution by Alex Logvin, I was able to superimpose images and text with transparency over a photo in my gammaDog application:
<Grid>
<ffimageloading:CachedImage
x:Name="MyImage"
Source="{Binding MyImage}" >
</ffimageloading:CachedImage>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Rotation="{Binding Heading}"
Source="arrow.png"
Margin="75"
x:Name="ImageArrow"/>
<Image HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Rotation="{Binding HeadingCompass}"
Source="compass.png"/>
<Label Text="{Binding MyTitle, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"></Label>
<Label Text="{Binding MyNote, StringFormat='{0}'}"
FontSize="Large" TextColor="Red"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Bottom"></Label>
</Grid>

Adding a Frame into a grid from a c# Function that iterates through my data source (Observable collection)

Simply - my binding data will dictate what col / row to put it in..
I dont want to write multiple frame layout code into XAML - but rather write the fame once in page level or app level resource, then generate an instance of this - populate it - and put into the grid specified in the binding.
The bit where it says TASK 1 is the repeating element frame.
<Grid Margin="0" Padding="0" ColumnSpacing="2" RowSpacing="2" IsVisible="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- TASK 1-->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
<!-- TASK 2 -->
<Frame CornerRadius="5"
Grid.Row="0"
Grid.Column="1"
BackgroundColor="LightBlue"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Source="tbt_logo.png"
WidthRequest="64" HeightRequest="64"
Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
HorizontalOptions="Start"
/>
<Label Text="16"
Grid.Row="0" Grid.Column="1"
TextColor="Green"
FontSize="42"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End"
/>
<Label Text="Files sent"
Grid.Row="1" Grid.Column="1"
TextColor="Green"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End"
/>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="DarkGray" Margin="0,10,0,-10"></BoxView>
<Label Text="View Info"
Grid.Row="3" Grid.Column="0"
TextColor="Green"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="3" Grid.Column="1"
/>
</Grid>
</Frame>
</Grid>
</grid>
So, from the advisement of Sparsha Bhattarai, I created the frame template that i want to reuse.
FrameTemplate.Xaml
<?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="MMPTaskStats.Views.FrameTemplate">
<ContentView.Content>
<Frame CornerRadius="5" x:Name="task_color"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="White"
HorizontalOptions="Fill" VerticalOptions="Fill"
HasShadow="True" Padding="0">
<Grid Margin="0" Padding="10" ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="100*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
<RowDefinition Height="30" />
<RowDefinition Height="25" />
<RowDefinition Height="1" />
<RowDefinition Height="28" />
</Grid.RowDefinitions>
<Label Text="/ of 12"
x:Name="task_locale"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="Start"
VerticalOptions="Start" />
<Image x:Name="task_icon"
Source="tbt_logo.png"
HeightRequest="60" WidthRequest="50"
Grid.Row="1" Grid.RowSpan="3" Grid.Column="0"
VerticalOptions="Center" />
<Label Text="16"
x:Name="task_headline"
Grid.Row="1" Grid.Column="1"
TextColor="White"
FontSize="27"
Margin="0,0,0,-20"
FontAttributes="Bold"
VerticalTextAlignment="Start"
HorizontalTextAlignment="End" />
<Label Text="/ of 12"
x:Name="task_subline"
Grid.Row="2" Grid.Column="1"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="End"
HorizontalOptions="End"
VerticalOptions="End" />
<Label Text="Files sent"
x:Name="task_status"
Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
FontSize="Small"
VerticalTextAlignment="Start"
HorizontalOptions="End"
VerticalOptions="End" />
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="White" Margin="0,1,0,-1"></BoxView>
<Label Text="View Info"
Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
TextColor="White"
Margin="0,0"
FontSize="Small"
VerticalTextAlignment="End"
VerticalOptions="End"
HorizontalOptions="Start"
/>
<Image Source="tbt_logo.png"
WidthRequest="16" HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="End"
Grid.Row="5" Grid.Column="1"
/>
</Grid>
</Frame>
</ContentView.Content>
</ContentView>
Then the codeBehind for it looked like this.
namespace Project.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class FrameTemplate : ContentView
{
public FrameTemplate(string locale,string headline, string subHeadline, string icon, Color bgcolor, string status) : this()
{
//Here i have initialized the view from constructor, but you can simply set the binding of the view and set the properties. Do look into it. You can just as easily use the view in xaml but it will require a parameterless constructor. So, binding is important.
task_locale.Text = locale;
task_headline.Text = headline;
task_subline.Text = subHeadline;
task_icon.Source = icon;
task_color.BackgroundColor = bgcolor;
task_status.Text = status;
}
public FrameTemplate()
{
InitializeComponent();
}
}
}
THEN, in the page / view I want this to appear
var frame = new FrameTemplate("UK TP Stats", "999999", "/ of 999999", "tick.png", Color.Green, "Sent");
Grid.SetColumn(frame, 0);
Grid.SetRow(frame, 0);
MainGrid.Children.Add(frame);
This worked for me, which was great, I can now replicate this to do similar layouts etc as needed.
My Xamarin.Forms project is a Master/Detail template too, just in case anybody wanted to know :)

Unable to use a grid within a DataTemplate

I am unable to use a grid within a DataTemplate.
Specifically, text does not get rendered when using a grid.
<ListView ItemsSource="{Binding Services}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="2" Text="{Binding Name}" />
<Label Grid.Row="1" Grid.Column="0" Text="Labor:" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding LaborCost}" />
<Label Grid.Row="2" Grid.Column="0" Text="Materials:" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Materials, Converter={StaticResource MaterialsToCostConverter}}" />
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Description}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any suggestions?

Resources