Xamarin Forms: How to change the background color of selected item in flowlistview?

SreeeeSreeee INMember ✭✭✭✭✭

I am using flowlistview for showing items in UI. When taps on an item in the flowlistview, I need to change the background color or highlight the selected item. I tried FlowTappedBackgroundColor and FlowRowBackgroundColor properties of flowlistview. But it is not working as expected. I go through this blog, but this works only for the normal listview. How can I do this feature?

Best Answers

  • ColeXColeX Xamurai
    edited December 2 Accepted Answer

    Create binding on the Background of the control inside FlowListView.FlowColumnTemplate , change in FlowItemTappedCommand .

    Xaml

    <flv:FlowListView FlowColumnCount="3" 
                      SeparatorVisibility="None" HasUnevenRows="false"
                      FlowItemTappedCommand="{Binding ItemTappedCommand}"
                      FlowItemsSource="{Binding List}"   >
    
        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate> 
                <Label HorizontalOptions="Fill"
                       BackgroundColor="{Binding BGColor}"
                       VerticalOptions="Fill" 
                       XAlign="Center" 
                       YAlign="Center" 
                       Text="{Binding Title}"/>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>
    
    </flv:FlowListView>
    

    Code

     public class Model : INotifyPropertyChanged 
     {
        public string Title
        {
            get;set;
        }
    
    
        private Color bgColor;
        public Color BGColor
        {
            set { 
            if(value != null)
                {
                    bgColor = value;
                    NotifyPropertyChanged();
                }
            }
            get
            {
                return bgColor;
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
    }
    
    public class ViewModel
    {
        public ObservableCollection<Model> List { set; get; }
    
        public ICommand ItemTappedCommand { get; set; }
    
    
       public ViewModel()
        {
            List = new ObservableCollection<Model>();
            List.Add(new Model() { Title = "1" ,BGColor = Color.White });
            List.Add(new Model() { Title = "2" , BGColor = Color.White });
            List.Add(new Model() { Title = "3", BGColor = Color.White });
            List.Add(new Model() { Title = "4", BGColor = Color.White });
    
            ItemTappedCommand = new Command((obj)=> {
    
                //reset the bg color 
                foreach(var model in List)
                {
                    model.BGColor = Color.White;
                }
    
                Model mo = obj as Model;
                int index = List.IndexOf(mo);           
                mo.BGColor = Color.Red;
    
                List.RemoveAt(index);
                List.Insert(index, mo);
            });
        }
    } 
    
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
    
            ViewModel vm = new ViewModel();
            BindingContext = vm;
        }
    }
    

    PS : I tried to create binding on FlowLastTappedItem , however it is read only .

  • lbk3lbk3 ✭✭
    Accepted Answer

    If you're not tied down to using the FlowListView then I'd suggest Syncfusion. In their SfListView they have the SelectionBackgroundColor property, it seems to fit the description of the functionality you're looking for. You just need to install the nuget and place that single line of XAML where you need it.
    SelectionBackgroundColor="Red"

  • lbk3lbk3 ✭✭
    edited December 3 Accepted Answer

    @Sreeee Yeah, you could put a Grid in a DataTemplate and have whatever you want on each line.

    <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="100"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10"> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" /> <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage>

    This section of code would show two labels on each line of the list view (sorry about the formatting). See the documentation

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited December 2 Accepted Answer

    Create binding on the Background of the control inside FlowListView.FlowColumnTemplate , change in FlowItemTappedCommand .

    Xaml

    <flv:FlowListView FlowColumnCount="3" 
                      SeparatorVisibility="None" HasUnevenRows="false"
                      FlowItemTappedCommand="{Binding ItemTappedCommand}"
                      FlowItemsSource="{Binding List}"   >
    
        <flv:FlowListView.FlowColumnTemplate>
            <DataTemplate> 
                <Label HorizontalOptions="Fill"
                       BackgroundColor="{Binding BGColor}"
                       VerticalOptions="Fill" 
                       XAlign="Center" 
                       YAlign="Center" 
                       Text="{Binding Title}"/>
            </DataTemplate>
        </flv:FlowListView.FlowColumnTemplate>
    
    </flv:FlowListView>
    

    Code

     public class Model : INotifyPropertyChanged 
     {
        public string Title
        {
            get;set;
        }
    
    
        private Color bgColor;
        public Color BGColor
        {
            set { 
            if(value != null)
                {
                    bgColor = value;
                    NotifyPropertyChanged();
                }
            }
            get
            {
                return bgColor;
            }
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
    }
    
    public class ViewModel
    {
        public ObservableCollection<Model> List { set; get; }
    
        public ICommand ItemTappedCommand { get; set; }
    
    
       public ViewModel()
        {
            List = new ObservableCollection<Model>();
            List.Add(new Model() { Title = "1" ,BGColor = Color.White });
            List.Add(new Model() { Title = "2" , BGColor = Color.White });
            List.Add(new Model() { Title = "3", BGColor = Color.White });
            List.Add(new Model() { Title = "4", BGColor = Color.White });
    
            ItemTappedCommand = new Command((obj)=> {
    
                //reset the bg color 
                foreach(var model in List)
                {
                    model.BGColor = Color.White;
                }
    
                Model mo = obj as Model;
                int index = List.IndexOf(mo);           
                mo.BGColor = Color.Red;
    
                List.RemoveAt(index);
                List.Insert(index, mo);
            });
        }
    } 
    
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
    
            ViewModel vm = new ViewModel();
            BindingContext = vm;
        }
    }
    

    PS : I tried to create binding on FlowLastTappedItem , however it is read only .

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX I tried this, after adding all the codes, have 2 errors in the error list.

    Do you have any idea?

  • ColeXColeX Member, Xamarin Team Xamurai

    Could you create a blank project and copy my code into it to test ?

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX said:
    Could you create a blank project and copy my code into it to test ?

    Yes, I tested with a sample. Working fine, but when I integrate it into my main project, showing these errors.

  • lbk3lbk3 Member ✭✭
    Accepted Answer

    If you're not tied down to using the FlowListView then I'd suggest Syncfusion. In their SfListView they have the SelectionBackgroundColor property, it seems to fit the description of the functionality you're looking for. You just need to install the nuget and place that single line of XAML where you need it.
    SelectionBackgroundColor="Red"

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX Clean and rebuild solved the errors. thanks :)

  • SreeeeSreeee INMember ✭✭✭✭✭

    @lbk3 said:
    If you're not tied down to using the FlowListView then I'd suggest Syncfusion. In their SfListView they have the SelectionBackgroundColor property, it seems to fit the description of the functionality you're looking for. You just need to install the nuget and place that single line of XAML where you need it.
    SelectionBackgroundColor="Red"

    Thanks for the information. But is that a free one or paid one?

  • lbk3lbk3 Member ✭✭

    @Sreeee said:

    @lbk3 said:
    If you're not tied down to using the FlowListView then I'd suggest Syncfusion. In their SfListView they have the SelectionBackgroundColor property, it seems to fit the description of the functionality you're looking for. You just need to install the nuget and place that single line of XAML where you need it.
    SelectionBackgroundColor="Red"

    Thanks for the information. But is that a free one or paid one?

    They have both free and paid for account options.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @lbk3 One more question, Is SfListView can show multiple items in a row?

  • lbk3lbk3 Member ✭✭
    edited December 3 Accepted Answer

    @Sreeee Yeah, you could put a Grid in a DataTemplate and have whatever you want on each line.

    <ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <syncfusion:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="100"> <syncfusion:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="10"> <Grid.RowDefinitions> <RowDefinition Height="0.4*" /> <RowDefinition Height="0.6*" /> </Grid.RowDefinitions> <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" /> <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/> </Grid> </DataTemplate> </syncfusion:SfListView.ItemTemplate> </syncfusion:SfListView> </ContentPage>

    This section of code would show two labels on each line of the list view (sorry about the formatting). See the documentation

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Sreeee said:
    @lbk3 One more question, Is SfListView can show multiple items in a row?

    Flowlistview has a property named FlowColumnCount. Based on this value, a single row can show multiple items like a grid picture gallery. Is that possible with SfListView?

  • lbk3lbk3 Member ✭✭

    @Sreeee See my answer before where I mentioned the DataTemplate. You can place whatever elements you want in there. I'd recommend reading the documentation on it.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @lbk3 I got it, using the SpanCount property.

    <syncfusion:SfListView.LayoutManager>
                 <syncfusion:GridLayout SpanCount="2" />
         </syncfusion:SfListView.LayoutManager>
    
  • lbk3lbk3 Member ✭✭

    @Sreeee nice one! If you go with my recommendation please remember to mark it as the answer.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @lbk3 Thank you very much, one final question

    How to get an unlimited free license from Syncfusion? I go to https://www.syncfusion.com/sales/unlimitedlicense and clicks the Contact Us button under the Unlimited license for a single project. Is that the correct procedure?

  • lbk3lbk3 Member ✭✭

    @Sreeee I would say so.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @lbk3 Then how I can get a free unlimited license?

Sign In or Register to comment.