How to update a DataTemplates (which is a custom view) height and width in xamarin forms? - xamarin

I have a content view which I will be using as a data template for a custom grid view, which will be supporting horizontal scrolling. And for the custom template I need to fix the width and height request depending on the device width and height. Below is the custom content view. How can i update the width and height request values?
<?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="GridView.BookshelfItem">
<ContentView.Content>
<Grid BackgroundColor="Black" WidthRequest="320">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ProgressBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="#E4E4E4" Progress="{Binding Progress}" HeightRequest="3" VerticalOptions="EndAndExpand"/>
<Image Source="" Aspect="AspectFill" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3"/>
<Label Text="{Binding Title}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="10,0,0,0" VerticalOptions="End" TextColor="#FFFFFF" FontSize="17"/>
<Image Source="icon.png" Aspect="AspectFill" Grid.Row="1" Grid.Column="1"/>
<StackLayout Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="10,0,0,0">
<Label Text="{Binding Description}" TextColor="#FFFFFF" FontSize="13"/>
<Label Text="{Binding DescriptionDetails}" TextColor="#FFFFFF" FontSize="15"/>
</StackLayout>
</Grid>
</ContentView.Content>
</ContentView>

Related

How to Center an image in each column inside one row in Xamarin?

I have this code:
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0-->
<StackLayout Grid.Row="0" Grid.Column="0" Padding="0,18,0,0">
<Image Source="male"
WidthRequest ="200"
HeightRequest="165"
TranslationX="5"
TranslationY="10"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="0,15,0,0">
<Image Source="female"
WidthRequest ="160"
HeightRequest="125"
TranslationX="5"
TranslationY="31"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
</Grid>
It looks centered in my designer, but when I run the code in my emulator it does not look centered. This is mostly the answers that I have found when I was searching on how to do it. I dont know If I have missed a certain property.
I am still new in Xamarin and I am still learning on how this works.
If you want to center the image, you could try the code below. Delete padding, TranslationX, TranslationY, add a column, and use the CenterAndExpand for layoutoptions. For better understanding, I use the backgroundcolor of stacklayout to show the results.
You could change the ColumnDefinition to Auto, it works as well.
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0 -->
<StackLayout
Grid.Row="0"
Grid.Column="0"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
Source="dog.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="200" />
</StackLayout>
<StackLayout
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="125"
HorizontalOptions="CenterAndExpand"
Source="pig.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="160" />
</StackLayout>
</Grid>

Xamarin ListView row is very small

I have a problem. I created this ContentPage with the 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding EmployeeName}" Grid.Column="1" Grid.Row="0" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" Grid.Row="1" Grid.Column="0"/>
<Image Source="VoteDown.png" VerticalOptions="Start" Grid.Row="2" Grid.Column="0"/>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"/>
<Image Source="Send.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But my result is as following:
However, the result I want to see should look like this:
So just to be clear:
The width of the picture must be 85% of the screen width
The height of the picture must be as large as the picture width, so
that it will be a square
The side next to the picture must be the remaining 15% of the screen
The upper and lower part of the row must be the height of the 15% screen width
Is this somehow possible?
try setting HasUnevenRows property to "True", and binding a list model to the list view, not directly in the Datatemplate

How to make Xamarin image expand vertically using VerticalOptions FillAndExpand

I'm learning the below Xamarin code, I would like to make each image fulfills its cell. I already tried VerticalOptions="FillAndExpand".
But it doesn't work. How to solve it?
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalOptions="FillAndExpand" BackgroundColor="Red" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image BackgroundColor="Blue" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image BackgroundColor="Green" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image BackgroundColor="Pink" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image BackgroundColor="Red" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
UPDATE1
I added Aspect="Fill" into each <Image>, and I get the below:
It works well but I notice there is a blank space above the first row, but I don't have any placeholder there,
<?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="Guru.Pwa.Mobile.Initial">
<ContentPage.Content>
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
</ContentPage.Content>
</ContentPage>
How to remove it?

Keyboard kneaded my layout in xamarin forms

When I click in a entry and the keyboard is oppened, all my layout is kneaded.
Like in the photos.
Before :
After:
This happend with my android and ios devices
I am using xamarin forms...does someone know how to solve that?
My xaml where only put the scroll view doesn't work:
<ScrollView BackgroundColor="Red">
<Grid RowSpacing="0" HeightRequest="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2.3*"/>
<RowDefinition Height="5.4*"/>
<RowDefinition Height="2.3*"/>
</Grid.RowDefinitions>
<Image Source="recuperarFundo" Grid.Column="1" Grid.Row="1" Aspect="Fill" HorizontalOptions="FillAndExpand"/>
<Grid Grid.Column="1" Grid.Row="1" RowSpacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="4*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="CenterAndExpand">
<Image Source="cadastrarVoltar" Margin="20,0,0,0" Grid.Column="0" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="Start">
<!--<Image.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="20,0,0,0"
iOS="20,0,0,0"/>
</Image.Margin>-->
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnClose"/>
</Image.GestureRecognizers>
</Image>
<Image Source="loginlogo" Margin="0,10,0,10" Grid.Column="0" Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Center"/>
</Grid>
<Grid Grid.Row="1" VerticalOptions="CenterAndExpand">
<Image Source="recuperarForms" Aspect="Fill" Grid.Column="0" Grid.Row="0" Margin="20,0,20,0"/>
<Grid Grid.Column="0" Grid.Row="0" RowSpacing="0" Padding="25,0,25,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<local:MyLabel x:Name="recupera_lbl" Text="Para recuperar sua senha, digite abaixo o e-mail cadastrado" Margin ="20,0,20,0" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" NamedFontSize="Small" Style="{Binding labelsfont}"/>
<local:MyEntry x:Name="recuperar_entry" Grid.Row="1" VerticalOptions="Center" Placeholder="Seu e-mail" TextColor="{StaticResource MarromClaro}" PlaceholderColor="{StaticResource MarromClaro}" FontSize="Small" HorizontalOptions="Fill" HorizontalTextAlignment="Center"/>
</Grid>
</Grid>
<Grid Grid.Row="2" VerticalOptions="FillAndExpand">
<ActivityIndicator Grid.Row="0" Grid.Column ="0" x:Name="recuperar_indicator" Color="DarkRed" HorizontalOptions="CenterAndExpand" IsVisible="false" IsRunning="true"/>
<Image Grid.Row="0" Grid.Column ="0" x:Name="recuperar_button" Source="recuperarButton" HorizontalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="CallingRecuperarSenhaAsync"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Grid>
</Grid>
use ScrollView as main container

How to create ScrollView in my layout

I want my ScrollView to join my StackLayout and my list so I can scroll it down, an example I saw that worked out was the one below but I was not able to implement it at my command
The way it is now it's from a scrowview in the List
This example worked out
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.TitleIcon="logoD">
<ScrollView>
<StackLayout x:Name="topo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
<Image.Source>
<UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</Grid>
</StackLayout>
<ListView x:Name="list" ItemsSource="{Binding list}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Categoria}" TextColor="#38B6AB" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
You shouldn't put a ListView inside a ScrollView as they both implement scrolling. What you should do is use the Header template of the ListView to put your Grid there. That way it will scroll with the ListView.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.TitleIcon="logoD">
<ListView x:Name="list" ItemsSource="{Binding list}">
<ListView.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250">
<Image.Source>
<UriImageSource Uri="{Binding img}" CacheValidity="5" CachingEnabled="True"/>
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped" />
</Image.GestureRecognizers>
</Image>
</Grid>
</DataTemplate
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Categoria}" TextColor="#38B6AB" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Data}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding hora}" TextColor="#474747" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
I was able to implement with this same example command
<ContentPage.Content>
<ListView ItemsSource="{Binding MonkeysGrouped}"
ItemTapped="Handle_ItemTapped"
ItemSelected="Handle_ItemSelected"
HasUnevenRows="true"
GroupShortNameBinding = "{Binding Key}"
IsGroupingEnabled = "true"
GroupDisplayBinding = "{Binding Key}">
<ListView.Header>
<cv:CarouselView x:Name="CarouselZoos" ItemsSource="{Binding Path=BindingContext.Zoos, Source={x:Reference MonkeysPage}}" HeightRequest="200">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
<Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage
BorderColor="Aqua"
BorderThickness="3"
HeightRequest="66"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFill"
WidthRequest="66"
Grid.RowSpan="2"
Source="{Binding Image}"/>
<Label Grid.Column="1"
Text="{Binding Name}"
VerticalOptions="End"/>
<Label Grid.Column="1"
Grid.Row="1"
VerticalOptions="Start"
Text="{Binding Location}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Resources