IncrementalListView get the first item to look different.

TylerByteTylerByte Member ✭✭

Good day, I have a simple WordPress Xamarin.Forms App using some MVVM.

I created an IncrementalListView that extends the normal ListView and allows Incremental Loading: IncrementalListView.cs

This list view is used to bind on a Page NewsOverviewPage.xaml in its PageContent area:

`

<controls:IncrementalListView ItemsSource="{Binding Posts}"
                                      SeparatorVisibility="None"
                                      HasUnevenRows="True"
                                      IsPullToRefreshEnabled="True"                  
                                      RefreshCommand="{Binding LoadPostsAsyncCommand}"
                                      IsRefreshing="{Binding IsRefreshing, Mode=OneWay}">

<controls:IncrementalListView.Behaviors>
<behaviors:EventToCommandBehavior EventName="ItemSelected" Command="{Binding SelectPostCommand}" Converter="{StaticResource SelectedItemConverter}" />
            </controls:IncrementalListView.Behaviors>

            <controls:IncrementalListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame BackgroundColor="White" Margin="10,5">
                            <Grid Margin="6">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <forms:CachedImage HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                               HeightRequest="200"         
                                               DownsampleToViewSize="true"
                                               Source = "{Binding Embedded, Converter={StaticResource FeaturedImageConverter}}"
                                               Aspect="AspectFill"
                                               LoadingPlaceholder="{Binding ., Source={StaticResource PlaceholderImage}, Converter={StaticResource ImageResourceConverter}}"
                                               FadeAnimationEnabled="True">
                                </forms:CachedImage>
                                <Label Text="{Binding Title.Rendered, Converter={StaticResource HtmlConverter}}"
                                   FontSize="Medium" FontAttributes="Bold" Grid.Row="1" />
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </controls:IncrementalListView.ItemTemplate>
        </controls:IncrementalListView>

    </Grid>`

I have tried implementing this within OnItemAppearing() within my IncrementalListView.cs:

private void OnItemAppearing(object sender, ItemVisibilityEventArgs e) {

    IncrementalListView ListView = (IncrementalListView)sender;
    var viewCell = ListView.GetChildElements() as ViewCell;
        int ListViewItemID = ListView.itemsSource.IndexOf(e.Item);

    if (ListViewItemID ==0){
        viewCell.View.BackgroundColor = Color.Red;
    }
}

I have also tried using a bind that sets a variable to True when first post is loaded, that should change the cell color, but I get an error saying I have not implemented that variable in my binding source. The Source is the posts from WordPress I get them using the WordPressPCL. I do not want to override that great library just to change the way my first post looks.

Can anybody please point me in the right direction? I have tried looping through my List view:

foreach (var item in ListView.itemsSource)
    {
        var cell = (ItemsView)item;

        if (ListViewItemID == 0)
        {
            cell = Color.Red;
        }
    }

But I get the an error saying System.InvalidCastException: <Timeout exceeded getting exception details
I am not sure what to do here, it must be simpler than this, please help <3

Best Answer

Answers

Sign In or Register to comment.