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
Related
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.
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?
I am facing trouble to implement "Soft Keyboard Input Mode" and fix keyboard overlap issue in Xamarin.Forms iOS app.
The following solutions that I have tried:
Scroll View: Which is not work for me because I am already using one scroll view in my content page so nested scroll view will not work as defined in following article https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scroll-view.
Xamarin.IQKeyboardManager: Which is solve the overlap issue but hides the top content by taking it up which I am not be able to scroll down.
I have also tried following articles
https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms/
https://github.com/adamped/SoftInput/blob/master/SoftInput/SoftInput.iOS/Render/KeyboardRender.cs
Also facing another issue without "Soft Keyboard Input Mode" getting blank white space sometime top and bottom while focusing to Entry control that trigger keyboard up and down on multiple clicks.
The following page layout designs I am using in my two pages (Facing issue in 2 pages which has I am already using scroll view)
Page 1:
`<ContentPage.Content>
<StackLayout >
<ScrollView Margin="10,10,10,0">
<StackLayout x:Name="pageContentLayout">
</StackLayout>
</ScrollView>
<AbsoluteLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout x:Name="mainEntryLayout"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<ActivityIndicator x:Name="entryIndicator"
IsVisible="False"
IsRunning="False">
</ActivityIndicator>
<Grid VerticalOptions="EndAndExpand"
HorizontalOptions="EndAndExpand"
x:Name="entryGrid"
BackgroundColor ="{StaticResource Color}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<custom:CustomEntry CornerRadius="4"
IsCurvedCornersEnabled="True"
BorderColor="{StaticResource Color}"
PlaceholderColor="{StaticResource Color}"
TextColor="{StaticResource Color}"
VerticalOptions="FillAndExpand"
HeightRequest="100"
HorizontalOptions="FillAndExpand"
Grid.Column="0"
FontSize="12"
BackgroundColor ="{StaticResource Color}"
x:Name="commentCustomEntry"
Keyboard="Chat"
Margin="10"/>
<ImageButton VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Grid.Column="1"
HeightRequest="30"
WidthRequest="30"
x:Name="SendBtn"
BackgroundColor="Transparent"/>
</Grid>
</StackLayout>
<StackLayout x:Name="pageIndicatorLayout"
IsVisible="false"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
<ActivityIndicator IsRunning="true"
Color ="{DynamicResource Color}"/>
</StackLayout>
</AbsoluteLayout>
</StackLayout>
</ContentPage.Content>
`
Page 2:
`
<StackLayout>
<AbsoluteLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout x:Name="pageContentLayout"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout x:Name="ImgLayout" ></StackLayout>
<ScrollView>
<StackLayout>
<StackLayout Orientation="Vertical"
HorizontalOptions="FillAndExpand">
<Label Text="{Binding titleLable}"
FontAttributes="Bold"
TextColor="{StaticResource Color}"
Margin="10, 0, 0, 0"
FontSize="14"/>
<Label x:Name="resourceLabel"
TextColor="{StaticResource Color}"
FontSize="11"
Margin="10, 0, 0, 0" />
<Label Text="{Binding sourceLabel}"
TextColor="{StaticResource Color}"
FontSize="11"
FontAttributes="Bold"
Margin="10, 0, 0, 0" />
<Label x:Name="personLabel"
TextColor="{StaticResource Color}"
FontSize="11"
Margin="10, 0, 0, 0" />
<Label FontAttributes="Bold, Italic"
FontSize="12"
Padding="10,10,10,0"
Text="{Binding hightlightLabel}"/>
</StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<local:ExtendedWebViewModel x:Name="webContentView"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</Grid>
</StackLayout>
</ScrollView>
<Grid Padding="10,0,10,0" RowSpacing="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*"/>
<ColumnDefinition Width="40*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Column="1"
Grid.Row="0"
Grid.RowSpan="2"
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand">
<Image Source="{Binding lImg, Converter={StaticResource Converter}}"
HeightRequest="20"
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLImgTapped"
CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
<Label x:Name="tCount"
VerticalOptions="CenterAndExpand"
Text="{Binding tCount}"
FontSize="12">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OntCountTapped"
CommandParameter="{Binding item}"/>
</Label.GestureRecognizers>
</Label>
<Image Source="{Binding cImg, Converter={StaticResource Converter}}"
HeightRequest="20"
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCImgTapped"
CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
<Label Text="{Binding cCount}"
VerticalOptions="CenterAndExpand"
FontSize="12">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCCountTapped"
CommandParameter="{Binding item}"/>
</Label.GestureRecognizers>
</Label>
<Image Source="{Binding SImg, Converter={StaticResource Converter}}"
HeightRequest="20"
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSImgTapped"
CommandParameter="{Binding item}"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Grid VerticalOptions="EndAndExpand"
HorizontalOptions="EndAndExpand"
x:Name="entryGrid"
BackgroundColor ="{StaticResource Color}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85*"/>
<ColumnDefinition Width="15*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<custom:CustomEntry CornerRadius="4"
IsCurvedCornersEnabled="True"
BorderColor="{StaticResource Color}"
PlaceholderColor="{StaticResource Color}"
TextColor="{StaticResource CommentEntryValueColor}"
VerticalOptions="FillAndExpand"
HeightRequest="100"
HorizontalOptions="FillAndExpand"
Grid.Column="0"
FontSize="12"
BackgroundColor ="Color"
x:Name="commentCustomEntry"
Keyboard="Chat"
Margin="10"/>
<ImageButton VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"Grid.Column="1"
HeightRequest="30"
WidthRequest="30"
Clicked="OnSendButtonClicked"
x:Name="SendBtn"
BackgroundColor="Transparent"/>
</Grid>
</StackLayout>
<StackLayout x:Name="pageIndicatorLayout"
IsVisible="false"
Padding="12"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
<Label x:Name="loadingLabel" TextColor="{StaticResource Color}"/>
<ActivityIndicator IsRunning="true"
Color ="{DynamicResource Color}"/>
</StackLayout>
</AbsoluteLayout>
</StackLayout>
`
Could you please suggest the better solution?
Thanks
If you are targeting ios only, Remove the scrollview and try this plugin. https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap
After installing this nuget ,
Add these line in your Appdelegate class after Xamarin.Forms.Init().
KeyboardOverlapRenderer.Init ();
No need for you to do anything other then initialize the plugin. The keyboard will no longer overlap your Controls!!!
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.
I've been trying to get this looking right in Xaml (x.forms) but can't make it work. Any possibly way this can be solved in Xaml without a custom cell renderer?
Here is how it's supposed to look on native iOS:
What I'm getting so far in Xaml:
Here's my Xaml:
<ScrollView>
<StackLayout>
<ActivityIndicator IsRunning="{Binding IsFetching}" />
<ListView ItemsSource="{Binding Events}" Header="2015" Footer="">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="55">
<ViewCell.View>
<StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White">
<StackLayout>
<BoxView WidthRequest="44"
HeightRequest="5"
BackgroundColor="Purple"
/>
<Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/>
<Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Vertical"
HorizontalOptions="StartAndExpand">
<Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/>
<Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
You can try this with a Grid instead of Stack, also add RowHeight to your ListView
<ListView ... RowHeight="55">
...
<ViewCell Height="55">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="44"/> <!-- for the checkmark -->
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="22" />
<RowDefinition Height="17" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0" WidthRequest="44" HeightRequest="5" BackgroundColor="Purple"/>
<!-- experiment with the vertical alignment to get it right -->
<Label Grid.Row="1" Text="AUG" .../>
<Label Grid.Row="2" Text="31" .../>
</Grid>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="22" />
<RowDefinition Height="22" />
</Grid.RowDefinitions>
<!-- if the vertical alignment doesn't work well add two more rows for top and bottom padding -->
<Label Grid.Row="0" Text="Relay for life" VerticalOptions="End" .../>
<Label Grid.Row="1" Text="Hope city" VerticalOptions="Start" .../>
</Grid>
</Grid>
</ViewCell>
Set HasUnevenRows="True" on the ListView