How to adjust scroll height of Xaml StackLayout? - xaml

I have a StackLayout which has items dynamically added to it when a user is selected. I want it to have a height of around 200, then if the list is longer than this, it should be scrollable.
If I add a height request to it as it is now, it adjusts the height and the scrollbar works but prevents items being added after the bottom of the box (so the scrollbar is basically pointless.
This is the code, the StackLayout is called 'readout':
<?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="Clocker.MainPage" >
<StackLayout x:Name="mainstack">
<Picker x:Name="locationpicker" SelectedIndexChanged="locationpicker_SelectedIndexChanged" BackgroundColor="#baf4d5"></Picker>
<Label x:Name="timeLabel" FontSize="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Start" TextColor="White" BackgroundColor="#59a092"/>
<ScrollView Orientation="Vertical" BackgroundColor="#baf4d5">
<StackLayout x:Name="readOut">
</StackLayout>
</ScrollView>
<ListView x:Name="userslist" BackgroundColor="#59a092">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="OnIn" CommandParameter="{Binding .}"
Text="In" />
<MenuItem Clicked="OnOut" CommandParameter="{Binding .}"
Text="Out" IsDestructive="True" />
</ViewCell.ContextActions>
<StackLayout Padding="15,0">
<Label x:Name="lblname" Text="{Binding FullName}" TextColor="White" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>

I've 2 or 3 pages in my app that are more or less like what you described.
My solution uses and 2 lists.
More or less like this:
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="2*" />
<RowDefinition Height="8*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
Row 1 is where I have my first list, row 2 is where the second list goes.
I do it this way (0 is a header and 3 is a footer), so I have more or less 20% of the left space on top and the rest of the space allocated for the second list.
Hope it's clear.

Related

How to increase size of a Grid that Contains a Drawing Canvas in a Stack Layout in Xamarin

My code below creates what is shown in the picture below where the label's text is from an API I am calling. Also the drawing canvas is taken from https://github.com/xamarin/xamarin-forms-samples/tree/master/SkiaSharpForms/Demos/Demos/SkiaSharpFormsDemos. I was wondering how to make the drawing canvas more larger in height? Thank you.
<?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:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
xmlns:tt="clr-namespace:TouchTracking"
x:Class="MathKumu.Pages.WorkPage">
<ContentPage.Content>
<StackLayout>
<Label Text="{Binding EquationString}" />
<Entry Placeholder="Put Answer Here" />
<Grid BackgroundColor="White">
<skia:SKCanvasView x:Name="canvasView"
PaintSurface="OnCanvasViewPaintSurface"/>
<Grid.Effects>
<tt:TouchEffect Capture="True"
TouchAction="OnTouchEffectAction" />
</Grid.Effects>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Change your StackLayout to a Grid and specify that Row 2 has a Height of *. That will force Row 2 to consume all extra space.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
xmlns:tt="clr-namespace:TouchTracking"
x:Class="MathKumu.Pages.WorkPage">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding EquationString}" />
<Entry Grid.Row="1" Placeholder="Put Answer Here" />
<Grid Grid.Row="2" BackgroundColor="White">
<skia:SKCanvasView x:Name="canvasView"
PaintSurface="OnCanvasViewPaintSurface"/>
<Grid.Effects>
<tt:TouchEffect Capture="True"
TouchAction="OnTouchEffectAction" />
</Grid.Effects>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>

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

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.

Scrollview scrolls up-and-over other content when scrolling

When layin out this form, I want a header the size of its content, footer the size of the content, and a middle that expands to take up the rest. Easy in XAML/UWP. But in Xamarin Forms when the ScrollView content has data it floats and overlays the top and bottom. Also when I drag/scroll the ScrollView it can go to the top of the screen. How to dock the scrollview properly so I have a scrolling middle region? Thx...
Pictures and XAML layout below....
<?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="BaseProject.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TableView Grid.Row="0" Intent="Settings" BackgroundColor="Blue" HeightRequest="150" >
<TableSection Title="Search">
<ViewCell>
<Button x:Name="Button_Search" Text="Go"/>
</ViewCell>
<EntryCell x:Name="Entry_Cell_SearchFor" />
</TableSection>
</TableView>
<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand" Orientation="Vertical">
<StackLayout BackgroundColor="Red" >
<Label Text="body" x:Name="Label_Body" BackgroundColor="Yellow" />
</StackLayout>
</ScrollView>
<StackLayout Grid.Row="2">
<Label Text="footer"/>
</StackLayout>
</Grid>
</ContentPage>
Set IsClippedToBounds property as true of ScrollView

Xamarin Forms Center CollectionView content

I have a problem. I created a page that looks like this:
Now I want the content of the CollectionView to be centered. I already tried things to set on HorizontalOptions=Center, but no luck!
Here is the code of that part:
<StackLayout HorizontalOptions="CenterAndExpand">
<CollectionView ItemsSource="{Binding coinDataList}" ItemsLayout="HorizontalList" Margin="0" HorizontalOptions="CenterAndExpand" BackgroundColor="Red">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Margin="20,0,20,0" HorizontalOptions="CenterAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="5" />
<RowDefinition Height="20" />
<RowDefinition Height="10" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Row="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Coin}" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="2" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" Text="{Binding Price, StringFormat='{0:F2}'}" TextColor="White" FontSize="18"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
How can I do that?
You can achieve this by using BindableLayout in conjunction with the StackLayout with horizontal orientation. This will not be as performant as CollectionView, but from your UI, it looks like you will not be having a lot of items in your ItemSource collection, but you your need UI to be dynamic and evenly spaced and centered when there are fewer items. As the item list grows, the UI will look more like the horizontal list view.
So here is the minimal working XAML which you can modify to fit into your project. For sake of simplicity, I have added everything in the XAML (no code behind), so you can plug this XAML right into the content page and test it 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:generic="clr-namespace:System.Collections.Generic;assembly=netstandard"
mc:Ignorable="d"
x:Class="Playground.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<generic:List x:Key="SymbolNames" x:TypeArguments="x:String">
<x:String>BTC</x:String>
<x:String>LTC</x:String>
<x:String>ETH</x:String>
<x:String>OT1</x:String>
<x:String>OT2</x:String>
<x:String>OT3</x:String>
<x:String>OT4</x:String>
<x:String>OT5</x:String>
<x:String>OT6</x:String>
</generic:List>
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView Orientation="Horizontal" HeightRequest="60" VerticalOptions="Start">
<StackLayout BindableLayout.ItemsSource="{Binding Source={StaticResource SymbolNames}}" Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label Text="{Binding}" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Margin="10"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</ContentPage>
UI when 3 Items:
UI When multiple overflowing items: