Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Button clicked

Dear Tech,
I have an 3 button inside the listview named button1, Button2,button3.

Button 1 and button 3 will be visible true. Button 2 is always visible false. When i click the button1, it will become visibility false and button 2 will be visibility true .

Note: When you click the button1 and Button 2 need to pass the parameter 0 or 1 (For Hide and Show).

Best Answer

  • jezhjezh Member, Xamarin Team Xamurai
    Accepted Answer

    For this, you can define different fields for different button (Isvisible for button1 and Isvisible2 for button2 ) and implement interface INotifyPropertyChanged.And when we click one button1,we just need to change the value of Isvisible and Isvisible2, the UI will update automatically.

    You can refer to the following code:

    public class VeggieViewModel : INotifyPropertyChanged
    {
    
      // for button1
        bool _isvisible;
        public bool Isvisible
        {
            set { SetProperty(ref _isvisible, value); }
    
            get { return _isvisible; }
        }
    
      // for button2
        bool _isvisible2;
        public bool Isvisible2
        {
            set { SetProperty(ref _isvisible2, value); }
    
            get { return _isvisible2; }
        }
    
        string _name;
        public string Name
        {
            set { SetProperty(ref _name, value); }
    
            get { return _name; }
        }
    
        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;
    
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
    
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    }
    

    The View Model of my page is:

        public class TestViewModel: INotifyPropertyChanged
        {
    
            public ICommand UpdateBtnCommand { get; private set; }
    
            private ObservableCollection<VeggieViewModel> _veggies = new ObservableCollection<VeggieViewModel>();
    
            public ObservableCollection<VeggieViewModel> Veggies
            {
                get => _veggies;
                set
                {
                    _veggies = value;
                    OnPropertyChanged(nameof(Veggies));
                }
            }
    
            public TestViewModel()
            {
                Veggies = new ObservableCollection<VeggieViewModel>();
    
                Veggies.Add(new VeggieViewModel { Name = "Tomato", Type = "Fruit", Image = "tomato.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Tomato", Type = "Fruit", Image = "tomato.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
    
                UpdateBtnCommand = new Command(OnUpdateBtn);
    
            }
    
            private void OnUpdateBtn(object obj)
            {
                VeggieViewModel model = obj as VeggieViewModel;
                model.Isvisible = false;
                model.Isvisible2 = true;
            }
    
    
            #region INotifyPropertyChanged
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
    
            #endregion
        }
    

    The code of xaml is:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:viewmodels="clr-namespace:FormsListViewSample.ViewModels"
                 x:Class="FormsListViewSample.Views.MyTestPage1"
                 x:Name="MyPage"
                 >
        <ContentPage.BindingContext>
            <viewmodels:TestViewModel></viewmodels:TestViewModel>
        </ContentPage.BindingContext>
        <ContentPage.Content>
                <ListView  x:Name="lstView" RowHeight="80"  ItemsSource="{Binding Veggies}"     >
                    <ListView.ItemTemplate >
                        <DataTemplate >
                            <ViewCell >
                            <StackLayout x:Name="Item" Orientation="Horizontal" HorizontalOptions="Fill" >
                                <Label Text="{Binding Name}" WidthRequest="60"/>
                                <Button Text="button1"  IsVisible="{Binding Isvisible}" Command="{Binding BindingContext.UpdateBtnCommand, Source={x:Reference Name=MyPage}}" CommandParameter="{Binding .}" BackgroundColor="Green"/>
                                <Button Text="button2" IsVisible="{Binding Isvisible2}" BackgroundColor="Yellow" />
                                <Button Text="button3" BackgroundColor="Blue"/>
                            </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
        </ContentPage.Content>
    </ContentPage>
    

    The original UI is:

    And when I click the button1 on the first item, the result is:


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    Accepted Answer

    For this, you can define different fields for different button (Isvisible for button1 and Isvisible2 for button2 ) and implement interface INotifyPropertyChanged.And when we click one button1,we just need to change the value of Isvisible and Isvisible2, the UI will update automatically.

    You can refer to the following code:

    public class VeggieViewModel : INotifyPropertyChanged
    {
    
      // for button1
        bool _isvisible;
        public bool Isvisible
        {
            set { SetProperty(ref _isvisible, value); }
    
            get { return _isvisible; }
        }
    
      // for button2
        bool _isvisible2;
        public bool Isvisible2
        {
            set { SetProperty(ref _isvisible2, value); }
    
            get { return _isvisible2; }
        }
    
        string _name;
        public string Name
        {
            set { SetProperty(ref _name, value); }
    
            get { return _name; }
        }
    
        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;
    
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
    
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    }
    

    The View Model of my page is:

        public class TestViewModel: INotifyPropertyChanged
        {
    
            public ICommand UpdateBtnCommand { get; private set; }
    
            private ObservableCollection<VeggieViewModel> _veggies = new ObservableCollection<VeggieViewModel>();
    
            public ObservableCollection<VeggieViewModel> Veggies
            {
                get => _veggies;
                set
                {
                    _veggies = value;
                    OnPropertyChanged(nameof(Veggies));
                }
            }
    
            public TestViewModel()
            {
                Veggies = new ObservableCollection<VeggieViewModel>();
    
                Veggies.Add(new VeggieViewModel { Name = "Tomato", Type = "Fruit", Image = "tomato.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
                Veggies.Add(new VeggieViewModel { Name = "Tomato", Type = "Fruit", Image = "tomato.png", NotificationColor = "#00FF00", Isvisible = true, Isvisible2 = false });
    
                UpdateBtnCommand = new Command(OnUpdateBtn);
    
            }
    
            private void OnUpdateBtn(object obj)
            {
                VeggieViewModel model = obj as VeggieViewModel;
                model.Isvisible = false;
                model.Isvisible2 = true;
            }
    
    
            #region INotifyPropertyChanged
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
    
            #endregion
        }
    

    The code of xaml is:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:viewmodels="clr-namespace:FormsListViewSample.ViewModels"
                 x:Class="FormsListViewSample.Views.MyTestPage1"
                 x:Name="MyPage"
                 >
        <ContentPage.BindingContext>
            <viewmodels:TestViewModel></viewmodels:TestViewModel>
        </ContentPage.BindingContext>
        <ContentPage.Content>
                <ListView  x:Name="lstView" RowHeight="80"  ItemsSource="{Binding Veggies}"     >
                    <ListView.ItemTemplate >
                        <DataTemplate >
                            <ViewCell >
                            <StackLayout x:Name="Item" Orientation="Horizontal" HorizontalOptions="Fill" >
                                <Label Text="{Binding Name}" WidthRequest="60"/>
                                <Button Text="button1"  IsVisible="{Binding Isvisible}" Command="{Binding BindingContext.UpdateBtnCommand, Source={x:Reference Name=MyPage}}" CommandParameter="{Binding .}" BackgroundColor="Green"/>
                                <Button Text="button2" IsVisible="{Binding Isvisible2}" BackgroundColor="Yellow" />
                                <Button Text="button3" BackgroundColor="Blue"/>
                            </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
        </ContentPage.Content>
    </ContentPage>
    

    The original UI is:

    And when I click the button1 on the first item, the result is:


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • Vasanthakumar06Vasanthakumar06 Member ✭✭✭

    Do you have demo project of this ?

Sign In or Register to comment.