Control is pushed from the screen - xaml

I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution.
Here is my code:
<ContentPage.Content>
<StackLayout>
<ScrollView>
<StackLayout Margin="30">
... Many controls are here
</StackLayout>
</ScrollView>
<StackLayout
x:Name="Validation"
HeightRequest="150"
IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
<Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Text="{Binding Errors}" TextColor="Red" />
</StackLayout>
<Button
Text="Calculate"
Command="{Binding CalculateCommand}"
Style="{StaticResource ButtonStyle}"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
ADDED:
I did not mention that the content of the page is within a ControlTemplate:
<ControlTemplate x:Key="MainPageTemplate">
<Grid>
<Label Text="{Binding ErrorMessage}" TextColor="Red" />
<ContentPresenter Margin="10, 0, 10, 120" />
<StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
<Label Text="All trademarks shown are the intellectual properties of their respective owners." />
</StackLayout>
</Grid>
</ControlTemplate>

Agree with #Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="150" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" Orientation="Both">
<StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
</StackLayout>
</ScrollView>
<Grid HeightRequest = "150" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
</Grid>
<Button
Grid.Row="2"
Text="Calculate"
HorizontalOptions="CenterAndExpand" />
</Grid>

Related

Xamarin stacking text below an image

I am trying to figure out how to center the image and text and push the text "Cache 3" directly below the image without the bottom red space. This stacklayout is in a collection so the images are of different heights hence I can't set a HeightRequest per se.
This is my XAML:
<StackLayout>
<Frame
Margin="10"
Padding="0"
BorderColor="{StaticResource Gray-500}"
CornerRadius="5"
HasShadow="False"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Margin="15"
Aspect="AspectFit"
BackgroundColor="Red"
Source="{Binding Image, Converter={StaticResource BytesToImageSource}}" />
<Label
Grid.Row="1"
Padding="15,0,15,15"
FontSize="18"
HorizontalTextAlignment="Center"
Text="{Binding Data}"
TextColor="{StaticResource Gray-900}"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
</StackLayout>

Overflowing text onto the next line in a Grid

I have a Grid where I have defined the Height as 50, and then displaying a bunch of labels bound to a List. How can I overflow the Labels from row to row instead of what's happening now which is squeezing the Labels vertically?
public List LabelList { get; set; } = new List
{
"Cat",
"Dog",
"Fox",
"Leopard",
"Bear",
"Monkey",
"Lion",
"Bison",
"Alpaca",
"Sheep",
"Ant",
"Fox",
"Tiger",
"Elephant",
"Mouse",
"Eagle",
"Coyote"
};
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
Text="{Binding}" />
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />
What is happening now:
What I want to achieve (this is photoshopped):
I had to use FlexLayout instead of StackLayout
<FlexLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Wrap="Wrap">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</FlexLayout>
Have you tried something like?:
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</StackLayout>
From what I gather, you haven't set your LayoutOptions for the labels you are trying to stack.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout
If you want to display UI like the screenshot, you can take a look the following code:
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

Xamarin forms - unwanted extra space under TableView

I am creating my first Android app. I want to show TableView with some input fields and then a button to process the inputs.
I don't know why but there is extra space under TableView or the button is aligned to the bottom but it is opposite to the settings.
Can you help me fix it?
<StackLayout Orientation="Vertical" VerticalOptions="Start" Padding="20,15,20,0" Spacing="0">
<Label Text="This is TableView"></Label>
<TableView Intent="Settings" VerticalOptions="Start">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 1"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="item 2"/>
<Entry></Entry>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Label Text="TableView - END"></Label>
<Button Text="My button" TextColor="DodgerBlue" VerticalOptions="Start" HorizontalOptions="Fill" Margin="40, 10, 40, 10"/>
<Frame VerticalOptions="StartAndExpand" BackgroundColor="Transparent" BorderColor="Black">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" HorizontalOptions="Fill">
<Label Text="aaaa" HorizontalOptions="StartAndExpand"></Label>
<Label Text="value" HorizontalOptions="End"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="aaaa"></Label>
<Label Text="value"></Label>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
Your best option is to define the RowHeight for each cell, and then specify the HeightRequest for the tableview. this way you can define the space it will occupy
<TableView Margin="0" Intent="Settings" HeightRequest="120" RowHeight="60" VerticalOptions="Start">
Unfortunately, this is how Xamarin.Forms TableView/ListView works. It is not expected to have anything below it. If you need something below you can either set the height of TableView manually or to put the content in the last cell, neither thing is perfect but in any case you need to look for some workaround as this is behavior by design (it would be a bit easier if you could use the ListView instead of TableView).
As you were asking what you can do besides using a TableView, of course a Grid would be possible, please see the following example:
<Grid VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <!-- for the label -->
<ColumnDefinition Width="*" />
<Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" /> <!-- For the separator, you might have to experiment with the height -->
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label Text="Item 1" />
<Entry Grid.Row="0" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
<Label Grid.Row="2" Grid.Column="0" Text="Item 2" />
<Entry Grid.Row="2" Grid.Column="1" />
<BoxView BackgroundColor="Black"
HeightRequest="1"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2" /> <!-- The separator -->
</Grid>
I am using BoxViews with a black background color and a HeightRequest of 1 for the separator. You might have to experiment with the color and the height to get the results you want. Values below 1 are possible and result in finer lines. In a real world example I've used .5.
Anyway, this makes the XAML way more cluttered. Grid-designs (while I am using them myself) tend to get quite unwieldy.
I am not sure if this what you are looking for but my understanding of the question tells me you are talking about the label Value being away from the rest.
if you check the code for this label :
<Label Text="value" HorizontalOptions="End"></Label>
the HorizontalOptions is set to "End" which is causing this changing it to start will fix your problem
Feel free to revert in case if I missed anything
Goodluck

keyboard popup its hide last row of grid

I have using AppCompact Themes in xamarin forms android when keyboard popup its hide last row of grid
Before Keyboard Popup see Image
Below is my code. I've created the grid having title, description. I want to show the camera icon and its bar above the keyboard when it comes and go back to the bottom of the screen when the keyboard hides.
<Grid RowSpacing="0" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackLayout
Grid.Row="0"
Padding="10,8"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal">
<Entry
x:Name="GeneralPostTitle"
Margin="10,10,10,0"
FontSize="20"
HorizontalOptions="FillAndExpand"
Placeholder="Title"
PlaceholderColor="Gray"
TextColor="Black"
VerticalOptions="End" />
</StackLayout>
<StackLayout
Grid.Row="1"
Padding="10,0"
BackgroundColor="White"
HorizontalOptions="FillAndExpand"
Spacing="0"
VerticalOptions="FillAndExpand">
<StackLayout Padding="0" VerticalOptions="Fill">
<customRenderer:PlaceholderEditor
x:Name="EditorDescription"
Margin="10,10,10,0"
FontSize="22"
HeightRequest="130"
HorizontalOptions="Fill"
Placeholder="Add Description"
PlaceholderTextColor="Gray"
TextColor="Gray" />
</StackLayout>
<ScrollView Padding="10" Orientation="Horizontal">
<StackLayout
x:Name="Images"
HorizontalOptions="FillAndExpand"
Orientation="Horizontal"
Spacing="5" />
</ScrollView>
</StackLayout>
<StackLayout
Grid.Row="2"
Padding="20,0"
BackgroundColor="#FAFAFA">
<Image
Aspect="AspectFit"
HeightRequest="40"
HorizontalOptions="StartAndExpand"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="camera"
WinPhone="Icons/camera.png"
iOS="Icons/camera.png" />
</Image.Source>
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ImagePost_OnTapped" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
After Keyboard Popup see Image
You need to set SoftInput to AdjustResize in order for Android to resize the views so they stay visible. In Forms, you can do this with the platform specifics feature in Forms 2.3.3.
Check out this Gist on how to do this in OnCreate(). Note the workaround that's needed to remove an underlay added to the status bar in API 21+.

ViewCell not align correctly and cut part of content - Xamarin Forms

I have a ListView in Xamarin Forms XAML, in this ListView I want to draw a Grid with 4 labels and 1 Entry. My problem is that, when I try to display the ListView, its rows are superimposed and not all the content of the ViewCell, into the DataTemplate, is displayed.
I don't know what is my error.
Here my 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" x:Class="iGuideTest.ExhibitionsPage"
Title = "{Binding titleMenu}">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="You are in the Exhibitions page" />
<Button Text="Return to LoginPage" Command="{Binding BackCommand}" />
<Label Text="{Binding exhibitionsList.Count}" />
<Button Grid.Row="2" Grid.Column="0" Text="{Binding surname}" Command="{Binding Edit}" />
<ListView x:Name="ListViewCouchbase" ItemsSource="{Binding exhibitionsList}"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" TextColor="#05199C" Text="{Binding title}" />
<Label Grid.Row="0" Grid.Column="1" TextColor="#008000" Text="{Binding userId}" />
<Label Grid.Row="1" Grid.Column="1" TextColor="Maroon" Text="{Binding LastUpdated}" />
<Label Grid.Row="1" Grid.Column="0" TextColor="Purple" Text="{Binding surname}" />
<Entry Grid.Row="2" Grid.Column="0" TextColor="Blue" Text="{Binding Id}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
Thanks in advance.
Try to use HasUnevenRows property:
<ListView HasUnevenRows="True">
...
</ListView>
Since you are using a Grid and you have Auto in RowHeight you will be better of setting HasUnevenRows property to true.
Also your grid is of dynamic size on its own, you can set its VerticalOptions to Fill.
Yes, i've been there :)
just set ListView RowHeight="xx" where xx is some double indicating the height.