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).
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>
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 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.
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
I am using the PerformanceProgressBar from Silverlight toolkit on the (pseudo) splashpage. However, it only displays one moving dot. What is wrong?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ActiveSplash" Height="Auto" Width="480" Background="Pink" Grid.Row="1" Visibility="Visible">
<Image Name="SplashScreenImage" Source="/SplashScreenImage.jpg"></Image>
<toolkit:PerformanceProgressBar Width="480" Height="Auto"
IsIndeterminate="True"
Foreground="Blue"
Background="Blue"
Margin="0,104,0,0" />
</Grid>
<Grid x:Name="ContentPanel" Visibility="Collapsed" Grid.Row="2">
<!-- stuff -->
</Grid>
</Grid>
Is your app doing a lot of processing while using the performance progress bar?
I've notices that the more you have in the UI thread, less points you see in the bar.
Try doing your processing in a background thread