search is not working in ios xamarin.forms - ios

i have a searchbar in my app. the code for searching is as follows:
private void search_TextChanged(object sender, TextChangedEventArgs e)
{
if (list_total_reg_std.Count != 0)
{
if (string.IsNullOrEmpty(e.NewTextValue))
{
if (filtered == false)
registeredstdslist.ItemsSource = list_total_reg_std;
else
registeredstdslist.ItemsSource = list_filtered_reg_std;
}
else
{
if (filtered == false)
registeredstdslist.ItemsSource = list_total_reg_std.Where(x => x.name.ToLower().Contains(e.NewTextValue) || x.stdid.ToLower().Contains(e.NewTextValue) || x.edlevel.ToString().ToLower().Contains(e.NewTextValue));
else
registeredstdslist.ItemsSource = list_filtered_reg_std.Where(x => x.name.ToLower().Contains(e.NewTextValue) || x.stdid.ToLower().Contains(e.NewTextValue) || x.edlevel.ToString().ToLower().Contains(e.NewTextValue));
}
}
}
this is my 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"
x:Class="ALNahrainAlphaApp.Accounting"
xmlns:images="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp">
<ContentPage.ToolbarItems >
<ToolbarItem Order="Secondary"
Text="logout"
Priority="2"
Clicked="ToolbarItem_Clicked"
/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<Style TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="#f4f0ec" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<SearchBar HorizontalOptions="FillAndExpand" x:Name="search" TextChanged="search_TextChanged"/>
<RefreshView x:Name="refresh" >
<CollectionView x:Name="registeredstdslist" SelectionChanged="registeredstdslist_SelectionChanged" SelectionMode="Single" >
<CollectionView.Header>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="StdID"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="1"
Text="Name"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="2"
Text="Reg Date"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="3"
Text="Edlevel"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="4"
Text="Grade"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="5"
Text="Status"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid ColumnSpacing="1" RowSpacing="0" Padding="9,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{Binding stdid}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="1"
Text="{Binding name}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="2"
Text="{Binding DateofReg}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="3"
Text="{Binding edlevel}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="4"
Text="{Binding grade}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
Padding="10"
FontSize="13"
/>
<Image
Grid.Column="5"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="20"
WidthRequest="20"
>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="false" >
<Setter Property="Source" Value="{OnPlatform Android=redtik.png,iOS=redtik.png}"/>
</DataTrigger>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="true" >
<Setter Property="Source" Value="{OnPlatform Android=greentik.png, iOS=greentik.png}"/>
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="#0d98ba">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAddStd">
<Image Margin="0,10,0,5" x:Name="imgAdd" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckfilter">
<Image Margin="0,10,0,10" x:Name="imgfilter" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckshare">
<Image Margin="0,10,0,10" x:Name="imgshare" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="40" HeightRequest="40" ></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
the registeredstdslist is a collection view that has data about students that i get from a database.
the code works well on android but on my ios simulator, it doesn't work. the collectionview shows no data when i write something in the searchbar though what i write has letters like some data in my list. and when i erase what i wrote, all data are displayed again. why is that? what am i doing wrong?
Update:
i added this:
private void search_TextChanged(object sender, TextChangedEventArgs e)
{
if (list_total_reg_std.Count != 0)
{
if (string.IsNullOrEmpty(e.NewTextValue))
{
if (filtered == false)
registeredstdslist.ItemsSource = list_total_reg_std;
else
registeredstdslist.ItemsSource = list_filtered_reg_std;
}
else
{
if (filtered == false)
if(list_total_reg_std.FindAll(x => x.name.ToLower().Contains(e.NewTextValue)).Count==0)
DisplayAlert("Operation Failed", "No matchiing data!", "Cancel");
// registeredstdslist.ItemsSource = list_total_reg_std.Where(x => x.name.ToLower().Contains(e.NewTextValue) || x.stdid.ToLower().Contains(e.NewTextValue) || x.edlevel.ToString().ToLower().Contains(e.NewTextValue));
else
registeredstdslist.ItemsSource = list_filtered_reg_std.Where(x => x.name.ToLower().Contains(e.NewTextValue) || x.stdid.ToLower().Contains(e.NewTextValue) || x.edlevel.ToString().ToLower().Contains(e.NewTextValue));
}
}
it actually gave No matching data but why? and why does it work on android with no problems and on ios it doesn't?

One problem I see is that if you type any upper case, it will not match.
x.name.ToLower().Contains(e.NewTextValue) should be x.name.ToLower().Contains(e.NewTextValue.ToLower()).

Related

toolbar items appear twice in a page in some ios devices xamarin.forms

i have created a cross platform app using xamarin.forms. i added some toolbar items to some pages but the problem is that they appear twice as in the following picture.
this is the code of ny page:
<?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="ALNahrainAlphaApp.Accounting"
xmlns:images="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true">
<ContentPage.ToolbarItems >
<ToolbarItem Order="Secondary"
Text="logout"
Priority="2"
Clicked="ToolbarItem_Clicked"
/>
<ToolbarItem Order="Secondary"
Text="View Total Income"
Priority="2"
Clicked="ToolbarItem_Clicked_1"
/>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<Style TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="#f4f0ec" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<SearchBar HorizontalOptions="FillAndExpand" x:Name="search" TextChanged="search_TextChanged"/>
<RefreshView x:Name="refresh" >
<CollectionView x:Name="registeredstdslist" SelectionChanged="registeredstdslist_SelectionChanged" SelectionMode="Single" >
<CollectionView.Header>
<Grid Padding="2" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="StdID"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="1"
Text="Name"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="2"
Text="Expected Date"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="3"
Text="Edlevel"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="4"
Text="Grade"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
<Label
Grid.Column="5"
Text="Status"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate >
<Grid ColumnSpacing="1" RowSpacing="0" Padding="9,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="{Binding stdid}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="1"
Text="{Binding name}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="2"
Text="{Binding ExpectedDateofPayment}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="3"
Text="{Binding edlevel}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
FontSize="13"
/>
<Label
Grid.Column="4"
Text="{Binding grade}"
TextColor="Black"
VerticalOptions="Center"
HorizontalOptions="Center"
LineBreakMode="TailTruncation"
Padding="10"
FontSize="13"
/>
<Image
Grid.Column="5"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="20"
WidthRequest="20"
>
<Image.Triggers>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="false" >
<Setter Property="Source" Value="{OnPlatform Android=redtik.png,iOS=redtik.png}"/>
</DataTrigger>
<DataTrigger TargetType="Image" Binding="{Binding status}" Value="true" >
<Setter Property="Source" Value="{OnPlatform Android=greentik.png, iOS=greentik.png}"/>
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>
<StackLayout VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="#0d98ba">
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAddStd">
<Image Margin="0,10,0,5" x:Name="imgAdd" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckfilter">
<Image Margin="0,10,0,10" x:Name="imgfilter" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
<StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckshare">
<Image Margin="0,10,0,10" x:Name="imgshare" Style="{StaticResource ButtonNavigationBarImageStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="Transparent" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="Transparent">
<ActivityIndicator x:Name="activityIndicator" Margin="0,50,0,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="40" HeightRequest="40" ></ActivityIndicator>
</StackLayout>
</StackLayout>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
in android nothing is wrong. but for some reason, in ios, the toolbar items are repeated. any suggestions. thanks in advance.

Xamarin.Forms CollectionView GridItemsLayout same height elements

How do I make the CollectionView render all items with the same height while using a GridItemsLayout on iOS? It already works on Android that all elements in a row gets the same height but on iOS they are squished vertically in the center of the row.
This is how it currently looks on iOS (how it not should be..):
And this is how it currently looks on Android (how it also should be on iOS - all elements are scaled to the same height in the same row):
As of now, this is how my XAML looks like:
<CollectionView Grid.Row="1" x:Name="DataListView" ItemSizingStrategy="MeasureAllItems" ItemsSource="{Binding Data}" IsGrouped="False" ItemTemplate="{StaticResource EntryTemplate}"
Header="{Binding Header}" Footer="{Binding Footer}" BackgroundColor="{DynamicResource DarkBackgroundColor}">
<CollectionView.ItemsLayout>
<!-- Span is set in OnSizeAllocated to make this "dynamic" -->
<GridItemsLayout x:Name="GridItemsLayout" Orientation="Vertical" Span="1" />
</CollectionView.ItemsLayout>
<CollectionView.HeaderTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="10,20">
<Label Text="{Binding}" TextColor="{DynamicResource TextColor}" FontAttributes="Bold" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.HeaderTemplate>
<CollectionView.FooterTemplate>
<DataTemplate x:DataType="x:String">
<Grid Padding="{OnPlatform iOS=20 30 20 20, Default=20}">
<Label Text="{Binding}" TextColor="{DynamicResource LightTextColor}" FontSize="Micro" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
</Grid>
</DataTemplate>
</CollectionView.FooterTemplate>
</CollectionView>
This is my entry data template XAML:
<DataTemplate x:Key="EntryTemplate" x:DataType="data:Entry">
<Grid BackgroundColor="Red" VerticalOptions="FillAndExpand" Margin="0">
<Frame WidthRequest="{Binding Converter={StaticResource FlowColumnWidthConverter}, ConverterParameter=324}" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
BorderColor="{Binding IsActive, Converter={StaticResource ActiveToColorConverter}}" HorizontalOptions="Center" Margin="8" Padding="10" CornerRadius="5">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChecklistElementTapped" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Source="{Binding Type, Converter={StaticResource TypeToEmbeddedImageConverter}}" WidthRequest="32" HeightRequest="32" Margin="4" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" LineBreakMode="TailTruncation" VerticalOptions="Start" />
<Label Grid.Row="1" Grid.Column="1" Text="{Binding Region}" FontSize="12" LineBreakMode="TailTruncation" VerticalOptions="Start" Margin="0,-6,0,0" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding AdditionalData}" TextType="Html" FontSize="12" LineBreakMode="WordWrap" Margin="0"
IsVisible="{Binding AdditionalData, Converter={StaticResource EmptyToVisibilityConverter}}" InputTransparent="True" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding Description}" FontSize="12" LineBreakMode="WordWrap"
IsVisible="{Binding Description, Converter={StaticResource EmptyToVisibilityConverter}}" />
<Switch Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" IsToggled="{Binding IsDone}" HorizontalOptions="Center" VerticalOptions="Center" />
<StackLayout Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" Orientation="Horizontal" Spacing="12" HorizontalOptions="Center" VerticalOptions="Start" Margin="0,4,0,4">
<controls:TintedImageButton Source="Details.png" Clicked="OnNavigateToDetailsButtonClicked" HeightRequest="32" WidthRequest="32"
IsVisible="{Binding Details, Converter={StaticResource EmptyToVisibilityConverter}}"
HorizontalOptions="Center" BackgroundColor="Transparent" />
<controls:TintedImageButton Source="Map.png" Clicked="OnNavigateToMapButtonClicked" HeightRequest="32" WidthRequest="32"
HorizontalOptions="Center" BackgroundColor="Transparent" IsVisible="{x:Static resources:Metadata.MAP_ENABLED}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
And this is my code behind (where I set how many columns there should be):
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
GridItemsLayout.Span = Convert.ToInt32(Math.Floor(width / 340d));
}
Anyone has an idea, why this is looks different on iOS in the first place and what I should look up to fix this problem?

Grid background in Expandable ViewCell does not fully cover ViewCell on iOS

I am trying to create an expandable ListView, but I have a problem with the background color on iOS, as this will not fit the ViewCell.
It is working correctly on Android and UWP.
I have tried some different approaches.
The first approach is this
<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="DEL" />
<StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" Orientation="Vertical" VerticalOptions="Start">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
<Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
<Label Text="{Binding ProjectReference}" />
<Label Text="{Binding CustomerName}" />
</StackLayout>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
</Grid.GestureRecognizers>
<Label Grid.Column="0" Text="More info" />
<Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
</Grid>
</Grid>
<StackLayout IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
<Label Text="{Binding Address}" />
</StackLayout>
</StackLayout>
</Grid>
And another approach is this
<Grid BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" Margin="5" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="DEL" />
<Grid Grid.Column="1" Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" Orientation="Vertical" VerticalOptions="Start">
<Label LineBreakMode="TailTruncation" Text="{Binding Description}" />
<Label Text="{Binding ProjectReference}" />
<Label Text="{Binding CustomerName}" />
</StackLayout>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Amount}" />
<Grid Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" IsVisible="{Binding IsMoreInfoAvailable}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ChangeMoreInfoCommand}" />
</Grid.GestureRecognizers>
<Label Grid.Column="0" Text="More info" />
<Label Grid.Column="1" Text="{Binding MoreInfoIcon}" />
</Grid>
</Grid>
<StackLayout Grid.Column="1" Grid.Row="1" IsVisible="{Binding ShowMoreInfo}" VerticalOptions="Start">
<Label Text="{Binding Address}" />
</StackLayout>
</Grid>
And both approaches work on UWP and Android but neither of them work on iOS
The command consist of
ShowMoreInfo = !ShowMoreInfo;
MoreInfoIcon = ShowMoreInfo ? "-" : "+";
UpdateLayout?.Invoke();
Where the UpdateLayout action is only set on iOS and is set to ForceUpdateSize
The source code can be found on WeTransfer
EDIT
I expect the layout to look like this, when I expand the ViewCell
But instead it looks like this, when I expand the ViewCell
The problem only occurs, when the ViewCell is expanded for the 1st time.

Structure of my scrollview xamarin ios

I have the following structure and I want to put a scrollView in my ios application, when I place the Scrowview in this structure my data all disappear. How to make a correct structure where my scrollview works?
<?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:g.Portable.Helpers;assembly=g.Portable"
x:Class="g.Portable.Views.AboutPage"
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Title="titulo">
<AbsoluteLayout VerticalOptions="FillAndExpand">
<ScrollView HeightRequest="1000">
<cv:CarouselView x:Name="MAinCarousel" VerticalOptions="Start" HeightRequest="250">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="Image" Grid.RowSpan="2" Source="{Binding img}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="250"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="5">
<Label TextColor="White" Text="{Binding category}" BackgroundColor="{Binding category_color}" Font="Bold" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding data}" FontSize="16" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
<Label TextColor="White" Text="{Binding titulo}" FontSize="18" HorizontalOptions="Start" Font="Bold" VerticalOptions="CenterAndExpand"/>
<Button Text="Clique aqui..." IsVisible="true" HeightRequest="16" Clicked="Handle_Clicked" TextColor="White" BackgroundColor="#1C86EE"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
<StackLayout BackgroundColor="#234084">
<Label Text=" Ăšltimas " TextColor="White" Font="Bold" FontSize="16" BackgroundColor="#234084"/>
</StackLayout>
<ListView x:Name="listView"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
HasUnevenRows="True"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="344" VerticalOptions="Fill">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout HeightRequest = "60" WidthRequest="60">
<Image x:Name="Image" Source="{Binding Image}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Category}" TextColor="White" FontSize="Small" LineBreakMode="NoWrap" BackgroundColor="{Binding Color_category}"/>
<Label Text="{Binding PublishDate}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Title}" TextColor="#234084" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout IsVisible="{Binding IsBusy}" BackgroundColor="#80000000" Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<ActivityIndicator IsRunning="{Binding IsBusy}" Color ="White">
</ActivityIndicator>
<Label Text="Carregando..." HorizontalOptions="Center" TextColor="White"/>
</StackLayout>
</AbsoluteLayout>
You have multiple children in ScrollView. That is not going to work. ScrollView can have only one direct child

Listview not updated when isVisible is set to true

I'm trying to make a ListView with clickable rows. When you click on a row it sets a child stacklayout to visibility true. This works fine in android, but not in ios. Maybe I'm doing it the wrong way. I am still a beginner, any idea how to fix this or any other better approach?
The problem is that it opens on ios so the visibility changes, but it does not update the height of the cell. The cell updates off-screen for example if you scroll up until you can't see the opened cell anymore and then scroll back down. You'll see it has updated the height.
I tried using a custom renderer, but i have no idea where to start.
This is my 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" x:Class="Lisa.Excelsis.Mobile.AssessmentPage" xmlns:local="clr-namespace:Lisa.Excelsis.Mobile;assembly=Lisa.Excelsis.Mobile">
<StackLayout>
<local:SpecialListView x:Name="CategoryList"
ItemsSource = "{Binding Categories}"
HasUnevenRows="true"
RowHeight="-1"
GroupDisplayBinding="{Binding Name}"
IsGroupingEnabled="true">
<local:SpecialListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="ObservationContainer"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
VerticalOptions="StartAndExpand"
BackgroundColor="White">
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OpenItem"/>
</StackLayout.GestureRecognizers>
<Grid HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label x:Name="ObservationOrder"
Text="{Binding Criterion.Order, StringFormat='{0}.'}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="0" Grid.Row="0"/>
<Label x:Name="ObservationTitle"
Text="{Binding Criterion.Title}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="1" Grid.Row="0"/>
</Grid>
</StackLayout>
<StackLayout x:Name="ObservationButtons"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
BackgroundColor="White"
IsVisible="false"
Padding="0, 0, 0, 20"
ClassId = "{Binding Id, StringFormat='ObservationButtons_{0}'}">
<Grid HorizontalOptions="Center"
Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" >
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="yesImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetYesImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Ja" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0">
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="noImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetNoImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Nee" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<Image Source="maybenot.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="3" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="skip.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="4" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="unclear.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="5" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="change.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="6" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</local:SpecialListView.ItemTemplate>
</local:SpecialListView>
</StackLayout>
This is an example of how it works on android and how i want it to work on ios.
I reproduced your Problem in a small Testproject. I prefer doing layout changes via data binding, instead of code behind.
Let's start with the Template:
<?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="App6.Page1">
<ListView x:Name="CategoryList"
BackgroundColor="Gray"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedItem}"
HasUnevenRows="true"
RowHeight="-1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<Label x:Name="ObservationTitle"
Text="{Binding Title}"
FontSize="18"
TextColor="Black"
VerticalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal" IsVisible="{Binding IsSelected}">
<Image BackgroundColor="Fuchsia" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Green" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Yellow" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Blue" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Black" WidthRequest="40" HeightRequest="40"></Image>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
The Datatemplate is basicaly the same, but:
the StackLayout has no Click-Listener
the Visbility of the StackLayout is bound to IsSelected (IsVisible="{Binding IsSelected}")
the SelectedItem of the ListView is bound to SelectedItem of our ViewModel
Our Page just sets the ViewModel as DataContext
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
BindingContext = new Page1ViewModel();
}
}
The ViewModel
implements INotifyPropertyChanged to notify the view about data changes
adds some dummy items to our Categories Collection
has a SelectedItem property that updates the IsSelected property of the Categories
class Page1ViewModel : INotifyPropertyChanged
{
private Category _selectedItem;
private ObservableCollection<Category> _categories = new ObservableCollection<Category>();
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<Category> Categories
{
get { return _categories; }
set
{
_categories = value;
OnPropertyChanged();
}
}
public Category SelectedItem
{
get { return _selectedItem; }
set
{
if (_selectedItem == value)
return;
if (_selectedItem != null)
{
_selectedItem.IsSelected = false;
}
_selectedItem = value;
if (_selectedItem != null)
{
_selectedItem.IsSelected = true;
}
}
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public Page1ViewModel()
{
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
}
}
Last, but not least, but most important, you need a tiny custom renderer that overwrites the default one. We call ReloadData() if the SelectedItem has changed.
[assembly: ExportRenderer(typeof(ListView), typeof(MyListViewRenderer))]
namespace App6.iOS.CustomRenderer
{
public class MyListViewRenderer : ListViewRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ListView.SelectedItemProperty.PropertyName)
{
Device.BeginInvokeOnMainThread(() => Control.ReloadData());
}
}
}
}
Result

Resources