Xamarin forms navigation bar scrolling on Android - xaml

I have a simple File->New Project Xamarin Forms app just created. When the Editor gains focus the navigation bar slides up. Is this a bug, or how do you lock the navigation bar in place and scroll the page content instead?
Runnable source code can be download here. I am observing this behavior on a Samsung Note 3 phone. This doesn't happen in iOS.
https://github.com/JohnLivermore/SampleXamarinApp/tree/funkyNavbar
App.xaml
public partial class App : Application
{
public App()
{
InitializeComponent();
var mainPage = new MainPage();
var nav = new NavigationPage(mainPage);
MainPage = nav;
}
}
MainPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Page Title"
x:Class="SampleApp.MainPage">
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Field A:" />
<Editor Grid.Row="1" HeightRequest="200" />
<Label Grid.Row="2" Text="Field B:" />
<Editor Grid.Row="3" HeightRequest="200" />
<Label Grid.Row="4" Text="Field B:" />
<Editor Grid.Row="5" HeightRequest="200" />
<Label Grid.Row="6" Text="Field B:" />
<Editor Grid.Row="7" HeightRequest="200" />
<Label Grid.Row="8" Text="Field B:" />
<Editor Grid.Row="9" HeightRequest="200" />
</Grid>
</ScrollView>
</ContentPage>

Add the following code in App.cs to make page auto-resizable.
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
public partial class App : Xamarin.Forms.Application
{
public App()
{
Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
}

If you want to make the toolbar's position static in Android, try adding this in [Activity] attribute in your MainActivity:
WindowSoftInputMode = Android.Views.SoftInput.AdjustNothing
More info here.

Related

Xamarin.Forms: how to position a Circle Image above and between 2 ScrollLayout

I work on a Xamarin.Forms app containing a HomePage based on:
an Image at the top background of the screen
a list of items displayed in a ScrollView
The ScrollView can recover the Image if the list contain many informations.
This looks like this:
The XAML looks like this:
<Grid RowSpacing="0"
BackgroundColor="{StaticResource Gray-050}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header view -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView will be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- List view -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main container -->
<yummy:PancakeView CornerRadius="16,16,0,0"
Padding="0,10,0,0"
BackgroundColor="{StaticResource Gray-050}"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16">
<!-- Phone container -->
<yummy:PancakeView Style="{StaticResource YummyHomeFrame}"
Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Style="{StaticResource HomePageHeaderLabelStyle}"
Text="Phone Number" />
<Label Grid.Row="1"
Style="{StaticResource HomePageLabelStyle}"
Text="+33 6 20 10 70 40" />
</Grid>
</yummy:PancakeView>
<!-- Other containers -->
</StackLayout>
</yummy:PancakeView>
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
I would like to display a circle logo between the 2 ScrollViews, just above the MainContainer, something like this:
But I don't have managed to achieve this, and I don't know if it's possilbe...
You could have a try with RelativeLayout to achieve that.
Here is similar sample code:
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main container -->
<RelativeLayout>
<Frame CornerRadius="16" x:Name="MainFrame"
Padding="0,10,0,0"
BackgroundColor="LightBlue"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16"
Margin="16">
<!-- Phone container -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other containers -->
</StackLayout>
</Frame>
<BoxView CornerRadius="25"
BackgroundColor="AliceBlue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Property=Width,Factor=0.45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Property=Y,Constant=-20}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Constant=100}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Constant=100}" />
</RelativeLayout>
</Grid>
</Grid>
</ScrollView>
The effect:
Add you circle logo at the same level of the container.
<!-- Items view -->
<ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid
ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Container -->
<Frame ...>
<!-- Yoour logo -->
<Frame
Grid.Row="1"
Margin="0,-40,0,0"
BackgroundColor="Green"
CornerRadius="40"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="40" />
</Grid>
</Grid>
</ScrollView>
Check the demo:
As I didn't use the nugget package, I just replaced the pancake view with a frame. And you can adjust the logo size, margin as you wish.
Btw, your structure is a bit complex or redundant, could be a 4-level main structure as below:
<Grid x:Name="mainGrid">
<!-- Header view -->
<BoxView (or Image).../>
<!-- Items view -->
<ScrollView ...>
<Grid ...>
<!-- Container -->
<Frame ...>
<!-- logo -->
<Frame (or Image)...>
</Grid>
</ScrollView>
</Grid>
Thank you #Shaw and #Junior Jiang - MSFT
There are so 2 solutions: with or without RelativeLayout.
The version without RelativeLayout was given by #Shaw.
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header view -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content View -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Frame Container-->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,10,0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,48,16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- No RelativeLayout positioned item -->
<BoxView Grid.Row="1"
CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Start" HorizontalOptions="Center"
Margin="0,-45,0,0" />
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
The version with RelativeLayout is based on #Junior Jiang - MSFT suggestion:
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header View -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content View -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="1">
<RelativeLayout>
<!-- Frame container -->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,10,0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,48,16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- RelativeLayout positioned item -->
<BoxView CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Center" HorizontalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.5,
Constant=-45}"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=MainFrame,
Property=Y,Constant=-45}" />
</RelativeLayout>
</StackLayout>
</Grid>
</ScrollView>
</Grid>
</Grid>

Xamarin.Forms: is it possible to update Shell.TitleView in code-behind?

I work on a Xamarin.Forms.Shell app containing 4 tabs.
On the main tab, I have:
a TitleView containing the logo of the company
s ScrollView containing an Image as Header
a ScrollView containing the main content, that can cover the Header to be fully visible
The XAML looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AvilaShellAppSample.Views.HomePage"
Shell.NavBarHasShadow="False"
Shell.NavBarIsVisible="True"
x:Name="homePage">
<!-- TitleView -->
<Shell.TitleView >
<Grid>
<ffimageloadingsvg:SvgCachedImage Source="resource://ShellAppSample.Resources.blackLogoTitle.svg"
DownsampleHeight="6"
HeightRequest="45"/>
</Grid>
</Shell.TitleView>
<ContentPage.BindingContext>
<vm:HomeViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<Grid RowSpacing="0"
BackgroundColor="{StaticResource Gray-050}"
Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header ScrollView : Image -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Header Image -->
<ffimageloading:CachedImage x:Name="headerImage"
Grid.Row="0"
Aspect="AspectFill"
BackgroundColor="{DynamicResource Gray-200}"
DownsampleToViewSize="true"
HeightRequest="280"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Source="resource://ShellAppSample.Resources.indoor.jpg">
</ffimageloading:CachedImage>
</Grid>
</ContentView>
</ScrollView>
<!-- Content ScrollView -->
<ScrollView>
<ctrl:ParallaxScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ParallaxHeaderView="{x:Reference headerView}"
LogoHeaderView="{x:Reference logoHeaderView}"
HiddenView="{x:Reference hiddenView}"
MainPage="{Binding homePage}">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="220" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Content -->
</Grid>
</ctrl:ParallaxScrollView>
</ScrollView>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
I would like to display the header Image over the NavigationBar/StatusBar by default: so the NavigationBar would be hidden, and the StatusBar background would be the Image header.
Then I would like to display the default NavigationBar/StatusBar only when the content cover the half of the Header: so the NavigationBar would be visible, and the StatusBar background would be the default background.
But I didn't found any way to access to the Shell.NavBarIsVisible property or to the Shell.TitleView in code-behind.
So I would like to know is this is possible?
You need to use the exposed methods in order to set the properties SetNavBarIsVisible() and SetTitleView()
Disabeling the navigation bar for a page in it code-behind:
Shell.SetNavBarIsVisible(this, false);
Setting a custom TitleView for a page in it code-behind:
Label r = new Label();
r.Text = "Hello World";
Shell.SetTitleView(this, (View)r);

Xamarin.Forms How to put text/label over a BoxView element?

I am trying to achieve the result such as in the attached design sample below, I want to add the label SIGN UP and LOGIN over the blue and dark color BoxViews that I successfully created to match the design.
It seems that I cannot add label into a BoxView in Xamarin.Forms so I would like to please know what is a good way to achieve this result.
Currently I am overlapping the BoxViews over the middle column.
<Grid
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<!--0 blank -->
<RowDefinition Height="5*" />
<!--1 logo -->
<RowDefinition Height="15*" />
<!--2 blank -->
<RowDefinition Height="5*" />
<!--3 main title-->
<RowDefinition Height="5*" />
<!--4 main title -->
<RowDefinition Height="5*" />
<!--5 main title-->
<RowDefinition Height="5*" />
<!--7 blank-->
<RowDefinition Height="15*" />
<!--8 subtitle-->
<RowDefinition Height="5*" />
<!--9 subtitle-->
<RowDefinition Height="5*" />
<!--10 blank-->
<RowDefinition Height="0*" />
<!--11 signup login bar-->
<RowDefinition Height="7*" />
<!--12 signup login bar-->
<RowDefinition Height="7*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Image Source="homePageLogo.png"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="3"
HorizontalOptions="Center"
HeightRequest="120"
Aspect="AspectFit">
</Image>
<Label
Text="{Binding MainTitle}"
Grid.Row="3"
Grid.RowSpan="4"
Grid.Column="0"
Grid.ColumnSpan="3"
FontFamily="Gibson"
FontAttributes="Bold"
TextColor="White"
FontSize="50"
LineBreakMode="WordWrap"
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center">
</Label>
<Label
Text="{Binding SubTitle}"
Grid.Row="8"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3"
FontFamily="Poppins"
FontAttributes="Bold"
TextColor="White"
FontSize="Large"
LineBreakMode="WordWrap"
HorizontalOptions="CenterAndExpand"
HorizontalTextAlignment="Center">
</Label>
<!-- This is the boxview that should contain the LOGIN label -->
<BoxView
Grid.Row="11"
Grid.Column="1"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
BackgroundColor="#2F3237">
</BoxView>
<!-- This is the boxview that should contain the SIGNUP label -->
<BoxView
Grid.Row="11"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
BackgroundColor="#337EF3"
CornerRadius="0,15,0,15">
</BoxView>
</Grid>

Xamarin Forms Carousel view issue with binding

Hello I’m having an issue with binding a list of string to my Carousel View
First I have a list of an object I get from my server
public class PostObject
{
public string PostOwner { get; set; }
public string Id { get; set; }
public string Post { get; set; }
public string ProfileImage { get; set; }
public List<string> PostImages { get; set; }
}
List<PostObject> posts = new List<PostObject>();
This works as I expected.
Next I have a card view I created and within the card view I want to have a Carousel View.
So I have setup my Xaml like this (omitting the parts that works for clarity)
<?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:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
NavigationPage.HasNavigationBar="True"
NavigationPage.HasBackButton="False"
NavigationPage.BackButtonTitle="Back"
Title="amici"
x:Class="amici.Posts">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10" >
<Label x:Name="GroupTitle" TextColor="White" FontSize="Medium"/>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.ToolbarItems>
<ToolbarItem Name="iconexample" Icon="settings.png" Priority="0" Order="Primary" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ItemsListView"
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement">
<!--ItemSelected="OnItemSelected"-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<StackLayout Padding="10">
<Frame x:Name="myframe" HasShadow="True" >
<Grid HorizontalOptions="FillAndExpand" RowSpacing="0" ColumnSpacing="0" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Text="{Binding PostOwner}" LineBreakMode="WordWrap" Font="Bold,16" />
<controls:CircleImage Grid.Row="0" Margin="10" BorderColor="white" BorderThickness="1" VerticalOptions="Start" HorizontalOptions="Start" Source="{Binding ProfileImage}" Aspect="AspectFit">
<controls:CircleImage.WidthRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android, iOS">65</On>
</OnPlatform>
</controls:CircleImage.WidthRequest>
<controls:CircleImage.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android, iOS">65</On>
</OnPlatform>
</controls:CircleImage.HeightRequest>
</controls:CircleImage>
<Label Grid.Row="1" Text="{Binding Post}" LineBreakMode="WordWrap" Font="Bold,16" />
<CarouselView x:Name="PostImages" Grid.Row="2" ItemsSource="{Binding PostImages}">
<CarouselView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding .}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<!--<Image Grid.Row="2" Source="{Binding ImageURL}" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />-->
<BoxView Grid.Row="3" BackgroundColor="black" HeightRequest="1" HorizontalOptions="FillAndExpand"/>
<StackLayout Grid.Row="4" Orientation="Horizontal" >
<Label Text="Likes: " LineBreakMode="NoWrap" Font="Bold,14" />
<Label Text="0" LineBreakMode="NoWrap" FontSize="14" />
</StackLayout>
<StackLayout Grid.Row="5" Orientation="Horizontal" >
<Label Text="Comments: " LineBreakMode="NoWrap" Font="Bold,14" HorizontalOptions="End" />
<Label Text="0" HorizontalOptions="End" LineBreakMode="NoWrap" FontSize="14" />
</StackLayout>
<!--<Label Grid.Row="2" Text="{Binding OwnerFullName}" LineBreakMode="NoWrap" FontSize="16" />-->
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
In my code behind I have this
public Posts (GroupInfo ginfo)
{
InitializeComponent ();
GroupTitle.Text = ginfo.Title;
CurrentGroupInfo = ginfo;
GetDataPosts();
ItemsListView.RefreshCommand = new Command(() => {
GetDataPosts();
ItemsListView.IsRefreshing = false;
});
}
public void GetDataPosts()
{
try
{
string apikey = Application.Current.Properties["api"].ToString();
ItemsListView.ItemsSource = null;
posts.Clear();
if (RestController.GetMyPostData(ref posts, CurrentGroupInfo.Id.ToString(), apikey))
{
ItemsListView.ItemsSource = posts;
}
}
catch(Exception e)
{
Debug.WriteLine(e.Message);
}
}
now up to this point everything works and no errors but when the app goes to render the page I get a error
System.TypeInitializationException: The type initializer for 'Xamarin.Forms.ItemsView' threw an exception.
which I trace back to the Carousel View. When I comment out the Carousel View the it works. so I'm thinking I can't bind OR use the Carousel View in the way I thought?
The CarouselView used to be a plugin that has now become part of Xamarin.Forms effective with version 4. You can use an earlier XF version but you will need to get this plugin, add assembly references to your XAML and put initialization code in your platform specific projects.
Alternatively, you could upgrade to Xamarin.Forms 4
Even though you can see the Carousel View on Xamarin.Forms 3.6.0.344457, it only defines an interface there. There're no implementations and properties in the Carousel View Class.
You can only utilize it under Xamarin.Forms 4.0. As it is still a preview version now, there're some limitations. See my post here: https://stackoverflow.com/a/56235795/8354952 for more information.

Xamarin Portable Comments Stacklayout height problems Listview

I am having trouble with height problems in Xamarin PCL with Listview. I want to create a comments section in a scrollable page. But i am struggling with the height of the comments. It just wont expand.
Row.Definition = Auto for the Grid:
<StackLayout Grid.Row="4" Padding="0,20,0,0">
<ListView ItemsSource="{Binding CommentsMVVM}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:CommentsRow />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
In the CommentsRow template:
<Grid RowSpacing="0" ColumnSpacing="14" Padding="20" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.RowSpan="3" Source="{ Binding Image }" VerticalOptions="Start" />
<Label Grid.Column="1" Grid.Row="0" Text="{ Binding UserName }" VerticalOptions="EndAndExpand" TextColor="Blue" />
<Label Grid.Column="1" Grid.Row="1" Margin="0,4,0,0" Text="{ Binding CreatedAt }" TextColor="Grey" FontSize="13" />
<StackLayout Grid.Column="1" Grid.Row="2" Spacing="30" x:Name="StackLayoutMap" VerticalOptions="FillAndExpand" />
</Grid>
And at the C#:
public CommentsRow()
{
InitializeComponent();
var html_label = new HtmlFormattedLabel()
{
TextColor = Color.Black,
FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
};
html_label.SetBinding(HtmlFormattedLabel.TextProperty, "Memo");
this.StackLayoutMap.Children.Add(html_label);
}
But the StackLayout comments text just wont expand automatically. What am i doing wrong?