How to use FindByName in CollectionView

Question

How to implement FindByName inside a CollectionView with GestureRecognizers as the call. Please correct if something is wrong.

private void ItemTapped(object sender, EventArgs e)
        {
            SelectedAmount = (int)0.0f;
            var grid = sender as Grid;
            var selectedItem = grid.BindingContext as Mapel;
            var parent = grid.Parent as CollectionView;

            ((parent.Parent) as ScrollView).ScrollToAsync(grid, ScrollToPosition.MakeVisible, true);

            foreach (var item in parent.ItemsSource)
            {
                var bg = item.FindByName<BoxView>("MainBg");
                var details = item.FindByName<StackLayout>("DetailsView");

                details.TranslateTo(-40, 0, 200, Easing.SinInOut);
                bg.IsVisible = false;
                details.IsVisible = false;
            }

            var selectionBg = grid.FindByName<BoxView>("MainBg");
            var selectionDetails = grid.FindByName<StackLayout>("DetailsView");

            selectionBg.IsVisible = true;
            selectionDetails.IsVisible = true;
            selectionDetails.TranslateTo(0, 0, 300, Easing.SinInOut);

            AnimatedText(selectedItem.KKm);
        }

and at .xaml

<Grid RowDefinitions="Auto, Auto, *" BackgroundColor="#F3F3F3" RowSpacing="20">
                <ScrollView Grid.Row="1" VerticalOptions="Start" Orientation="Horizontal" Margin="30"
                    HorizontalScrollBarVisibility="Never">
                    <CollectionView ItemsLayout="HorizontalGrid" x:Name="mapelItem" VerticalOptions="Start" HeightRequest="100">
                        <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid HorizontalOptions="StartAndExpand"  VerticalOptions="FillAndExpand">
                                <Grid.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="ItemTapped"/>
                                </Grid.GestureRecognizers>
                                    <BoxView x:Name="MainBg" CornerRadius="20" BackgroundColor="{Binding Warna}" IsVisible="False"/>
                                <Grid ColumnDefinitions="Auto, Auto" ColumnSpacing="0" Padding="10">
                                    <StackLayout x:Name="DetailsView" Grid.Column="1" VerticalOptions="Center" Padding="20,0" 
                                             TranslationX="-40" IsVisible="False">
                                        <Label Text ="{Binding Simbol}" FontSize="16" TextColor="White" FontAttributes="Bold"/>
                                        <Label Text ="{Binding KKm, StringFormat='{0:N0}'}" FontSize="14" TextColor="White"
                                           FontAttributes="Bold"/>
                                    </StackLayout>
                                    <BoxView CornerRadius="20" HeightRequest="70" WidthRequest="70" 
                                     BackgroundColor="Black" Opacity="0.7"/>
                                    <Label Text="book" HeightRequest="30" WidthRequest="30" FontFamily="FAS"
                                   HorizontalOptions="Center" VerticalOptions="Center"/>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                        </CollectionView>

            </ScrollView>
                <Grid Grid.Row="2" BackgroundColor="White" Padding="30">
                    <Label FontSize="70" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="$"/>
                                <Span Text="{Binding SelectedAmount, StringFormat='{0:N0}'}" TextColor="Black"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>
            </Grid>

could you share your xaml? there is probably a better approach without the need to FindByName lookup the tree in code. — Cfun, Feb 04 '21 at 11:57
You don't. Named elements don't work inside templated controls. Directly manipulating the UI this way is a bad idea - instead you should modify the model properties that your UI is bound to, — Jason, Feb 04 '21 at 12:11
@Jason. is this the same as switching the model to `List<>`, not to `ItemSource`? or use bindings other than `CollectionView`? — borneo, Feb 04 '21 at 12:34
@Jason. problem solved. apparently there are 2 sources of error originating. first, database that must be converted from `List<>` to `ObservableCollection<>` source [post](https://stackoverflow.com/questions/16432450/convert-a-listt-into-an-observablecollectiont) second, on `CollectionView` which is changed to `StackLayout` and use `BindableLayout.ItemsSource` @jason. Thank you for advice. — borneo, Feb 04 '21 at 15:25

score 0 · Accepted Answer · answered Feb 04 '21 at 15:27

problem solved. apparently there are 2 sources of error originating. first, database that must be converted from List<> to ObservableCollection<> source post second, on CollectionView which is changed to StackLayout and use BindableLayout.ItemsSource @jason. specialy Thank you for advice.

How to use FindByName in CollectionView

1 Answers1