I have a Xamarin.Forms grid that I'm setting up and I've noticed that the Entry fields are a lot higher (3 - 4 times) than label fields. I can't see any obvious reason why this would be the case.
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="G/C" FontSize="Small"/>
<Entry Grid.Row="1" Grid.Column="0" FontSize="Small" BackgroundColor="Red"/>
</Grid>
This results in something like this (on the default Android Emulator, installed 2 days ago);
Does anyone have any suggestions as to why the Entry height is so much bigger and what I can do to reduce it (obviously HeightRequest, but I'd rather avoid if possible)?
Based on your comments here is a suggestion to do what you want in XAML. You can bind Entry.HeightRequest to Label.Height to avoid setting it manually.
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="G/C" FontSize="Small" x:Name="MyLabel" />
<Entry Grid.Row="1" Grid.Column="0" FontSize="Small" BackgroundColor="Red" HeightRequest="{Binding Source={x:Reference MyLabel}, Path=Height}"/>
</Grid>
Use Star (*) as the height for the rows, this will make all rows have the same height. Auto will set the rows to a height that the control is just fitting in.
Related
enter image description hereI want to implement the xamarin essentials map, but with a floating search for the pins that will appear on this map. I'm using a grid to divide the grid's rows and thus use the first row for the map and the second to show a cardview related to the selected pin. I put the search control in row 0 so that it seems to float on the map.
I couldn't get the focus of the search control to work. I don't know if I'm implementing the InputTransparent property correctly.
Any ideas?
<Grid InputTransparent="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="140"/>
</Grid.RowDefinitions>
<maps:Map
x:Name="map"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
MapType="Street"
HasZoomEnabled="True"
IsShowingUser="True"
InputTransparent="False"
MoveToLastRegionOnLayoutChange="false"
>
</maps:Map>
<StackLayout Grid.Row="0" Grid.Column="0" InputTransparent="True">
<Frame
Margin="20,40,20,0"
Padding="0"
BorderColor="{StaticResource BlackColor}"
CornerRadius="8"
HeightRequest="35">
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
HeightRequest="20"
HorizontalOptions="Center"
Source="ic_search_bar"
VerticalOptions="Center"
WidthRequest="20" />
<controls:CustomEntry
x:Name="entrySearch"
Grid.Row="0"
Grid.Column="1"
FontSize="14"
HeightRequest="35"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Keyboard="Text"
Placeholder="¿Qué se te antoja hoy?"
PlaceholderColor="#979797"
ReturnCommand="{Binding SearchCommand}"
InputTransparent="False"
ReturnType="Search"
Text="{Binding SearchText}"
TextChanged="entrySearch_TextChanged"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
<Image
Grid.Row="0"
Grid.Column="2"
HeightRequest="15"
HorizontalOptions="Center"
Source="ic_clear_search.png"
VerticalOptions="Center"
WidthRequest="15">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClearSearchCommand}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
</StackLayout>
</Grid>
I try to use the property in many parts of the code
From the docs on InputTransparent
true if neither the element nor its children should receive input and
should, instead, pass inputs to the elements that are visually behind
the current visual element
Your stackLayout is transparent so it’s children, including the Entry, are also transparent
You might be thinking InputTransparent does the opposite of what it actually does. True makes an area effectively invisible to touch; touch goes through it.
If you want an element to be touchable, it has to be "False". BUT all its ancestors must also NOT BLOCK touch.
If you really mean "True", but you have children you want to click on, do this:
<SomeLayoutNameHere InputTransparent="True" CascadeInputTransparent="False" ...>
That allows children to specify whether they can receive touch (InputTransparent=False), or are invisible to touch (=True).
"False" is the default.
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>
I have a following structure of code in Xamarin application.
<StackLayout>
<Entry Text="XYZ"/>
<ScrollView>
<StackLayout VerticalOptions="Start">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView HeightRequest="1" BackgroundColor="Black"/>
<Entry Grid.Row="1" Text="ABCD" VerticalOptions="Center"/>
<BoxView Grid.Row="2" HeightRequest="1" BackgroundColor="Aqua"/>
<BoxView Grid.Row="3" HeightRequest="1" BackgroundColor="Blue"/>
<Label Grid.Row="4" Text="12" TextColor="Red" VerticalOptions="Start"/>
</Grid>
</StackLayout>
</ScrollView>
</StackLayout>
Entry text "ABCD" does not shown in UWP but it's working fine in android.
Please find the screenshot
See: https://github.com/xamarin/Xamarin.Forms/issues/10137
Try removing the outer ScrollView.
Fixes it for me (but long forms are not possible without redesign UX).
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>
How to display a three column layout usingHome.xaml , the below is still displaying as single column, I have added teh row definition and column definition with in the <Grid></Grid>, Please advise
<?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="soccerapp.Home" BackgroundColor="White" Title="Home">
<ContentPage.Content>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Player1" BackgroundColor="#f4d144"/>
<Label Grid.Row="1" Text="Player2" BackgroundColor="#ed4edd"/>
<Label Grid.Row="2" Text="Player3" BackgroundColor="#44ce9e"/>
<Label Grid.Row="3" Text="Player4" BackgroundColor="#44ce9e"/>
<Label x:Name="HomeLabel" Text="Home Page is here" TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" FontSize="Medium"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
Please find the below screen shot ( grid displaying in single column, this is not I want )
....I would like to display the Grid as per below screenshot:
first, you have only defined two columns, not three. Second, you are placing all of your labels in the first column
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Use Grid.Column to specify column -->
<Label Grid.Row="0" Grid.Column="0" Text="Player1" BackgroundColor="#f4d144"/>
<Label Grid.Row="0" Grid.Column="1" Text="Player2" BackgroundColor="#ed4edd"/>
<Label Grid.Row="0" Grid.Column="2" Text="Player3" BackgroundColor="#44ce9e"/>
</Grid>