Need to draw a hierarchy like below image
I would suggest you use a Grid to achive the layout on the image.
here is an example how to use a Grid to achive the desired hierarchy:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//TOP
<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalOptions="Center">
<Image Source="image_top" />
</StackLayout>
//CENTER
<StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Center">
<Image Source="image_center_left" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" HorizontalOptions="Center">
<Image Source="image_center_right" />
</StackLayout>
//BOTTOM
<StackLayout Grid.Row="2" Grid.Column="0" HorizontalOptions="Center">
<Image Source="image_bottom_far_left" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="1" HorizontalOptions="Center">
<Image Source="image_bottom_left" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="Center">
<Image Source="image_bottom_right" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="3" HorizontalOptions="Center">
<Image Source="image_bottom_far_right" />
</StackLayout>
</Grid>
Note: if you want to use the lines connecting the hierarchy (assuming that they are images), you will need to add 2 extra rows and add them between the images rows.
Related
I am struggling with two things in xamarin forms layout. As shown on the picture i need to make more space for edidor control (highlited as 1) as this will be the place for user's comment. I would like to extend it to the right (max width). Second thing is i need to move buttons to the bottom which i thought i could solve that by settiung VerticalOptions="End" in the <Grid Grid.Row ="4" (higlighted as 2). How can i solve both things up? Below also full xaml code.
Xaml:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MobileAppXamarinForms.Views.Order.OrderHatModifyPage"
Title="{Binding SelectedHatOrder.OrderId, StringFormat='Numer zamówienia: {0}'}">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row ="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedHatOrder.OrderId, StringFormat='NUMER ZAMÓWIENIA: {0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="2"
FontSize="15"
HorizontalOptions="Start"
Text="KLIENT:"
VerticalOptions="Center" />
<Label
Grid.Column="3"
Padding="5,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedClient.Value, StringFormat='{0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="4"
HorizontalOptions="StartAndExpand"
Text="NA DZIEŃ:"
VerticalOptions="Center" />
<DatePicker
Grid.Column="5"
Date="{Binding SelectedTargetDate, Mode=TwoWay}"
Format="dd.MM.yyyy"
HorizontalOptions="StartAndExpand" />
</Grid>
<Grid Grid.Row ="1" Margin="5" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<!--szerokosc, aby zmiescila sie nazwa butli-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="KWOTA:"
TextColor="Gray"
VerticalOptions="Center" />
<Entry
Grid.Column="1"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Kwota"
Text="{Binding SelectedPrice, Mode=TwoWay}" />
<Label
Grid.Column="2"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="3"
FontSize="15"
HorizontalOptions="Start"
Text="ILOŚĆ:"
VerticalOptions="Center" />
<Entry
Grid.Column="4"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość"
Text="{Binding SelectedAmount, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row ="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Komentarz:"
TextColor="Gray"
VerticalOptions="Center" />
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
</Grid>
</Grid>
<Grid Grid.Row ="3" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Typ płatności:"
TextColor="Gray"
VerticalOptions="Center" />
<Picker
Grid.Column="1"
Title="Typ płatności"
FontSize="15"
HorizontalOptions="FillAndExpand"
ItemDisplayBinding="{Binding Value}"
ItemsSource="{Binding PaymentTypes}"
SelectedIndex="{Binding Id}"
SelectedItem="{Binding SelectedPaymentType, Mode=TwoWay}"
VerticalOptions="Center" />
<Label
Grid.Column="2"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Ilość dni:"
TextColor="Gray"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
VerticalOptions="Center" />
<Entry
Grid.Column="3"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość dni"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
Text="{Binding SelectedDaysCount, Mode=TwoWay}" />
</Grid>
<!-- Buttons section -->
<Grid Grid.Row ="4" VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
BackgroundColor="DarkMagenta"
Command="{Binding SaveOrderCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Zatwierdz"
TextColor="White"
HorizontalOptions="FillAndExpand" />
<Button
Grid.Column="1"
BackgroundColor="MediumVioletRed"
Command="{Binding ExitCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Anuluj"
TextColor="White"
HorizontalOptions="FillAndExpand" />
</Grid>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So, as #Jason said in the comments, you have to remove the <StackLayout /> because it prevents the Grid to fill the page.
Thus, for your other issue, I tried to reproduce it.
I've found that if you change the HorizontalOptions of your <Editor /> from CenterAndExpand to FillAndExpand this solves the issue (you can also remove the HorizontalOptions altogether).
So, instead of:
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Try:
<Editor
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Or:
<Editor Grid.Column="1"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
For more about this: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
For good measure, you can also remove Keyboard="Text" since Keyboard's default value is already Text 😉
I hope this solved your issue.
However, if you've got any concerns with my Answer please let me know 🙂
For some reason my button is not showing I want the bottom to be at the bottom and green but its not. Also is their any kind of editor for grids and placements of controls would make this easier.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.RunningPage">
<ContentPage.Content>
<Grid Padding="30,40,40,10">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label x:Name="lblduration" Text="Duration"></Label>
</StackLayout>
<Frame Grid.Column="0" Grid.Row="0" x:Name="frameTotalSpeed" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Speed(miles)"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotaldistance" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lbldistanceText" Text="Dist" HorizontalOptions="Center"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="0" x:Name="frmTotalMilesLeft" Grid.Row="1" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblDistanceLeft" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblavgPace" Text="Avg Pace (Min/Mil)"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" Grid.Row="1" x:Name="frmTotalCarolesBurned" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblTotalCalories" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblTotalCaloriesBurned" HorizontalOptions="Center" Text="Calories Burned"></Label>
</StackLayout>
</Frame>
<Button Grid.ColumnSpan="2" Grid.Row="3" Text="Start Workout"></Button>
</Grid>
</ContentPage.Content>
If you give each row with a fix height 200, then the Y position of row 3 is start from 600 and it may larger than the height of the screen. You add the Button at row 3 and it is out of the bounds of the screen. Then you won't see it in the screen.
Use a Auto would be better, it will automatically sizes to fit content in the row or column. You can also set the ColumnSpacing and RowSpacing to add some space between row and columnspace:
<Grid Padding="30,40,40,10" ColumnSpacing="30" RowSpacing="70">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Read the document about Grid to get more information and you can use StackLayout to achieve the UI too.
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>
I am trying to create a simple tab control with XAML. Everything is great, but the bottom BoxView that should extend the bottom line of the tabs is drawing on the top of the grid cell. How can I move this to the bottom of the grid cell? I have a red arrow pointing to the line (BoxView) that should be at the bottom.
You can see I have VerticalOptions=End, but it doesn't do anything. It always draws at the top.
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
BackgroundColor="Gray"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End"
/>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
</Grid>
I ran the exact code you posted and I see no problem with the line. Both iOS and Android (devices) are showing the line at the bottom of the Grid.
Used a red color so it can be noticed.
As can be seen the issue there is that the line is behind the rest. To fix this you just need to move the line declaration to last in the grid.
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
<BoxView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
BackgroundColor="Red"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End"
/>
</Grid>
The above will result in something like this:
In your sample I see you have a 20 margin (Top) on the bottom line, if that's on purpose and you want a 20 separation between the boxes and the bottom line. I would move the bottom line to a second row in the grid and remove the RowSpacing.
Something like this:
<Grid HorizontalOptions="FillAndExpand"
RowSpacing="0"
Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
<BoxView Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="Gray"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End" />
</Grid>
Would be something like this:
Hope this helps.-
I tried your code, but there was no such problem. I made some modifications, and you could check it whether the effect is what you need :
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
</Grid>
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 :)