ListView Renderer view cell text moves towards right on grouping

Question

I have used a renderer for my listview because groupheader used to get stuck on scrolling. After using the rendered the scroll issue got fixed but

The viewcell text got aligned towards the right on Load.
As you scroll the aligning issue did not appear.

How to align the viewcell text in the correct way (towards left, how it appears when scrolling)

This is my code in renderer

public class CustomListviewEventDetailsRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
             if (this.Control != null && e.NewElement != null)
             {

                var frame = CoreGraphics.CGRect.Empty;
                var tbl = new UITableView(frame, UITableViewStyle.Grouped)
                {
                    Source = this.Control.Source
                };
                this.SetNativeControl(tbl);

            }
        }
    }

XAML:

              <local1:CustomListviewEventDetails x:Name="lstItems" HasUnevenRows="True" SeparatorVisibility="None" BackgroundColor="#EEEEEE" ItemsSource="{Binding lstViewItemSource}" ItemSelected="lstItems_ItemSelected" VerticalOptions="FillAndExpand"  HeightRequest="{Binding LtHeight}"
                                                           IsGroupingEnabled="True" >

     <local1:CustomListviewEventDetails.GroupHeaderTemplate>
                                            <DataTemplate>
                                                <local1:CustomViewCellFS Height="30" >
                                                    <StackLayout Padding="20,0,0,0" VerticalOptions="CenterAndExpand" BackgroundColor="Green">
                                                        <Label Text="{Binding SectionName}" FontSize="15" FontAttributes="Bold" TextColor="Gray" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"  />
                                                    </StackLayout>
                                                </local1:CustomViewCellFS>
                                            </DataTemplate>
                                        </local1:CustomListviewEventDetails.GroupHeaderTemplate>
 <local1:CustomListviewEventDetails.ItemTemplate>
                                        <DataTemplate>
                                            <ViewCell>
                                                <ViewCell.View>
                                                    <StackLayout Padding="0,0,0,0" Margin="0,0,0,0">
                                                        <Grid RowSpacing="0">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="Auto"></RowDefinition>
                                                                <RowDefinition Height="Auto"></RowDefinition>
                                                                <RowDefinition Height="Auto"></RowDefinition>
                                                                <RowDefinition Height="5"></RowDefinition>
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="0.1*"></ColumnDefinition>
                                                                <ColumnDefinition Width="0.9*"></ColumnDefinition>
                                                            </Grid.ColumnDefinitions>

                                                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding PackageQuantity}" FontSize="15" TextColor="Black" HorizontalOptions="Start" IsVisible="{Binding PackageNameVisibility}" FontAttributes="Bold" >
                                                            </Label>
                                                            <Label Grid.Row="0" Grid.Column ="1" Text="{Binding PackageName}" FontSize="15" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Start" IsVisible="{Binding PackageNameVisibility}" FontAttributes="Bold" ></Label>
                                                            <Label Grid.Row="1" Grid.Column="0" Text="{Binding Quantity}" FontSize="15" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Start" IsVisible="{Binding PackageNameVisibility}" >
                                                            </Label>
                                                            <Label  Grid.Row="1" Grid.Column="1" Text="{Binding Item}" FontSize="15" TextColor="Black" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Start" IsVisible="{Binding PackageNameVisibility}">
                                                            </Label>
                                                            <Label Grid.Row="2" Grid.Column="0" Text="{Binding SectionQuantity}" FontSize="15" TextColor="Black" HorizontalOptions="Start" HorizontalTextAlignment="Start" IsVisible="{Binding SectionItemVisibility}" >
                                                            </Label>
                                                            <Label  Grid.Row="2" Grid.Column="1" Text="{Binding SectionItem}" FontSize="15" TextColor="Black" HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Start" IsVisible="{Binding SectionItemVisibility}" >
                                                            </Label>
                                                            <BoxView x:Name="txt" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="5" ></BoxView>

                                                        </Grid>
                                                    </StackLayout>
                                                </ViewCell.View>
                                            </ViewCell>
                                        </DataTemplate>
                                    </local1:CustomListviewEventDetails.ItemTemplate>
      </local1:CustomListviewEventDetails>

I think your problem relates to a known Xamarin bug: [link1](https://github.com/xamarin/Xamarin.Forms/issues/1415), [link2](https://stackoverflow.com/questions/43147929/xamarin-label-losing-text-alignment-when-page-returned-to/43151684) — VahidShir, Jan 30 '18 at 06:52
If you dno't want to sticky header, just use a normal listview and a DataTemplateSelector to fake the headers in the List collection. ( https://forums.xamarin.com/discussion/104339/is-there-a-way-to-disable-the-sticky-headers-of-a-grouped-listview-ios ) — Depechie, Jan 30 '18 at 09:26

Ax1le · Answer 1 · 2018-01-30T09:19:49.370

0

In my test, if you don't use renderer the ListView can place its cell at correct position. Also it seems you just create a new UITableView but the same as what you have defined in forms, why do you want to do this?

If you do need to create this renderer. I think you can try to reload the new UITableView at some time like:

//Subscribe this event in your renderer
public override void LayoutSubviews()
{
    base.LayoutSubviews();
    tbl.ReloadData();
}

It may be not a perfect solution, but it can solve your issue.

edited Jan 30 '18 at 09:19

answered Jan 30 '18 at 09:14

Ax1le

6,563
2
14
61

I had tried this but it didnt work, I posted the fix what worked for me. Thanks – Nathaniel Nunes Jan 30 '18 at 11:21

score 0 · Answer 2 · answered Jan 30 '18 at 11:19

Thanks everyone for your help, I was able to fix the issue based on the solution provided here link

This is my working code, if anyone else gets this issue:

 protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
             if (this.Control != null && e.NewElement != null)
             {
                UITableView oUITableView = (UITableView)this.Control;
                UIView dummyView = new UIView(new CoreGraphics.CGRect(0, 0, oUITableView.Bounds.Size.Width, 40));
                oUITableView.TableHeaderView = dummyView;
                oUITableView.ContentInset = new UIEdgeInsets(-40, 0, 0, 0);
                this.SetNativeControl(oUITableView);

            }
        }

ListView Renderer view cell text moves towards right on grouping

2 Answers2