UI looks cropped in initial load for ios using xamarin.forms - xaml

<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="6,2,6,2">
<Frame BackgroundColor="White" CornerRadius="5" Margin="10,5" HasShadow="False" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</Frame><Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Item1" />
<Label Grid.Row="1" Text="Item2" />
<Label Grid.Row="2" Text="Item3" />
</Grid>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
While with the initial load of the page UI looks like 3rd label is cropped and if I revisits the page the 3rd label showing correctly.how to show the UI perfectly with the initial load itself.issue is only occuring in ios.

From shared code, I have tested in local site on iOS. However, there is no problem in iOS device.
In addition, there is problems about this Xaml code. The Frame layout not contains the Grid , the running effect as follows:
If I put it inside will show as follows:
I also tested in Android device, however it cropped the third lable. If want to make it shows fully, we can add RowHeight for ListView, as follows:
<ListView x:Name="listview" RowHeight="125">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView Padding="6,2,6,2" BackgroundColor="AliceBlue">
<Frame BackgroundColor="White"
CornerRadius="5"
Margin="10,5"
HasShadow="False"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0"
Text="Item1" />
<Label Grid.Row="1"
Text="Item2" />
<Label Grid.Row="2"
Text="Item3" />
</Grid>
</Frame>
</ContentView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The effect:

Related

Xamarin stacking text below an image

I am trying to figure out how to center the image and text and push the text "Cache 3" directly below the image without the bottom red space. This stacklayout is in a collection so the images are of different heights hence I can't set a HeightRequest per se.
This is my XAML:
<StackLayout>
<Frame
Margin="10"
Padding="0"
BorderColor="{StaticResource Gray-500}"
CornerRadius="5"
HasShadow="False"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Margin="15"
Aspect="AspectFit"
BackgroundColor="Red"
Source="{Binding Image, Converter={StaticResource BytesToImageSource}}" />
<Label
Grid.Row="1"
Padding="15,0,15,15"
FontSize="18"
HorizontalTextAlignment="Center"
Text="{Binding Data}"
TextColor="{StaticResource Gray-900}"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
</StackLayout>

Xamarin forms CollectionView data in two columns does not align in lines on iOs

I have a problem on iOs. On android CollectionView items aligns perfect, but on iOS not. Screenshots:
Android screenshot: https://i.stack.imgur.com/7v2lK.png
iOs screenshot: https://i.stack.imgur.com/YCwsa.jpg
My code:
<CollectionView x:Name="FlowersList" VerticalOptions="EndAndExpand" BackgroundColor="Transparent" >
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" x:Name="grid_layout" Span="2" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="nuline_row" Height="Auto"/>
<RowDefinition x:Name="pirma_row" Height="Auto"/>
<RowDefinition x:Name="antra_row" Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="nulinis_stulpelis"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
Aspect="AspectFill"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</Image>
<Label Grid.Row="1"
Text="{Binding Name, Converter={StaticResource caseConverter}, ConverterParameter=u}"
FontSize="16"
TextColor="Black"
LineBreakMode="WordWrap"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
VerticalOptions="Start" />
<Label Grid.Row="2"
Text="{Binding PriceToDisplay, StringFormat='{0} €'}"
FontSize="16"
TextColor="Black"
LineBreakMode="WordWrap"
HorizontalOptions="Center"
VerticalOptions="Start" Padding="0,-5,0,20" />
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I have out of ideas. Maybe someone know how to solve this problem?
This may caused by the size of image is different by default:
Solution:
1.Give a specific height in the Grid:
<Grid.RowDefinitions>
<RowDefinition x:Name="nuline_row" Height="150"/>
<RowDefinition x:Name="pirma_row" Height="Auto"/>
<RowDefinition x:Name="antra_row" Height="*"/>
</Grid.RowDefinitions>
2.Or give a heightRequest to Image:
<Image Grid.Row="0"
Source="{Binding Image, Converter={StaticResource Base64ToImageConverter}}"
HeightRequest="150"
Aspect="AspectFill"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
</Image>
just upgrade xamrin Froms Version.
Xamarin.Forms CollectionView Introduction
I have also ran into simular problems with using grids like this inside Data Templates on iOS. I can't explain why it's not working reliable, but I managed to work around it by switching to stacklayout + putting the HeightRequest="150" on the Image. Seen as you're basically using the grid as a vertical stack, you might want to try this one.

Collapse Labels and ListViews in Xamarin Forms

I've got a relatively simple view which looks something like this:
{Label1}
{Label2}
{ListView1}
{Label3}
{ListView2}
The Label2 and ListView1's IsVisible properties are binded to a bool property. When false, they don't appear however, they take up space on the UI meaning there's a considerable gap between Label1 and Label3 like this:
{Label1}
{Label3}
{ListView2}
How can I make them appear like this instead:
{Label1}
{Label3}
{ListView2}
My XAML code looks like this:
<AbsoluteLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Text="Title"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontSize="Large"
FontAttributes="Bold"
Margin="5"
BindingContext="{x:Reference DashboardPageView}"
IsVisible="{Binding DisplayFloatingTitle}"
Grid.Row="0" />
<Label
Text="Notifications"
HorizontalOptions="Start"
VerticalOptions="Center"
TextColor="White"
FontSize="Medium"
FontAttributes="Bold"
Margin="3"
IsVisible="{Binding HasNotifications}"
Grid.Row="1" />
<ListView Grid.Row="2"
ItemsSource="{Binding Notifications}"
HasUnevenRows="True"
VerticalOptions="Start"
IsVisible="{Binding HasNotifications}"
SeparatorVisibility="None" Margin="1,0"
x:Name="NotificationsList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
........
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label
Text="Activities"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="White"
FontSize="Medium"
FontAttributes="Bold"
Margin="3"
IsVisible="{Binding HasActivities}"
Grid.Row="3" />
<ListView Grid.Row="4"
ItemsSource="{Binding Activities}"
HasUnevenRows="True"
VerticalOptions="Start"
SeparatorVisibility="None" Margin="4,0"
x:Name="ActivitiesList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
....
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</AbsoluteLayout>
The problem is this line in your XAML:
<RowDefinition Height="*" />
It's set to *, which means it will take up all remaining space that it can get. If you want the content of this row to size automatically to it's content's size, you should use Auto:
<RowDefinition Height="Auto" />

Listview XAML in Xamarin.Forms with button

I have the following image below which I have tried to design in XAML- Xamarin forms.
The xaml code is as follows:
<ListView x:Name="myList" HasUnevenRows="true" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#edeeef" BorderColor="#edeeef">
<Frame.Content>
<Frame OutlineColor="Transparent" BackgroundColor="White">
<Frame.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding ItemName}"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"/>
<Label Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)" FontSize="11" HorizontalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal">
<Button Text="OBD" />
<Button Text="CUS" />
</StackLayout>
</StackLayout>
<BoxView
VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
HeightRequest="5"
Color="Blue"
Grid.Row="0"
Grid.Column="1"/>
<ffsvg:SvgCachedImage
Aspect="AspectFit"
VerticalOptions="Center"
Source="Bin.png"
Grid.Column="2"
Grid.Row="0"
/>
</Grid>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The issue that I am having is that I am unable to draw the vertical right line separating the content and the square red box on the right.
When I am adding the image, it is adding extra padding on the bottom.
Can someone please help me to align the components properly as in the image above in XamarinForms? Thanks.
Your design is quite messed up and should be cleaned up
Within the ViewCell, you have two nested Frames, which causes the main issue: There is a padding on the inner Frame that and on the outer one, which prevent the separator to take the full height
A nested Grid and StackLayout is most likely not necessary and definitely detrimental for your performance
Suggestions:
Remove the outer Frame and add a Margin to the inner one
Set the Padding of the inner frame to 0
Remove the StackLayout wrapped in the Grid and add the controls to the Grid
Add the Grid.RowSpan and Grid.ColumnSpan for controls that take more height/width in the Grid
Your XAML within the ViewCell will look like this:
<Frame Padding="0"
Margin="5"
BorderColor="Transparent"
BackgroundColor="White"
CornerRadius="10">
<Grid ColumnSpacing="0" RowSpacing="5" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="ItemName"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="2"
Margin="10,10,10,0" />
<Label Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)"
FontSize="11"
HorizontalOptions="StartAndExpand"
Margin="10,0,0,0" />
<Button Text="OBD"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="0"
Margin="10,0,5,10" />
<Button Text="CUS"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="1"
Margin="0,0,10,10" />
<BoxView VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
Color="LightPink"
Margin="0"
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="3" />
<Image Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="End"
Source="http://lorempixel.com/output/abstract-q-c-200-200.jpg"
Grid.Column="3"
Grid.Row="0"
Grid.RowSpan="3"
Margin="10"/>
</Grid>
</Frame>
And eventually the design looks like that (There is still space for tweaking, but basically that's it. I've changed the colors a bit for better visibility):
Follow this Code.
<Grid Grid.Row="3" Padding="{StaticResource Padding15050}">
<ListView x:Name="ListViewFood" ItemsSource="{Binding FoodList}" HasUnevenRows="True" ItemSelected="OnSelection" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="{StaticResource Padding510}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Controls:Label x:Name="LabelName" Grid.Row="0" Text = "{Binding Name}" Font="17" TextColor="{StaticResource Black}"/>
<Controls:Label x:Name="LabelDescription" Grid.Row="1" Text = "{Binding Description}" Font="15" />
<Controls:Label x:Name="LabelPrice" Grid.Row="2" Text = "{Binding Price}" Font="15" TextColor="{StaticResource YetiBlue}"/>
</Grid>
<Grid Grid.Column="1">
<Controls:RectangleButton Text="Add" Font="Bold,15" VerticalOptions="Start" HorizontalOptions="EndAndExpand" CommandParameter="{Binding Id}" Clicked="RectangleButton_Clicked"/>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Design like this.
If you want to add a separate line, you just need to add a BoxView in your xaml with WidthRequest=1.
I always use this solution for separating content.
In your case I would suggest to delete HeightRequest in your BoxView.

ViewCell not align correctly and cut part of content - Xamarin Forms

I have a ListView in Xamarin Forms XAML, in this ListView I want to draw a Grid with 4 labels and 1 Entry. My problem is that, when I try to display the ListView, its rows are superimposed and not all the content of the ViewCell, into the DataTemplate, is displayed.
I don't know what is my error.
Here my code:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="iGuideTest.ExhibitionsPage"
Title = "{Binding titleMenu}">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="You are in the Exhibitions page" />
<Button Text="Return to LoginPage" Command="{Binding BackCommand}" />
<Label Text="{Binding exhibitionsList.Count}" />
<Button Grid.Row="2" Grid.Column="0" Text="{Binding surname}" Command="{Binding Edit}" />
<ListView x:Name="ListViewCouchbase" ItemsSource="{Binding exhibitionsList}"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" TextColor="#05199C" Text="{Binding title}" />
<Label Grid.Row="0" Grid.Column="1" TextColor="#008000" Text="{Binding userId}" />
<Label Grid.Row="1" Grid.Column="1" TextColor="Maroon" Text="{Binding LastUpdated}" />
<Label Grid.Row="1" Grid.Column="0" TextColor="Purple" Text="{Binding surname}" />
<Entry Grid.Row="2" Grid.Column="0" TextColor="Blue" Text="{Binding Id}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
Thanks in advance.
Try to use HasUnevenRows property:
<ListView HasUnevenRows="True">
...
</ListView>
Since you are using a Grid and you have Auto in RowHeight you will be better of setting HasUnevenRows property to true.
Also your grid is of dynamic size on its own, you can set its VerticalOptions to Fill.
Yes, i've been there :)
just set ListView RowHeight="xx" where xx is some double indicating the height.