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:
Related
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.
<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:
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>
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.
When layin out this form, I want a header the size of its content, footer the size of the content, and a middle that expands to take up the rest. Easy in XAML/UWP. But in Xamarin Forms when the ScrollView content has data it floats and overlays the top and bottom. Also when I drag/scroll the ScrollView it can go to the top of the screen. How to dock the scrollview properly so I have a scrolling middle region? Thx...
Pictures and XAML layout below....
<?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="BaseProject.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TableView Grid.Row="0" Intent="Settings" BackgroundColor="Blue" HeightRequest="150" >
<TableSection Title="Search">
<ViewCell>
<Button x:Name="Button_Search" Text="Go"/>
</ViewCell>
<EntryCell x:Name="Entry_Cell_SearchFor" />
</TableSection>
</TableView>
<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
<StackLayout BackgroundColor="Red" >
<Label Text="body" x:Name="Label_Body" BackgroundColor="Yellow" />
</StackLayout>
</ScrollView>
<StackLayout Grid.Row="2">
<Label Text="footer"/>
</StackLayout>
</Grid>
</ContentPage>
Set IsClippedToBounds property as true of ScrollView