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>
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 🙂
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>
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 :)
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>