Change Style name for some view inside ViewCell upon Listview TappedItem, Xamarin Forms

Question

I've Xamarin Forms app and I have Listview which looks like this :

<ListView x:Name="CalendarList" VerticalOptions="FillAndExpand" VerticalScrollBarVisibility="Never" RowHeight="100"
               Grid.Row="0" SeparatorVisibility="None" ItemTapped="CalendarList_OnItemSelected" BackgroundColor="Transparent" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <local:MyCell>
                            <pcv:PancakeView **x:Name="YearsContainer"** Margin = "0,10,0,10" Style="{StaticResource cell_years}"  IsClippedToBounds="true" >
                                        <StackLayout HorizontalOptions = "StartAndExpand"  Orientation="Horizontal">
                                            <Label Style = "{DynamicResource bold_label}" Text="{Binding Year}" VerticalOptions="Center" />
                                        </StackLayout>

                            </pcv:PancakeView>
                        </local:MyCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>


private async void CalendarList_OnItemSelected(object sender, EventArgs e)
{
    await Task.Delay(350);
    var selectedItem = ((ListView)sender).SelectedItem;
    var item = ((YearsList)selectedItem);
    ((ListView)sender).SelectedItem = null;

    vm.ViewDetailCommand.Execute(item); // goto details page
}

public class MyCell: ViewCell
    {
        protected async override void OnTapped()
        {
            base.OnTapped();
            await Task.Run(async () => await AnimationHelper.AnimateClick(this.View));
        }
    }

//IOS Renderer
    [assembly: ExportRenderer(typeof(MyCell), typeof(MyCellRenderer))]
    namespace CountDown.iOS.Renderers
    {
        public class MyCellRenderer : ViewCellRenderer
        {
            public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
            {
                var cell = base.GetCell(item, reusableCell, tv);
                if (cell != null)
                {
                    cell.SelectionStyle = UITableViewCellSelectionStyle.None;
                }
                return cell;
            }
        }
    }

Now the question is :

Is it possible to change the style for PCV: PancakeView to different style names once a cell is selected?

I'm using Xamarin Forms ver 4.3.0 btw.

I've been able to change the color of the whole cell but I am not sure how to change the style.

Answer 1

According to your description, I guess that you want to change PancakeView style in ListView ItemTapped event?

If yes, I do one sample that you can take a look. I use Label control instead of PancakeView, it is the same.

 <ContentPage.Resources>
    <Style x:Key="LabelStyle" TargetType="Label">
        <Setter Property="TextColor" Value="Color.Black" />
        <Setter Property="FontAttributes" Value="None" />
    </Style>
    <Style x:Key="LabelChangedStyle" TargetType="Label">
        <Setter Property="TextColor" Value="Color.Red" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>

</ContentPage.Resources>
<ContentPage.Content>
    <StackLayout>
        <ListView ItemTapped="ListView_ItemTapped" ItemsSource="{Binding model3s}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Style="{Binding LabelStyle}" Text="{Binding str}">
                                <Label.Triggers>
                                    <DataTrigger
                                        Binding="{Binding istap}"
                                        TargetType="Label"
                                        Value="true">
                                        <Setter Property="Style" Value="{StaticResource LabelChangedStyle}" />
                                    </DataTrigger>
                                </Label.Triggers>

                            </Label>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

public partial class Page12 : ContentPage
{
    public ObservableCollection<model3> model3s { get; set; }
    public  model3 model;
    public Page12 ()
    {
        InitializeComponent ();
        model3s = new ObservableCollection<model3>()
        {
            new model3(){str="this is test!",istap=false },
            new model3(){str="this is test!",istap=false},
            new model3(){str="this is test!",istap=false},
            new model3(){str="this is test!",istap=false},
            new model3(){str="this is test!",istap=false}
        };

        this.BindingContext = this;
    }

    private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        if(model!=null)
        {
            model.istap = false;
        }
        model3 m = e.Item as model3;           
        m.istap = true;
        model = m;
    }
}

public class model3:ViewModelBase
{
    public string str { get; set; }
    private bool _istap;
    public bool istap
    {
        get { return _istap; }
        set
        {
            _istap = value;
            RaisePropertyChanged("istap");
        }
    }

}

The ViewModelBase is the class that implement INotifyPropertyChanged

 public class ViewModelBase : INotifyPropertyChanged
{
      
    public event PropertyChangedEventHandler PropertyChanged;

    
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

When you tap one item in ListView, the style will change.