I want to set the height of the Entries showed on the next peace of code of a Xamarin.Forms project but it just doesn't work..
If I set the height of the row to something like: Height="1.3*", the Entry takes the whole height of the row but the placeholder won't be vertical aligned so I would like to use HieghtRequest instead.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage BackgroundColor="White">
<Grid BackgroundColor="Transparent" RowSpacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="5*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="FillAndExpand" HorizontalOptions="CenterAndExpand" Padding="0, 30, 0 ,0" RowSpacing="15">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0" Placeholder="{Binding emailAddress}" VerticalOptions="Center" HeightRequest="70" WidthRequest="330" BackgroundColor="Gray" TextColor="Black" HorizontalOptions="CenterAndExpand"/>
<Entry Grid.Row="1" Placeholder="{Binding password}" HeightRequest="300" VerticalOptions="Center" WidthRequest="330" IsPassword="true" BackgroundColor="Gray" TextColor="Black" HorizontalOptions="CenterAndExpand"/>
<StackLayout Grid.Row="2">
</StackLayout>
<Button Grid.Row="4" BackgroundColor="Red" TextColor="White" HorizontalOptions="CenterAndExpand" Text="{Binding signIn}" HeightRequest="70" WidthRequest="330"/>
</Grid>
<Grid Grid.Row="1">
</Grid>
</Grid>
Entry Height is not working because you have given 1* as RowDefinition. You can set RowDefinition as Auto and set HeightRequest againt each controls as prefered.
Also Use YAlign="Center" to vertically align the text. I hope this will help
Related
When the Label moves to another line, the Grid shifts.
There is a grid with two Columns and two Rows. The left rows are connected. They should have a BoxView with an image, the BoxView creates a border effect. The Image must be centered inside the cell and inside the BoxView, which is also centered. In the right column of the top row, there should be a StackLayout with a Label. When two lines of text are placed in the Label, the left column is shifted from the top. I'm wondering if it's even possible to edit the right part of the grid without affecting the left in any way?
Screenshot
There is no such problem in the video, following the example of which I make.
https://youtu.be/tMdHE4UROFg?t=2631
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
Just as Steve implied, if you want to remove the shift when label move to another line, you should set the VerticalOptions of the BoxView to Start.
Code Sample:
<BoxView
x:Name="BookBorderBoxView"
Grid.RowSpan="2"
HeightRequest="218"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="153"
Color="Red" />
<Image Source="XamarinLogo"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HeightRequest="220"
WidthRequest="133"
HorizontalOptions="Center"
VerticalOptions="Start"
Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAA"
FontSize="18"
FontAttributes="Bold"/>
</StackLayout>
So I dug into the truth, it turns out my problem was the empty bottom row of the grid.
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
<Grid>
<StackLayout Grid.Column="1" Grid.Row="1">
<Label Text="aaaaa" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
Good afternoon all,
Having an interesting issue here where by I have 4 buttons within a grid that all work ... kind of ... the top two buttons work without an issue however the bottom two you can only click the top half of the button otherwise it does not register the action.
Below is the Xaml code I am using ... Hope this helps... so far everything I have read doesn't seem to work so I can only assume I am missing something very simple.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HomemasterMobileApplication.Views.HomePage"
Title=""
BackgroundImageSource = "HousingBackground2">
<ContentView >
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="260"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="1" />
<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" Padding="0,0,0,0" VerticalOptions="Center" Opacity="0.8" BackgroundColor="#002D485D" >
<ContentView>
<ImageButton Source="HomeMasterLogo.png" HeightRequest="100" CornerRadius="25"/>
</ContentView>
</StackLayout>
<StackLayout Grid.Row="3" Orientation="Horizontal" Padding="0,15,0,0" Spacing="5" HorizontalOptions="Center">
<Grid>
<Grid.ColumnDefinitions >
<!--0--><ColumnDefinition Width="10*"/>
<!--1--><ColumnDefinition Width="40*"/>
<!--2--><ColumnDefinition Width="10*"/>
<!--3--><ColumnDefinition Width="40*"/>
<!--4--><ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!--0--><RowDefinition Height="10"/>
<!--1--><RowDefinition Height="125"/>
<!--2--><RowDefinition Height="40"/>
<!--3--><RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Button ImageSource="homeuser24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Your Account"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnAccountClick"
Grid.Row="1" Grid.Column="1"
/>
<Button ImageSource="toolsadd24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Log a Repair"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnRepairRequestClick"
Grid.Row="1" Grid.Column="3"
/>
<Button ImageSource="toolsinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="Track a Repair"
FontSize="14"
Clicked="OnCheckRepairsClick"
Grid.Row="3" Grid.Column="1"
/>
<Button
Clicked="OnPersonalDetailsClick"
ImageSource="userinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="My Details"
FontSize="14"
Grid.Row="3" Grid.Column="3"
/>
</Grid>
</StackLayout>
</Grid>
</ScrollView>
</ContentView>
You need to use the DN function within the grid to adjust the grid height.
First, you define the grid on the outermost layer. The problem lies in Grid.Row="3".
Then you create another Grid in Grid.Row="3",But the height of Grid.Row="3" you define in the outer Grid is 260.Your internal view height exceeds it. Therefore, the view will be overwritten.
In general, you only need to increase the height of the external Grid.
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="400"/>
<!--Change the bottom height to 400-->
</Grid.RowDefinitions>
....
</ScrollView>
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>
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
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>