Im getting the error "Sequence contains no elements" in a simple xaml form.
I am fairly new to Xamarin forms so please bear with me.
Any thoughts?
<?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="CRM.Views.CustomerItem" Title="Customer Info">
<ContentPage.Content>
<StackLayout Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Name" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding CustName}" Grid.Row="0" Grid.Column="1"/>
<Label Text="Surname" Grid.Row="1" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding CustSurname}" Grid.Row="1" Grid.Column="1"/>
<Label Text="Address" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding Address}" Grid.Row="2" Grid.Column="1"/>
<Label Text="PhoneNumber" Grid.Row="3" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding PhoneNumber}" Grid.Row="3" Grid.Column="1"/>
</Grid>
</StackLayout>
<Button Text="Save" HorizontalOptions="FillAndExpand" BackgroundColor="Blue" TextColor="White" Clicked="Save_Clicked"></Button>
<Button Text="Cancel" HorizontalOptions="FillAndExpand" BackgroundColor="Red" TextColor="White" Clicked="Cancel_Clicked"></Button>
</ContentPage.Content>
Always make sure ContentPage.Content has only one layout control like StackLayout or Grid etc and all other controls inside them.
<ContentPage.Content>
<StackLayout>
<!-- all controls go here -->
</StackLayout>
</ContentPage.Content>
That will fix the problem
Buttons are fine but the grid has no rows defined but you are using Grid.Row="0". As there are no rows in the Grid.Rows it says "Sequence contains no elements"
try adding row definition
<StackLayout Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Name" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding CustName}" Grid.Row="0" Grid.Column="1"/>
<Label Text="Surname" Grid.Row="1" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding CustSurname}" Grid.Row="1" Grid.Column="1"/>
<Label Text="Address" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding Address}" Grid.Row="2" Grid.Column="1"/>
<Label Text="PhoneNumber" Grid.Row="3" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center"></Label>
<Entry Text="{Binding PhoneNumber}" Grid.Row="3" Grid.Column="1"/>
</Grid>
</StackLayout>
<Button Text="Save" HorizontalOptions="FillAndExpand" BackgroundColor="Blue" TextColor="White" Clicked="Save_Clicked"></Button>
<Button Text="Cancel" HorizontalOptions="FillAndExpand" BackgroundColor="Red" TextColor="White" Clicked="Cancel_Clicked"></Button>
You Must be Create Rows and Columns Both...
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
Jason is right. There are multiple errors:
Content does only take one View element.
In this case this should be StackLayout. Your buttons Save and Cancel should be within the StackLayout.
Your Grid doesn't contain any RowDefinition.
If you had only one element and no row defined, this would work. Since you are explicitely using multiple rows, you need a RowDefiniton for that.
So in your case it should look like this
<?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="CRM.Views.CustomerItem" Title="Customer Info">
<ContentPage.Content>
<StackLayout Padding="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Name" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" />
<Entry Text="{Binding CustName}" Grid.Row="0" Grid.Column="1" />
<Label Text="Surname" Grid.Row="1" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" />
<Entry Text="{Binding CustSurname}" Grid.Row="1" Grid.Column="1" />
<Label Text="Address" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" />
<Entry Text="{Binding Address}" Grid.Row="2" Grid.Column="1" />
<Label Text="PhoneNumber" Grid.Row="3" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Center" />
<Entry Text="{Binding PhoneNumber}" Grid.Row="3" Grid.Column="1" />
</Grid>
<Button Text="Save" HorizontalOptions="FillAndExpand" BackgroundColor="Blue" TextColor="White" Clicked="Save_Clicked" />
<Button Text="Cancel" HorizontalOptions="FillAndExpand" BackgroundColor="Red" TextColor="White" Clicked="Cancel_Clicked" />
</StackLayout>
</ContentPage.Content>
Simple answer for this is to include all your controls inside one panel.The below one will show how you will put.
<ContentPage.Content>
<StackLayout>
<StackLayout Padding="40" Margin="0,80,0,0">
<Label Text="UserName" TextColor="Black" ></Label>
<Entry Text="" Placeholder="UserName" x:Name="username"></Entry>
<Label Text="Password" TextColor="Black"></Label>
<Entry Text="" Placeholder="Password" IsPassword="True" ></Entry>
<Button Text="Login" Clicked="Login_Clicked"></Button>
<Label Text="Not a Member? sign up Now" TextColor="Black" HorizontalOptions="Center"></Label>
</StackLayout>
</StackLayout>
</ContentPage.Content>
If you put anything outside the stack panel will give you that errorr.
Related
I have a Xamarin project with a view of a product's details. I have two buttons which can increase or decrease the quantity of the product. To show how it changes I have a label named lblQuantity which shows the quantity and it's updated if you tap on the remove or add button.
To have some context here's the view
The issue is that the lblQuantity isn't updating itself. I had previously another view with a stacklayout and the gesture recognizers worked fine. Now it doesn't even go inside the method.
Here's the xaml
<?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:controls="clr-namespace:AppCrijoya.Controls"
x:Class="AppCrijoya.Views.ProductDetailPage">
<ScrollView>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White" Spacing="0" Margin="0" Padding="0">
<Grid BackgroundColor="White" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- 1. Profile picture-->
<Frame HasShadow="True" Margin="10" CornerRadius="20">
<Image x:Name="ProductImage" Aspect="AspectFit" Grid.Row="0" Margin="0" VerticalOptions="Start" HeightRequest="230"/>
</Frame>
<!-- Here add the code that is being explained in the next block-->
<StackLayout HeightRequest="90" Grid.Row="1" BackgroundColor="Transparent" VerticalOptions="Start">
<StackLayout Padding="20" BackgroundColor="Transparent">
<!-- Here add the code that is being explained in the next block-->
<!-- Blocks: 3 and 4 -->
<Grid Padding="25,5,25,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!-- Here add the code that is being explained in the next block-->
<!-- 4. Contact information-->
<Label x:Name="txtName" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontAttributes="Bold" FontSize="30" TextColor="Black"/>
<Label x:Name="txtDescription" Grid.Row="1" Grid.ColumnSpan="4" TextColor="Black" FontSize="16"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Padding="0,10,0,0" FontSize="16">
<Label.FormattedText>
<FormattedString>
<Span Text="Stock: " FontAttributes="Bold" TextColor="Black"/>
<Span x:Name="txtDetails" TextColor="black"/>
</FormattedString>
</Label.FormattedText>
</Label>
<!--4. Contact information: Board inforation-->
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" Text="Quantity" FontAttributes="Bold" Style="{StaticResource stlBoardTitle}" />
<Frame Grid.Column="2" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="RemoveTap" Tapped="RemoveTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="-" Style="{StaticResource lblCart}"/>
</Frame>
<StackLayout Grid.Column="3" Grid.Row="3" HeightRequest="40" VerticalOptions="Center" >
<Label
x:Name="lblQuantity"
Text="1"
FontSize="17"
TextColor="Black"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="40"/>
</StackLayout>
<Frame Grid.Column="4" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="AddTap" Tapped="AddTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="+" Style="{StaticResource lblCart}"/>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Grid>
<controls:MyFrame HasShadow="true" HeightRequest="80" BackgroundColor="#e5d3c2" VerticalOptions="EndAndExpand">
<StackLayout WidthRequest="20" VerticalOptions="Center">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label
x:Name="txtPrice"
Grid.Column="0"
HorizontalTextAlignment="End"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="25"
/>
<Button CornerRadius="30"
x:Name="btnAddToCart"
Clicked="BtnAddToCart_Clicked"
Grid.Column="2"
TextColor="Black"
Text="Añadir al carrito"
BackgroundColor="White"
Style="{StaticResource btn}"
FontAttributes="Bold"
/>
</Grid>
</StackLayout>
</controls:MyFrame>
</StackLayout>
</ScrollView>
</ContentPage>
Here's the Add and Remove method that I know work fine
private void RemoveTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
if (quantity > 1)
{
quantity -= 1;
}
lblQuantity.Text = quantity.ToString();
}
private void AddTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
quantity += 1;
lblQuantity.Text = quantity.ToString();
}
The text of the label is supossed to be changed but it isn't. And as I said it doesn't even enter on the method.
I don't know what's the issue. Please help and thanks.
EDIT
I have tried changing it for a Button but still doesn't work. I thought it might be a problem with the grid but I still don't know.
I fixed the issue by making sure the frames where inside the StackLayout as they weren't before
Here is an image to explain it
The frames to add or remove weren't inside the red StackLayout so the tap gesture recognizer wouldn't do anything. I just gave it more height and set the Aspect to FillAndExpand
I have a hidden elements, and when I click on some marker in the map they are visualized.
But when the are hidden when I start app I have some big empty space ?
This is 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:local="clr-namespace:MaritsaTundzhaForecast"
xmlns:local1="clr-namespace:MaritsaTundzhaForecast.Models"
x:Class="MaritsaTundzhaForecast.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<local1:LevelToImageConverter x:Key="levelImage" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout
BackgroundColor="#262626"
HeightRequest="10">
<Label Text="ХИДРОЛОГИЧНА ПРОГНОЗА"
HorizontalOptions="CenterAndExpand"
VerticalTextAlignment="End"
FontAttributes="Bold"
TextColor="White"
Padding="0,10,0,0"/>
<Label Text="Финансирано по програма на МОН НП 'Млади учени и постдокторанти.' НИМХ - Филиал Пловдив."
HorizontalOptions="CenterAndExpand"
VerticalTextAlignment="End"
FontAttributes="Bold"
TextColor="White"
Padding="0,10,0,0"/>
<Button Text="ПРЕДСТАВЯНЕ И ТЪЛКУВАНЕ НА ПРОГНОЗАТА"
VerticalOptions="CenterAndExpand"
HorizontalOptions="Center"
Clicked="OnButtonClicked" />
<ScrollView VerticalOptions="FillAndExpand" x:Name="scrollView">
<Grid Margin="0,10,0,10" VerticalOptions="EndAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="280" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Frame x:Name="frameLevelAlertLbl"
BackgroundColor="#262626"
CornerRadius="30"
HasShadow="True">
<StackLayout Grid.Row="0" x:Name="contentLbl" Spacing="0">
<Label x:Name="LevelAlertLbl"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="Black"
FontAttributes="Bold"
FontSize="Medium"/>
</StackLayout>
</Frame>
<StackLayout Grid.Row="1">
<Label x:Name="LevelAlertLbl1"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="Black"
FontAttributes="Bold"
FontSize="Medium">
</Label>
</StackLayout>
<StackLayout Grid.Row="2">
<local:CustomMap x:Name="customMap"
MapType="Street"
HasZoomEnabled="True"
HasScrollEnabled="True"
TrafficEnabled="True"
MoveToLastRegionOnLayoutChange="False"/>
</StackLayout>
<StackLayout Grid.Row="3" x:Name="InfoLblForecast" >
<Label TextColor="White" BackgroundColor="#6588cf" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="selectedStationLbl" FontAttributes="Bold"/>
</StackLayout>
<StackLayout Grid.Row="4" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame x:Name="FrameCheckStation"
CornerRadius="30"
HasShadow="True"
BackgroundColor="#262626"
Grid.ColumnSpan="3" Grid.Row="0">
<Label TextColor="White" Grid.ColumnSpan="3" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkStationLbl" FontAttributes="Bold"/>
</Frame>
<Label TextColor="White" Grid.ColumnSpan="3" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkStationLbl1" FontAttributes="Bold"/>
<Label Text="Дата/час:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="0" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn1" FontAttributes="Bold"/>
<Label Text="Показател:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="1" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn2" FontAttributes="Bold"/>
<Label Text="Праг (0-3):" BackgroundColor="#6588cf" TextColor="White" Grid.Column="2" Grid.Row="2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn3" FontAttributes="Bold"/>
</Grid>
<StackLayout>
<ListView x:Name="lstLevel" HasUnevenRows="True" BackgroundColor="#f7f77c">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="#f7f77c">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding dateForecast, StringFormat='{0:dd.MM} - {0:hh\\:mmч.}'}" XAlign="Start" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
<Image Grid.Row="0" Grid.Column="1" Source="{Binding levelForecast, Converter={StaticResource levelImage}}" Aspect="Fill"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding levelForecast}" XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
<BoxView Color="#001aff" HeightRequest="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
<StackLayout Grid.Row="5">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame x:Name="FrameCheckValuesLbl"
CornerRadius="30"
HasShadow="True"
BackgroundColor="#262626"
Grid.ColumnSpan="3" Grid.Row="0">
<Label BackgroundColor="Green" TextColor="White" Grid.ColumnSpan="3" Grid.Row="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="checkValuesLbl" FontAttributes="Bold"/>
</Frame>
<Label Text="Дата/час:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="0" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn11" FontAttributes="Bold"/>
<Label Text="Показател:" BackgroundColor="#6588cf" TextColor="White" Grid.Column="1" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn22" FontAttributes="Bold"/>
<Label Text="Праг (0-3):" BackgroundColor="#6588cf" TextColor="White" Grid.Column="2" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="labelColumn33" FontAttributes="Bold"/>
</Grid>
<StackLayout HeightRequest="80">
<ListView x:Name="lstLevel2" HasUnevenRows="True" BackgroundColor="#f7f77c">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="#f7f77c">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding dateForecast, StringFormat='{0:dd.MM} - {0:hh\\:mmч.}'}" XAlign="Start" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
<Image Grid.Row="0" Grid.Column="1" Source="{Binding levelForecast, Converter={StaticResource levelImage}}" Aspect="Fill"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding levelForecast}" XAlign="Center" YAlign="Center" TextColor="Black" FontAttributes="Bold" FontSize="Small"/>
<BoxView Color="#001aff" HeightRequest="1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</StackLayout>
</StackLayout>
</Grid>
</ScrollView>
</StackLayout>
</ContentPage>
I have six rows - 0,1,2,3 are not hidden.
rows - 4,5,6 is hidden.
How to reduce ScrollView to rows 0,1,2,3 and when rows 4,5,6 are showing to reduce automatic to the end ?
You can achieve the hidden effect by modifying the row height defined by the Grid.
Here is the xaml code:
<StackLayout>
<ScrollView>
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto" />
<RowDefinition Height="280" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Label BackgroundColor="Red"></Label>
<Label BackgroundColor="Orange" Grid.Row="1"></Label>
<Label BackgroundColor="Yellow" Grid.Row="2"></Label>
<Label BackgroundColor="Green" Grid.Row="3"></Label>
<Label BackgroundColor="Blue" Grid.Row="4"></Label>
<Label BackgroundColor="Purple" Grid.Row="5"></Label>
</Grid>
</ScrollView>
<Button Clicked="Button_Clicked" HeightRequest="50" Text="click"></Button>
</StackLayout>
Here is the background code:
private void Button_Clicked(object sender, EventArgs e)
{
var res = myGrid.RowDefinitions;
(res[3] as RowDefinition).Height = 0;
(res[4] as RowDefinition).Height = 0;
(res[5] as RowDefinition).Height = 0;
}
I am implementing a picker in xamarin.forms project so while implementing that I am getting the above issue
XamarinPicker.xaml
<pages:CustomPage.Content>
<Grid>
<Grid.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="10,20,10,10" />
<On Platform="Android" Value="10" />
</OnPlatform>
</Grid.Padding>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Padding="10,1,0,1" Margin="10,0,10,10" HeightRequest="50" HasShadow="False" BorderColor="#24527A" CornerRadius="5" VerticalOptions="Start">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<controls:CustomEntry Placeholder="{local:Translate NoteSearchHint}" Text="{Binding SearchText}">
<controls:CustomEntry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding TextChangeCommand}" />
</controls:CustomEntry.Behaviors>
</controls:CustomEntry>
<BoxView Grid.Column="1" BackgroundColor="#24527A"/>
<Image Grid.Column="2" Source="search_black" IsEnabled="{Binding IsSearchEnable}" IsVisible="{Binding SearchButtonVisibility}" HeightRequest="20" WidthRequest="20" VerticalOptions="Center" HorizontalOptions="Center" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SearchCommand}"/>
</Image.GestureRecognizers>
</Image>
<Image Grid.Column="2" IsEnabled="{Binding IsCloseEnable}" IsVisible="{Binding CloseButtonVisibility}" Source="close_gray" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" Aspect="AspectFit" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseCommand}"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
<StackLayout Grid.Row="1">
<Grid Padding="{OnIdiom Phone='20,10,20,0',Tablet='30,15,30,0'}" RowSpacing="0" ColumnSpacing="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{OnIdiom Phone='44',Tablet='58'}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Label Text="My Notes" TextColor="{Binding Tab1TextColor}" Style="{DynamicResource LibraryPurpleSemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="0" IsVisible="{Binding IsVisibleTab1Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
<StackLayout Grid.Row="0" Grid.Column="1">
<Label Text="Other Notes" TextColor="{Binding Tab2TextColor}" Style="{DynamicResource LibraryGraySemiBoldLabel}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeTabCommand}" CommandParameter="2" />
</StackLayout.GestureRecognizers>
</StackLayout>
<BoxView Grid.Row="1" Grid.Column="1" IsVisible="{Binding IsVisibleTab2Box}" HeightRequest="{OnIdiom Phone='4',Tablet='7'}" HorizontalOptions="FillAndExpand" VerticalOptions="End" BackgroundColor="{DynamicResource Yellow}" CornerRadius="{OnIdiom Phone='4,4,0,0',Tablet='7,7,0,0'}" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="2" Padding="0" HorizontalOptions="EndAndExpand" IsVisible="{Binding FilterVisibility}" VerticalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="Filter by:"/>
<Frame HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker x:Name="FilterPicker"
ios:Picker.UpdateMode="WhenFinished"
Title="All"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding SelectedFilter,Mode=TwoWay}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>All</x:String>
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<!--<Image IsVisible="{Binding EndDropDownVisible}" AbsoluteLayout.LayoutBounds="0.95,0.5,20,20" AbsoluteLayout.LayoutFlags="PositionProportional" Source="chevrondropdown" HeightRequest="{OnIdiom Phone='20',Tablet='30'}" WidthRequest="{OnIdiom Phone='20',Tablet='30'}" VerticalOptions="Center">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="EndDateImage_Tapped"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>-->
</Frame>
</StackLayout>
<ListView x:Name="NoteList" Grid.Row="3" ItemsSource="{Binding Notes}" HasUnevenRows="True" IsVisible="{Binding IsViewVisible}" CachingStrategy="RetainElement" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<!--<StackLayout Orientation="Vertical" HeightRequest="90" Margin="5,15,5,5" Padding="10,5,10,5">
<StackLayout Orientation="Horizontal">
<BoxView Color="Black" WidthRequest="5" HeightRequest="80" VerticalOptions="Center" />
<Label Text="Note text" FontSize="14" HeightRequest="80" TextColor="#585858" Margin="3,0,0,0"></Label>
</StackLayout>
<Label Text="Sample note text added by user" FontSize="10" VerticalOptions="StartAndExpand" FontAttributes="Bold" HorizontalOptions="StartAndExpand" TextColor="#000000" Margin="5,0,0,0"></Label>
</StackLayout>-->
<ViewCell>
<Frame Grid.Row="0" HasShadow="False" Padding="0" Margin="10,5" BorderColor="#e0e4e2" IsClippedToBounds="True" CornerRadius="10">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="{Binding NoteData.NoteColor, Converter={converters:HighlightColorConverter}}" Grid.Column="0" Grid.Row="0" Grid.RowSpan="5" WidthRequest="10"/>
<Label Text="{Binding NoteData.NoteText}" Grid.Column="1" Grid.Row="0" FontSize="Small" LineBreakMode="TailTruncation" FontAttributes="Italic" Margin="5,10,0,0" TextColor="Gray" MaxLines="2" VerticalTextAlignment="Center"/>
<Label Text="{local:Translate NoteLabel}" Grid.Column="1" Grid.Row="1" FontSize="Large" FontAttributes="Bold" Margin="5,5,0,5" VerticalTextAlignment="Center" TextColor="#3c5d80"/>
<Label Text="{Binding NoteData.NoteContent}" VerticalTextAlignment="Center" VerticalOptions="Center" Grid.Column="1" Grid.Row="2" FontSize="15" Margin="5,3,0,5" FontAttributes="Bold"/>
<Label Grid.Column="1" Grid.Row="3" TextColor="Gray" FontSize="10" Margin="5,0,0,10">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PageNumber,Converter={converters:EpubPageIndexConverter}, StringFormat='Page Number : {0}'}" />
<Span Text="{Binding DisplayCreatedDate, StringFormat=' Added on {0: dd-MM-yyyy}'}" />
</FormattedString>
</Label.FormattedText>
</Label>
<StackLayout Grid.Column="1" Grid.Row="4" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="1" Text="Make it:"/>
<Frame Grid.Row="1" Grid.Column="2" HeightRequest="{OnIdiom Phone='30',Tablet='50'}" Padding="0" HasShadow="false" CornerRadius="{OnIdiom Phone='4',Tablet='6'}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand">
<Picker
ios:Picker.UpdateMode="WhenFinished"
Title="Select One"
TitleColor="{DynamicResource LightGray}"
BackgroundColor="{DynamicResource TransparentLightGray}"
FontSize="{DynamicResource FontSize14}"
SelectedItem="{Binding PublicPrivate}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Public</x:String>
<x:String>Private</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</Frame>
</Grid>
</StackLayout>
<ImageButton Source="more" HeightRequest="15" WidthRequest="15" Grid.Row="0" Grid.Column="2" Grid.RowSpan="4" VerticalOptions="Start" Margin="0,10,15,0" Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.OpenActionPopupCommand}" CommandParameter="{Binding .}"/>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference NoteList}, Path=BindingContext.SelectNoteCommand}" CommandParameter="{Binding .}"/>
</Frame.GestureRecognizers>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row="3" IsVisible="{Binding IsViewVisible, Converter={converters:InverseBooleanConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="{local:Translate NoNoteText}" FontSize="Default" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Grid>
</pages:CustomPage.Content>
If I remove the SelectedItem="{Binding PublicPrivate}" this line of code it is not throwing any issue but if I add the above line the I am getting the above issue.
XamarinPickerViewModel.cs
string _publicPrivate;
public string PublicPrivate
{
get { return _publicPrivate; }
set { _publicPrivate = value;OnPropertyChanged(); }
}
public override void OnAppearing()
{
base.OnAppearing();
BindPickerData();
}
public void BindPickerData()
{
PublicPrivate = "public";
}
When I tap on the button it is throwing System.ArgumentNullException: 'Value cannot be null. Parameter name: element' this issue and it redirected me to
CustomTabbedPageRendere.cs
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
}
to this
please help me
thanks in advance!!!
In the cross-platform app that I’m developing on Xamarin Forms, I want to achieve a map look where the map covers the whole screen and a semi-transparent control center covers on top of it at a section in the bottom of the screen as in Apple Maps.
My current code looks like this. I have my desired map view and control center view but I can't get to control center to overlap on top of my map.
<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:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*"/>
</Grid.RowDefinitions>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" Grid.Row="1" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
Try putting the StackLayout that contains the map before the yummy:PancakeView (Also remove the Grid.Row="1")
It is similar at this answer.
After reading what David Jesus recomended I did what he said but unfortunately it was't the answer that I was looking for but I followed his advices and did some cahnges myself. In conclusion, I put StackLayout at the top like David said but ı didn't remove Grid.Row="1" and I added the desired height in yummy:PancakeView as TranslationY="550".
My final code is:
<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:map="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
xmlns:pan ="http://xamarin.com/schemas/2014/forms"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
mc:Ignorable="d"
x:Class="GreenPath.MainPage">
<Grid>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<map:Map MapType="Street" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<yummy:PancakeView CornerRadius="25,25,0,0" Opacity="0.8" HorizontalOptions="FillAndExpand" BackgroundColor="White" TranslationY="550">
<StackLayout VerticalOptions="FillAndExpand" Orientation="Vertical" Margin="5">
<Image Source="down.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1"/>
<Label Text="X" TextColor="#3E454F" FontSize="40" FontFamily="segoeui.ttf" Margin="10,0"/>
<SearchBar FontFamily="segoeui.ttf" Text="X" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalTextAlignment="Start" IsReadOnly="True" HorizontalOptions="Fill" SearchButtonPressed="SearchBar_SearchButtonPressed" PlaceholderColor="#3E454F" TextColor="#3E454F" CancelButtonColor="#3E454F" Visual="Material" Keyboard="Default" Placeholder="Search a location" IsEnabled="True"/>
<Label Text="X" FontFamily="segoeui.ttf" FontSize="25" VerticalOptions="Center" TextColor="#3E454F" Margin="10,0"/>
<Grid Grid.Row="1" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="0" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="1" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="2" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="3" />
<Image Source="add.png" VerticalOptions="Center" HorizontalOptions="Center" Scale="1" Grid.Column="4" />
</Grid>
</StackLayout>
</yummy:PancakeView>
</Grid>
</ContentPage>
i'm a beginner with xamarin forms and i have to display dynamic data in grid form. My data has multiple columns and rows, which doesn't always fit the screen size. So i must scroll horizontal and vertical. The first column is a description of the data, I called it row header. My goal is to move/scroll the data "under" the columns and "under" the row header. The columns and the row header must always be visible.
Perhaps somebody had the same problem/solution and point me to the right direction? Or a sample?
Additional info:
To be clearer. The column header must scroll left, if the user scrolls the data area left. Because not all columns could display on screen. Same with the row header. It must scroll down, if user scrolls the data area down.
In excel the function is named "Freeze Panes":
My ugly powerpoint:
Thank you
This works for me on Android and iOS. On UWP it doesn't scroll smoothly. But thats not important for me:
<Grid BackgroundColor="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Empty" Grid.Row="0" Grid.Column="0" />
<AbsoluteLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="FillAndExpand" >
<ScrollView x:Name="colScrollView"
Orientation="Horizontal"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightGoldenrodYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Column" Grid.Row="0" Grid.Column="0" />
<Label Text="Column" Grid.Row="0" Grid.Column="1" />
<Label Text="Column" Grid.Row="0" Grid.Column="2" />
<Label Text="Column" Grid.Row="0" Grid.Column="3" />
<Label Text="Column" Grid.Row="0" Grid.Column="4" />
</Grid>
</ScrollView>
<BoxView AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Transparent"></BoxView>
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="0"
Grid.Row="1"
VerticalOptions="FillAndExpand">
<ScrollView x:Name="rowScrollView"
Orientation="Vertical"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Label Text="Cell" Grid.Column="0" Grid.Row="0" />
<Label Text="Cell" Grid.Column="0" Grid.Row="1" />
<Label Text="Cell" Grid.Column="0" Grid.Row="2" />
<Label Text="Cell" Grid.Column="0" Grid.Row="3" />
<Label Text="Cell" Grid.Column="0" Grid.Row="4" />
</Grid>
</ScrollView>
<BoxView AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Transparent"></BoxView>
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="1"
Grid.Row="1"
VerticalOptions="FillAndExpand">
<ScrollView x:Name="dataScrollView"
Orientation="Both"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightGreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Label Text="Cell" Grid.Column="0" Grid.Row="0" />
<Label Text="Cell" Grid.Column="0" Grid.Row="1" />
<Label Text="Cell" Grid.Column="0" Grid.Row="2" />
<Label Text="Cell" Grid.Column="0" Grid.Row="3" />
<Label Text="Cell" Grid.Column="0" Grid.Row="4" />
<Label Text="Cell" Grid.Column="1" Grid.Row="0" />
<Label Text="Cell" Grid.Column="1" Grid.Row="1" />
<Label Text="Cell" Grid.Column="1" Grid.Row="2" />
<Label Text="Cell" Grid.Column="1" Grid.Row="3" />
<Label Text="Cell" Grid.Column="1" Grid.Row="4" />
<Label Text="Cell" Grid.Column="2" Grid.Row="0" />
<Label Text="Cell" Grid.Column="2" Grid.Row="1" />
<Label Text="Cell" Grid.Column="2" Grid.Row="2" />
<Label Text="Cell" Grid.Column="2" Grid.Row="3" />
<Label Text="Cell" Grid.Column="2" Grid.Row="4" />
<Label Text="Cell" Grid.Column="3" Grid.Row="0" />
<Label Text="Cell" Grid.Column="3" Grid.Row="1" />
<Label Text="Cell" Grid.Column="3" Grid.Row="2" />
<Label Text="Cell" Grid.Column="3" Grid.Row="3" />
<Label Text="Cell" Grid.Column="3" Grid.Row="4" />
<Label Text="Cell" Grid.Column="4" Grid.Row="0" />
<Label Text="Cell" Grid.Column="4" Grid.Row="1" />
<Label Text="Cell" Grid.Column="4" Grid.Row="2" />
<Label Text="Cell" Grid.Column="4" Grid.Row="3" />
<Label Text="Cell" Grid.Column="4" Grid.Row="4" />
</Grid>
</ScrollView>
</AbsoluteLayout>
</Grid>
Code behind:
public MyPage()
{
InitializeComponent();
dataScrollView.Scrolled += DataScrollView_Scrolled;
}
private async void DataScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
await rowScrollView.ScrollToAsync(0, e.ScrollY, false);
await colScrollView.ScrollToAsync(e.ScrollX, 0, false);
}
You could use Grid as the root layout and ScrollView to show data .
The ScrollView will scroll-able when the data are out of screen .
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<!--Columns-->
<Label Text="title0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="0" Grid.Column="1" />
<Label Text="title1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="0" Grid.Column="2" />
<Label Text="title2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="0" Grid.Column="3" />
<Label Text="title3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="0" Grid.Column="4" />
<!--Row Header-->
<Label Text="title0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="1" Grid.Column="0" />
<Label Text="title1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="2" Grid.Column="0" />
<Label Text="title2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="3" Grid.Column="0" />
<Label Text="title3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="4" Grid.Column="0" />
<Label Text="title4" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="5" Grid.Column="0" />
<Label Text="title5" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="6" Grid.Column="0" />
<Label Text="title6" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="7" Grid.Column="0" />
<Label Text="title7" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="8" Grid.Column="0" />
<!--Data-->
</Grid>
</ScrollView>
if you use xamarin.forms syncfusion datagrid (SfDataGrid) you have two options to solve this:
1)-the first by using the Unbound Rows and Unbound Columns feature of the SfDataGrid.
2)-second by using the Freeze Panes (also called Frozen Views) feature of the SfDataGrid.
if it was to me i would go for the second option which is Freeze Panes , here is how it looks like:
syncfusion has a free community licence that you can use, the community licence keys can be generated once you open a free account in there page.
once you have the key follow the setup instructions on how to setup the SfDataGrid, the SfDataGrid is just a small NuGet package.
then in your App class constractor past the key as a parameter for the RegisterLicense method.
public App()
{
//Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
InitializeComponent();
MainPage = new App1.MainPage();
}
for more on licensing.