Using VisualStateManager with ItemTemplateSelector

Question

For my CollectionViews I often use ItemTemplateSelectors with ItemTemplates that are in different and separate XAML-Files as the actual Page with the CollectionView. But then I can not use the VisualStateManager because the "Selected"-State is not set. If I move my Templates inside my actual Page then it works. I tried already different approaches where to put my style but is has not worked out yet. I that even possible ? I hope I did myself clear !?

Answer

Hello,

Welcome to our Microsoft Q&A platform!

I make a test with Entry in the DataTemplate of CollectionView, And I don't set "Selected"-State, I set Normal, Focused and Disabled states. It worked as normal, here is running GIF.

Here is my layout, I put the VisualStateManager in the Style.

I tried to put the VisualStateManager in the Entry of DataTemplate directly like following code, it works normally.

Here is my layout's background code.

   public partial class HomePage : ContentPage  
       {  
           public HomePage()  
           {  
               InitializeComponent();  
     
               var people = new List  
               {  
                   new Person { Name = "Kath", DateOfBirth = new DateTime(1985, 11, 20), Location = 1  , CouldType=true},  
                   new Person { Name = "Steve", DateOfBirth = new DateTime(1975, 1, 15), Location = 0 , CouldType=false},  
                   new Person { Name = "Lucas", DateOfBirth = new DateTime(1988, 2, 5), Location = 1 , CouldType=true},  
                   new Person { Name = "John", DateOfBirth = new DateTime(1976, 2, 20), Location = 0 , CouldType=false},  
                   new Person { Name = "Tariq", DateOfBirth = new DateTime(1987, 1, 10), Location = 1, CouldType=true },  
                   new Person { Name = "Jane", DateOfBirth = new DateTime(1982, 8, 30), Location = 1 , CouldType=false},  
                   new Person { Name = "Tom", DateOfBirth = new DateTime(1977, 3, 10), Location = 1 , CouldType=true}  
               };  
     
               MyCollectionView.ItemsSource = people;  
           }  
       }

Here is my DataTemplateSelector called PersonDataTemplateSelector.cs.

   public class PersonDataTemplateSelector : DataTemplateSelector  
   {  
   public DataTemplate ValidTemplate { get; set; }  
     
   public DataTemplate InvalidTemplate { get; set; }  
     
   protected override DataTemplate OnSelectTemplate (object item, BindableObject container)  
   {  
   return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;  
   }  
   }

Here is valueConvert called MyValueConvert.cs.

   public class MyValueConvert : IValueConverter  
       {  
           public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
           {  
               return (int)value != 0;  
           }  
     
           public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
           {  
               return (bool)value ? 1 : 0;  
           }  
       }

Here is my Person.cs

   public class Person  
       {  
           public string Name { get; set; }  
           public DateTime DateOfBirth { get; set; }  
           public int Location { get; set; }  
     
           public bool CouldType { get; set; }  
       }

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Using VisualStateManager with ItemTemplateSelector

1 answer