Xamarin forms vertically center text over image - xaml

I'm learning Xamarin and I want to display an image as background with some texto over this image...
Just that, I manage to acomplish, but the text is displayed at the top left corner of the image.
I'd like the text to be placed at the vertical center of the image, but stick to the left side of it.
My code so far XAML:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*" ></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<RelativeLayout Grid.Row="0">
<Image Source="login.png" Aspect="Fill" />
<Label Text="Bem vindo" TextColor="White" FontSize="22"></Label>
</RelativeLayout>
<Label Grid.Row="1" Text="linha 2" BackgroundColor="Coral"></Label>
<Button Grid.Row="2" Text="linha 3" BackgroundColor="DarkRed"></Button>
</Grid>
I've tried verticalOptions and such, but with no effect.
One thing that kind of worked is settin a Maring property to the label, but that way, the label would be centered only to the device I'm testing on. Other devices, smaller or greater, the label could (and probably would) be placed at the wrong place.
Any help?

You don't need a RelativeLayout inside the Grid. The Grid itself already is able to handle views overlay besides let your code clearer.
It may works:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*"></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="login.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="Fill" />
<Label Grid.Row="0" Grid.Column="0"
Text="Bem vindo"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="22"/>
<Label Grid.Row="1"
Text="linha 2"
BackgroundColor="Coral"/>
<Button Grid.Row="2"
Text="linha 3"
BackgroundColor="DarkRed"/>
</Grid>

Related

Rectangle in Xamarin forms does not honor the HeightRequest

I am trying to set the HeightRequest of a Rectangle to 10, but the height instead fills the entire height of the Grid. What am I doing wrong or is this a bug in Xamarin Forms. I am using Xamarin.Forms 5.0.0.2012.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<shapes:Rectangle Grid.Row="0" Grid.Column="0"
Fill="Green"
StrokeThickness="0"
WidthRequest="50"
HeightRequest="10"/>
<Label Grid.Row="0" Grid.Column="1"
Style="{StaticResource Subtitle1TextStyle}"
Text="Green area: ideally, your average lines would stay within your target range." />
<shapes:Rectangle Grid.Row="1" Grid.Column="0"
Fill="Black"
StrokeThickness="0"
WidthRequest="50"
HeightRequest="10"/>
<Label Grid.Row="1" Grid.Column="1"
Style="{StaticResource Subtitle1TextStyle}"
Text="Black line: The black line has a lot of text on this line. The Rectangle height keeps growing even though the height request has been set to 10." />
</Grid>
Because you are putting the Label and the black rectangle on the same Row (which have it Height set to Auto), it means it will take the maximum Height of the elements in that Row which in your case is the Label, thus the rectangle will get the same Height as the Label even that you have specified it HeightRequestto be 10.
To overcome this create another Row and span the Label over Row 2 and 3, also notice the new simplified syntax for ColumnDefinition and RowDefinition:
<Grid RowDefinitions="auto,auto,auto" ColumnDefinitions="auto,*">
<Rectangle Grid.Row="0" Grid.Column="0"
Fill="Green"
StrokeThickness="0"
WidthRequest="50"
HeightRequest="10"/>
<Label Grid.Row="0" Grid.Column="1"
Text="Green area: ideally, your average lines would stay within your target range."/>
<Rectangle Grid.Row="1" Grid.Column="0"
Fill="Black"
VerticalOptions="Fill"
StrokeThickness="0"
WidthRequest="50"
HeightRequest="10"/>
<Label Grid.Row="1" Grid.Column="1"
Grid.RowSpan="2"
TextColor="Black"
Text="Black line: The black line has a lot of text on this line. The Rectangle height keeps growing even though the height request has been set to 10."/>
</Grid>

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.

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

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

How to make this layout using XAML and Xamarin?

I would like to ask how can I make a design similar to the below image using XAML and Xamarin?
I mean a main image image and a profile image on the top of it with half of it only.. and the news title is on the main image then at the top right corner there is the news time.
Try this into ContentPage:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- header content -->
<StackLayout BackgroundColor="WhiteSmoke">
<Label HorizontalOptions="End" Text="8 hours ago" VerticalOptions="Center" FontSize="Large" FontAttributes="Bold"/>
</StackLayout>
<!-- body content -->
<StackLayout Grid.Row="1">
<Image Source="xamarin.png" Aspect="AspectFill"/>
</StackLayout>
<!-- profile image -->
<Image Source="usermale.png"
VerticalOptions="End" HorizontalOptions="Start"
HeightRequest="100" WidthRequest="100"
TranslationY="50"/>
</Grid>
Yuo will get this:

How to do the image fill the text - the same size always - xamarin.forms

I am trying to do a button with a image, and each button has a text inside...but I don't know so much about xamarin forms, I'm a beginner
And my images is little while the text is bigger than it...
I am using a grid...and inside it one other grid with 1 colunm and 1 row for each button (Image and texts)
I neet the image (that is my button) get the size of the texts that is inside it
My xml at the moment:
<!-- Buttons grid-->
<Grid HorizontalOptions="Center" Margin="20,20,20,20" RowSpacing="30" ColumnSpacing="10" BackgroundColor="Aquamarine" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--One of my buttons grid, there are 4 others as this one-->
<Grid Grid.Column="0" Grid.Row="1" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MapaClique"/>
</Image.GestureRecognizers>
</Image>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="Location.png" VerticalOptions="FillAndExpand"/>
<Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
</StackLayout>
</Grid>
</Grid>
In android I could solve that using wrap_content
But here, in xamarin forms, I don't know how to solve it
The gray part is the grid item size
If you need the exact size of the Text to be the width of your Image then you will have to use RelativeLayout.
In the RelativeLayout for the Image width use RelativeToView.
This is similar to the Relative Layout in Android.
<RelativeLayout>
<Image RelativeLayout.WidthConstraint="{ConstraintExpression Type=Type=RelativeToView, ElementName=myStacklayout,Property=Width,Factor=1}" Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MapaClique"/>
</Image.GestureRecognizers>
</Image>
<StackLayout x:Name="myStacklayout" HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="Location.png" VerticalOptions="FillAndExpand"/>
<Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
</StackLayout>
</RelativeLayout>
Using one or 2 relative layouts won't affect you much. But if you think it does you can write a custom render and create a complex button in the native layer.