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?
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 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!!!
I have Xamarin xaml proyect, in this a SearchHandler, in Android, it look very well, but on iOs the rows are very narrow and the content overlaps, the SearchHandler is a grid of two rows and two columns, the image occupies two rows in the first column, and there is other data in the second column, and data in row 0 and another at 1.
attach image Android
ios
How i can do with iOs?
Thank you
Template:
<DataTemplate x:Key="ArticuloSearchTemplate">
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.85*" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Grid.Column="0"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
WidthRequest="80"
HeightRequest="80"
/>
<Label Grid.Column="1"
Grid.Row="0"
Text="{Binding ArtDescri}"
FontAttributes="Bold" />
<Label Grid.Column="1"
Grid.Row="1"
Text="{Binding PreValor, StringFormat='{0:C}'}"
FontAttributes="None" />
</Grid>
</DataTemplate>
<ListView x:Key="ArticuloSearchTemplateLista"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
RowHeight="120">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.85*" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Grid.Column="0"
Source="{Binding ImageUrl}"
Aspect="AspectFit"
VerticalOptions="Center"
WidthRequest="80"
HeightRequest="80" />
<Label Grid.Column="1"
Grid.Row="0"
Text="{Binding ArtDescri}"
FontAttributes="Bold" />
<Label Grid.Column="1"
Grid.Row="1"
Text="{Binding PreValor, StringFormat='{0:C}'}"
FontAttributes="None" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<controls:ArticulosSearchHandler Placeholder="Ingrese palabra clave"
ShowsResults="True"
ItemTemplate="{StaticResource ArticuloSearchTemplateLista}"
/>
I change , but it does not display as the image you sent me, the data source is to List .
Should I change something?
Fill SearchHandler:
<Shell.SearchHandler>
<controls:ArticulosSearchHandler Placeholder="Ingrese palabra clave"
ShowsResults="True"
ItemTemplate="{StaticResource ArticuloSearchTemplate}"
SelectedItemNavigationTarget="{x:Type views:ArticulosDetalles}"
BackgroundColor="White"
TextColor="Black"
/>
</Shell.SearchHandler>
protected override void OnQueryChanged(string oldValue, string newValue)
{
base.OnQueryChanged(oldValue, newValue);
try
{
ObservableCollection<ArticulosEntidades> observableCollection;
var filteredItems = Estaticos._Articulos
.Where(m => m.ArtDescri.ToLower().Contains(newValue.ToLower()))
.ToList();
observableCollection = new ObservableCollection<ArticulosEntidades>(filteredItems);
if (observableCollection == null || observableCollection.Count == 0)
ItemsSource = null;
else
ItemsSource = observableCollection;
}
catch (Exception ex)
{
string err = ex.Message;
throw;
}
}
ListView iOs
Have a try with setting RowHeight for ListView to check whehter it works .
Such as setting RowHeight="120" as follow :
<ListView x:Name="searchResults"
HorizontalOptions="Fill"
VerticalOptions="CenterAndExpand"
RowHeight="120">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0.85*" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Grid.Column="0"
Source="icon.png"
Aspect="AspectFit"
VerticalOptions="Center"
WidthRequest="80"
HeightRequest="80" />
<Label Grid.Column="1"
Grid.Row="0"
Text="row 0 column 1"
FontAttributes="Bold" />
<Label Grid.Column="1"
Grid.Row="1"
Text="row 1 column 1"
FontAttributes="None" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The effect :
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.
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>