Android Xamarin RendererFactory.getRenderer() does not work - xamarin

For Data Template I have used StackLayout with label inside it and created a custom renderer for grid-view.
The code RendererFactory.getRenderer() doesn't work; it only shows a StackLayout without any label inside.
Any help would be appreciated.

As of now RendererFactory.getRenderer() won't work for auto layout containers such as StackLayout/GridLayout with child contents refer this link. Only the primary parent is rendered but the childrens are not rendered in UI but the controls are available after converting to native view
this._view = RendererFactory.GetRenderer(this._viewCell.View).NativeView;
Try using AbsoluteLayout and position the controls accordingly. I had tried this using XLabs Grid View Control since they used Grid View Renderer for making the UICollectionView(TileList) and GridViewCell for generating the viewCell from Forms to Native.
<controls:GridView
x:Name="GrdView"
RowSpacing="5"
Padding="5"
ColumnSpacing = "5"
ItemWidth ="152"
ItemHeight = "200"
ItemsSource="{Binding gridColl}"
>
<controls:GridView.ItemTemplate>
<DataTemplate >
<ViewCell>
<ViewCell.View>
<!-- WORKING-->
<AbsoluteLayout BackgroundColor="Red">
<Image Source="{Binding image}"
AbsoluteLayout.LayoutBounds="0, 0, 0.5, 0.5"
AbsoluteLayout.LayoutFlags="All"/>
<BoxView Color="#8080FF"
AbsoluteLayout.LayoutBounds="0.33, 0, 0.25, 0.25"
AbsoluteLayout.LayoutFlags="All" />
<Label Text="Test" BackgroundColor="Red"
AbsoluteLayout.LayoutBounds="1, 1, 0.5, 0.5"
AbsoluteLayout.LayoutFlags="All"/>
</AbsoluteLayout>
<!--NOT WORKING-->
<!--<StackLayout BackgroundColor="Blue">
<Image Source="{Binding image}" />
<Label Text="Test" BackgroundColor="Red"/>
</StackLayout>-->
</ViewCell.View>
</ViewCell>
</DataTemplate>
</controls:GridView.ItemTemplate>
</controls:GridView>
i hope this might help you...

Related

Xamarin Forms Grid.Row Auto --> Still Shows Scrollbar in Grid Item

I have a slight problem with XamarinForms, which I am fairly new with.
I do have a grid with several Items in it (ListView, Label, Stacklayout, Listview).
I thought setting RowDefinitions = "Auto" for each row, would make the whole Page scrollable.
But instead I have a scrollbar on each individual listView.
I have added a snippet of my code with one of the listViews inside.
How do I get the listViews shown in their full size and the scrollbar be for the whole page?
I have already tried a scrollview instead of the grid, but it did not work.
Picture of Content in Emulator
Picture of Whole Page
Xamarin Forms:
<Grid
Padding="10"
RowDefinitions="Auto,Auto,Auto,Auto"
ColumnDefinitions="*"
>
<Label Padding="20" FontAttributes="Bold" FontSize="40" Text="{Binding DisplayName}" Grid.Row="0"/>
<ListView ItemsSource="{Binding News}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding DateTimeString}"/>
<Label Text="{Binding Text}" MaxLines="4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Grid ColumnDefinitions="*,Auto"
Padding="10"
VerticalOptions="Center">
<Label Text="News"
Grid.Column="0"
FontAttributes="Bold"
FontSize="32"/>
<Label Text="mehr Anzeigen"
Grid.Column="1"
HorizontalTextAlignment="End"/>
</Grid>
</ListView.Header>
</ListView>
You can put the items in ScrollView which is capable of scrolling its content.
refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview

Xamarin form carouselview scrolls with multiple items for single scroll

Iam using Carousel view control available in Xamarin form(Version 5).
In my case i used Listviews inside carousel view. It works fine if scroll by swiping to left or right, but if i programmatically set the ScrollTo or Position property for the carousel view using button click then it is scrolling multiple times though i'm setting single incremental value.
I added SnapPointsType="MandatorySingle" as mentioned here
One more issue is if my current carousel position is zero and moving to last position or more then one is not working.
<AbsoluteLayout Margin="2" BackgroundColor="Transparent">
<CarouselView
x:Name="MyCarousalView"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Scrolled="CarouselViewScrolled">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="0" SnapPointsType="MandatorySingle" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<ListView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ItemsSource="{Binding .}"
x:FieldModifier="public">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="ViewCellTapped">
<StackLayout Padding="0">
<StackLayout Padding="20,1" VerticalOptions="StartAndExpand" Spacing="0" >
<Label
FontSize="16"
Text="{Binding Description}"
FontAttributes="Bold"/>
<Label
FontSize="14"
Text="{Binding CreatedDate}" />
</StackLayout>
<Label HorizontalOptions="FillAndExpand" Padding="0" HeightRequest="1" BackgroundColor="#D4D4D4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</AbsoluteLayout>
Next button click event
private void NextClicked(object sender, EventArgs e)
{
MyCarousalView.ScrollTo((MyCarousalView.Position + 1) < _weekDaysList.Count ? MyCarousalView.Position + 1 : 0);
}
Carousel view binding:
List<List<Note>> _myList;
_myList=getData(); //based on service response
MyCarousalView.ItemsSource = null;
MyCarousalView.ItemsSource = _myList;
Screen recording with issue image
Screen video
Please letme know if any solution/workaround. Thanks

How to use IndicatorView in CarouselPage?

I am trying to add an Indicator View style dots to my CarouselPage; However, the documentation I have found only shows how to use the new IndicatorView with CarouselView.
Is there anyway to use it with CarouselPage instead? If not, Is there anything similar to IndictorView that's used for CarouselPage? Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<CarouselPage
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"
x:Class="Page.MainPage">
<ContentPage>
<StackLayout Padding="0,20,0,0">
<Image Source="LOGO.png"
HorizontalOptions="Center"
VerticalOptions="Center"
HeightRequest="195"
WidthRequest="205"
/>
<AbsoluteLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="bg.png"
AbsoluteLayout.LayoutBounds="0.35, 0.6, -1, 1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="200"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.4, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="252"
WidthRequest="290"/>
</AbsoluteLayout>
<StackLayout>
<Label Text="Welcome"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White"
Padding="0,15"
Font="Bold,20"/>
<Label Text="This is page 1"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="18"
Padding="25,0"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
<ContentPage BackgroundColor="#3e454d">
<StackLayout BackgroundColor="#3e454d">
<AbsoluteLayout>
<Image Source="Map.png"
AbsoluteLayout.LayoutBounds="0.4, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="205"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="282"
WidthRequest="340"/>
</AbsoluteLayout>
<StackLayout Padding="10,10">
<Label Text="Join US"
TextColor="White"
Padding="0,0,0,15"
Font="Bold,22"/>
<Label Text="This is Page 2"
HorizontalTextAlignment="Center"
FontSize="18"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
</CarouselPage>
Use CarouselView instead of CarouselPage , embedd CarouselPage.Content to CarouselView.ItemLayout as mentioned in the documentation
Note that IndicatorView is different view, its not embedded in CarouselPage , even in CarouselView , you have to give the binding reference to CarouselView in order for it to work.
Also note that IndicatorView is still in Preview mode you need to set the experimental flag in order to make it work
Forms.SetFlags("IndicatorView_Experimental");
Also its showing Carouselview is in preview too(It was not, weird!)
so you may have to set experimental flag for that as well
Forms.SetFlags("CarouselView_Experimental");

Xamarin forms listview - show images full widh, auto height

I have a listview in Xamarin Forms and I have a requirement to maintain aspect ratio but also this:
When an image is taller than it is wide, show the image flush to the left and right with no margins, have the height be auto
When an image is wider than it is tall, the requirement is the same, but this works. In the screenshot it shows how images currently render when they're taller than wide. Changing the aspect property breaks the condition when it is wider than tall. When I copy this template into a blank page, the image displays fine. I think the issue is being able to set the height of each row in the listview to auto. It may not be the issue though. I'm using a SyncFusion listview for Xamarin
Here is the code for the item template of the listview:
<DataTemplate>
<ViewCell>
<StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Card Header -->
<!-- Truncated for brevity -->
</Grid>
<StackLayout Grid.Row="1">
<!-- Card title -->
<!-- Truncated for brevity -->
</StackLayout>
<!-- Card Body -->
<StackLayout BindingContextChanged="PostImageStackLayout_BindingContextChanged">
<Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
<!-- Card article image -->
<ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
Source="{Binding MainIMageURL}" BindingContextChanged="PostImage_BindingContextChanged"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="{Binding }"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<!--Likes and comment count-->
<!-- Truncated for brevity -->
Don't put fix height on Grid Row where it have the image element. You can use the "auto" value.
<RowDefinition Height="auto"/>
and change the Aspect to
AspectFill
I use the collectionview from the latest Xamarin.Forms 4.3. Here is my sample code
xaml
<ContentView.Content>
<StackLayout>
<CollectionView x:Name="ImagesCollectionView">
<CollectionView.ItemsLayout>
<ListItemsLayout ItemSpacing="20">
<x:Arguments>
<ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
</x:Arguments>
</ListItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
Source="{Binding .}"
Aspect="AspectFill"
LoadingPlaceholder="noimg.png"/>
<Label Text="label"
TextColor="Gray"
Opacity="0.8"
Margin="12,0,0,0"
HorizontalOptions="Start"
FontSize="Small"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentView.Content>
c#
public MySecondView()
{
InitializeComponent();
ImagesCollectionView.ItemsSource = new List<string>()
{
"http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
};
}
Output
You can set the HeightRequest and WidthRequest of your image to -1 (then it'll fit all the space available)

Add logo at the middle of Navigation bar?

I want to add a logo in the middle of the navigation bar like this:
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logo.png" Activated="RefButtonClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
I also tried this:
var cancelItem = new ToolbarItem
{
Text = "Cancel",
Icon = "tabalilogo.png",
Order = ToolbarItemOrder.Secondary
};
Everything I tried positioned the logo on the right side of the navigation bar. How can I center it?
Recently After Updating to xamarin forms 3.2, You can customize the title bar using title bar property.
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
<Image.GestureRecognizers>
<Image.TapGestureRecognizer
Tapped="HandleTapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
....
For more details https://blog.xamarin.com/xamarin-forms-3-2-0-released-going-big-with-little-things/
I am not sure if that can be implemented using existing toolbar but I had similar requirement and I couldn't figure out how to achieve using the xamarin forms toolbar on a navigation page. therefore I decided to use a modal page and I disabled the navigation page in the code behind with the line of code below.
NavigationPage.SetHasNavigationBar(this, false);
I am using xaml and I created a custom navigator with absolutelayout as below
<AbsoluteLayout x:Name="slToolbar" Grid.Row="0" >
<Button x:Name="Cancel" BackgroundColor="#ADD8E6" Image="cancel.png" Command="{Binding CancelClick}" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="0, .5, 36, 36" Android="0, .5, 36, 36" WinPhone="0, .5, 50, 50" />
</AbsoluteLayout.LayoutBounds>
</Button>
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="1,.5,110,50" Android="1,.5,50,36" WinPhone="1,.5,110,50" />
</AbsoluteLayout.LayoutBounds>
<ContentView >
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<Button x:Name="NewIOS" BackgroundColor="#ADD8E6" Image="ic_add.png" Command="{Binding AddNew}" ></Button>
</OnPlatform.iOS>
<OnPlatform.WinPhone>
<Button x:Name="NewWP" BackgroundColor="#ADD8E6" Command="{Binding AddNew}" Image="ic_add.png"/>
</OnPlatform.WinPhone>
</OnPlatform>
</ContentView>
<Button x:Name="btnSave" BackgroundColor="#ADD8E6" Image="check.png" Command="{Binding SaveClick}" HorizontalOptions="End" ></Button>
</StackLayout>
</AbsoluteLayout>
this code will produce something like below. I have the icons in the corners but surely they can be placed anywhere. I used cancel icon instead of back button. Of course, in this case you need to handle back button(cancel button) click yourself. screenshot below is from uwp application but on android and ios I get similar results.

Resources