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.
Related
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 have a ListView that displays recent Search items. I have added it in the Stack Layout of my Main page. I want to show ListView over the other UI elements just like this: How can it be done.
I am currently using a new Page just for SearchBar and ListView. On the mainpage I have just a Search Button, when I click on that button, app navigates to the new Page that contains SearchBar and ListView. But I want it done on the same page. When Search button is clicked, SearchBar and ListView show become visible over the other UI elements.
Here is my code:
On MainPage.xaml
<Button Text="Search" Clicked="SearchButtonPressed" />
C# Code
void SearchButtonPressed(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
SearchPage.xaml Code
<StackLayout>
<SearchBar x:Name="SearchBar"
TextChanged="Handle_SearchButtonPressed"
Placeholder="Search places..."
CancelButtonColor="Red" />
<ListView x:Name="ListView" ItemsSource="{Binding Source=list}" RowHeight="50" IsVisible="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCell_Tapped">
<Label Text="{Binding}" TextColor="Black" VerticalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
you can do it with a grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0"
Placeholder="SearchItem"
TextChanged="Entry_TextChanged"/>
<Image Grid.Row="1"
Aspect="Fill"
Source="testImage.png"/>
<ListView x:Name="ListView"
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="Fill"
IsVisible="False"
HeightRequest="300"
BackgroundColor="White"
Opacity="0.8">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
if the text of the search entry changed, show the listview:
private void Entry_TextChanged(object sender, TextChangedEventArgs e)
{
ListView.IsVisible = e.NewTextValue.Length > 0;
}
If you put the list which you will use for suggestion to the bottom of xaml hierarchy, you will resolve it without navige to another page. In addition, if you use the searchbar and listview in the grid and give a same row, they will overlap. Ex:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="350" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SearchBar
Grid.ColumnSpan="3"
BackgroundColor="White"
CancelButtonColor="Red"
IsSpellCheckEnabled="False">
<SearchBar.Margin>
<OnPlatform Android="0,0,0,-5" />
</SearchBar.Margin>
</SearchBar>
<Label
Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="Gray" />
<Frame
Grid.Row="3"
Grid.Column="1"
Margin="0,21,0,21"
Padding="8"
BackgroundColor="White"
BorderColor="Red"
CornerRadius="20"
HasShadow="False"
VerticalOptions="End">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label
Margin="5,0,0,0"
Text="Test"
TextColor="Red" />
</Grid>
</Frame>
<StackLayout
Grid.Row="2"
Grid.ColumnSpan="3"
BackgroundColor="White"
Opacity="0.8"
VerticalOptions="End">
<Label
x:Name="LabelDescription"
Grid.Row="1"
Grid.ColumnSpan="3"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="Test 2"
TextColor="Red" />
</StackLayout>
<BoxView
Grid.Row="2"
Grid.ColumnSpan="3" />
<ListView
Grid.RowSpan="3"
Grid.ColumnSpan="3"
Margin="0,50.5,0,0"
BackgroundColor="White"
HorizontalScrollBarVisibility="Never"
ItemsSource="{Binding SuggestionItems}"
RowHeight="42"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Never">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="58" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Label
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item1}"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="1"
Margin="0,0,10,0"
Text="{Binding item2}"
VerticalOptions="Center" />
<Label
Grid.Row="2"
Grid.ColumnSpan="2"
BackgroundColor="Gray" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
I m working on a Xamarin Forms project using Visual studio 2017.I need to show long text using scrolling , so i implemented following code but it not show the all content it shows part of the content and not scrolling as well ,only shows text within the height of the lable .This is not working for both Android and IOS .If i remove HeightRequest="350" it's scrolling but , content is not showing
<Grid BackgroundColor="#0B738C">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<!--bg-->
<RowDefinition Height="20"></RowDefinition>
<!--brand-->
<RowDefinition Height="30"></RowDefinition>
<!--Lable Agreement-->
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<!--Text Agreement-->
<!--checkox-->
<RowDefinition Height="50"></RowDefinition>
<!--I agree Button-->
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Source="{local:ImageResource bg.jpg}"
Aspect="Fill"
Grid.ColumnSpan="1" Grid.RowSpan="12" x:Name="bgImage" />
<Image
Grid.Row="1"
Grid.Column="0"
Source="{local:ImageResource brand.png}"
Aspect="Fill"
Scale="1.5"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.ColumnSpan="1" Grid.RowSpan="1" x:Name="imageBrand" >
</Image>
<Label
x:Name="labelAgreement"
IsVisible="True"
Grid.Row="2"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalOptions="Center"
Text="Software License and Agreement"
TextColor="WhiteSmoke"
FontFamily="Open Sans"
Margin="10"
FontSize="16" />
<ScrollView Grid.Row="3" Grid.Column="0" >
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>
<Switch
x:Name="checkAgree"
Scale="0.70"
Grid.Row="4" Grid.Column="0"
Margin="15,0,10,5"
HorizontalOptions="Start"
Toggled="Handle_Toggled"></Switch>
<Label
Grid.Row="4" Grid.Column="0"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
HorizontalOptions="Start"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="14"
FontAttributes="Bold"
Text="Agree to the above terms and conditions"
Margin="80,0,0,10"/>
<Button
Margin="0,0,0,0"
Grid.Row="5"
Grid.Column="0"
x:Name="buttonAgree"
Text="Continue"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="True"
BackgroundColor="#1B9170"
TextColor="#FFFFFF"
FontFamily="Open Sans"
FontSize="18"
FontAttributes="Bold"
WidthRequest="140"
IsEnabled="False"
Clicked="HandleAgree_Clicked"/>
<Label
Grid.Row="5"
Grid.Column="0"
x:Name="labelError"
Text=""
Font="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
IsVisible="false"/>
</Grid>
you need to give the HeightRequest to ScrollView.
<ScrollView Grid.Row="3" Grid.Column="0" HeightRequest="250">
<StackLayout >
<Label
x:Name="txtAgreement"
HorizontalOptions="Center"
VerticalOptions="Fill"
HorizontalTextAlignment="Start"
WidthRequest="300"
HeightRequest="350"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
FontAttributes="None"
BackgroundColor="White"
IsVisible="True"/>
</StackLayout>
</ScrollView>
I´m trying to draw something like a small bar chart using boxview control inside a listview (template with columns). So in one column of each item I want to draw the boxview with variable height (depending on a variable value)
Something like this:
<ListView x:Name="lstView" RowHeight="75">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Local}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="1" FontSize="10" TextColor="Navy" />
<Label Text="Empate" Grid.Row="0" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Column="3" FontSize="10" TextColor="Navy"/>
<Label Text="{Binding Visitante}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="5" FontSize="10" TextColor="Navy"/>
**<BoxView Grid.Row="0" Grid.Column="5" HeightRequest="{Binding PctLocal}" WidthRequest="15"/>;**
<Label Text="{Binding PctEmpate}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="2" FontSize="10" />
<Label Text="{Binding PctVisitante}" VerticalTextAlignment="End" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="4" FontSize="10" />
<Label Text="{Binding LocalSupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="0" FontSize="10" />
<Label Text="{Binding DrawSupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" FontSize="10" />
<Label Text="{Binding AwaySupporters}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="4" Grid.ColumnSpan="2" FontSize="10" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I achieve that?
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.