Button IsVisible not working with BindingContext -XAML

Question

I've this issue where I have a button inside a CollectionView with a IsVisible property binding with my ViewModel and inside the Button there is also BindingContext and CommandParameter proprieties. The problem is that when I have BindingContext and CommandParameter the IsVisible propriety doesn't work.

XAML

                <CollectionView
                        x:Name="collectionFriend"
                        ItemsSource="{Binding ListPerson}"
                        VerticalScrollBarVisibility="Never">
                        <CollectionView.ItemsLayout>
                            <LinearItemsLayout ItemSpacing="5" Orientation="Vertical" />
                        </CollectionView.ItemsLayout>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid x:Name="GridPerson"
                                      Padding="5"
                                      BackgroundColor="White"
                                      ColumnDefinitions="Auto,Auto,*"
                                      RowDefinitions="*,Auto,Auto,Auto,Auto"
                                      RowSpacing="5">                                     
                                   
                                    <Label
                                        Grid.Column="1"
                                        FontAttributes="Bold"
                                        FontSize="15"
                                        FontFamily="MontSemiBold"
                                        Text="{Binding Name}"
                                        TextColor="Black"
                                        VerticalTextAlignment="Center" />
                                    <Button
                                        CornerRadius="4"
                                        Grid.Row="2"
                                        Grid.Column="1"
                                        BackgroundColor="#5bd9d9"
                                        FontSize="15"
                                        WidthRequest="140"
                                        HeightRequest="40"
                                        IsVisible="{Binding Map}"
                                        FontFamily="MontBold"
                                        Text="{helpers:Translate ViewMap}"
                                        BindingContext="{Binding Source={x:Reference collectionFriend}, Path=BindingContext}"
                                        Command="{Binding MapCommand}"
                                        CommandParameter="{Binding Source={x:Reference GridPerson}, Path=BindingContext}"
                                        TextColor="White"
                                        Padding="0">
                                       
                                    </Button>
                                    <Button
                                        x:Name="PhotosPerson"
                                        Grid.Row="3"
                                        Grid.Column="1"
                                        BackgroundColor="#3299d9"
                                        FontSize="15"
                                        WidthRequest="140"
                                        HeightRequest="40"
                                        CornerRadius="4"
                                        IsVisible="{Binding Photos}"
                                        FontFamily="MontBold"
                                        Text="{helpers:Translate Photos}"
                                        BindingContext="{Binding Source={x:Reference collectionFriend}, Path=BindingContext}"
                                        Command="{Binding PhotosCommand}"
                                        CommandParameter="{Binding Source={x:Reference GridPerson}, Path=BindingContext}"
                                        TextColor="White"
                                        Padding="0">
                                    </Button>                                     
                                    <Line Grid.Row="4"  Grid.ColumnSpan="3" BackgroundColor="#5a5a5a" HeightRequest="1" />
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

ViewModel

List<People> lista = new List<People>();
var result = await _tripRestService.GetPeople(UserTokenDbService.GetToken());
foreach (var item in result)
{ 
    
    var person = new People()
            {
                Name = item.Name,
                Photos = item.Photos,
                Map = item.Map,
                UriImage = image,
                Id = item.Id
            };
    lista.Add(person);
    ListPerson = new ObservableCollection<People>(lista.OrderBy(p => p.Name));
}

`Photos` appears to be a property on `People`, not on your overall VM. — Jason, May 17 '21 at 14:20
That is correct. the button should appear only if there is a `photo` to that `People`. If I remove the `BindingContext` and `CommandParameter` proprieties it works fine. — Mario Segalla, May 17 '21 at 14:22
but you are assigning the BindingContext of that button to the base VM, not the People class. If you use relative bindings instead of reassigning the BindingContext on each control you would not have this problem — Jason, May 17 '21 at 14:24
https://stackoverflow.com/questions/7000819/binding-a-buttons-visibility-to-a-bool-value-in-viewmodel — Zam, May 17 '21 at 14:40

score 0 · Accepted Answer · answered May 18 '21 at 01:48

From your description, you want to binding List People data into CollectionView, and binding ICommand into Button, pass current collectionview row for Button CommandParameter I thing you don't need to assign BindingContext for Button, you need to use Xamarin.Forms Relative Bindings.

<CollectionView
            x:Name="collectionFriend"
            ItemsSource="{Binding ListPerson}"
            VerticalScrollBarVisibility="Never">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout ItemSpacing="5" Orientation="Vertical" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid
                        x:Name="GridPerson"
                        Padding="5"
                        BackgroundColor="White"
                        ColumnDefinitions="Auto,Auto,*"
                        RowDefinitions="*,Auto,Auto,Auto,Auto"
                        RowSpacing="5">

                        <Label
                            Grid.Column="1"
                            FontAttributes="Bold"
                            FontFamily="MontSemiBold"
                            FontSize="15"
                            Text="{Binding Name}"
                            TextColor="Black"
                            VerticalTextAlignment="Center" />
                        <Button
                            Grid.Row="2"
                            Grid.Column="1"
                            Padding="0"
                            BackgroundColor="#5bd9d9"
                            Command="{Binding BindingContext.MapCommand, Source={x:Reference collectionFriend}}"
                            CommandParameter="{Binding .}"
                            CornerRadius="4"
                            FontFamily="MontBold"
                            FontSize="15"
                            HeightRequest="40"
                            IsVisible="{Binding Map}"
                            Text="map"
                            TextColor="White"
                            WidthRequest="140" />
                        <Button
                            Grid.Row="3"
                            Grid.Column="1"
                            Padding="0"
                            BackgroundColor="#3299d9"
                            Command="{Binding BindingContext.PhotosCommand, Source={x:Reference collectionFriend}}"
                            CommandParameter="{Binding .}"
                            CornerRadius="4"
                            FontFamily="MontBold"
                            FontSize="15"
                            HeightRequest="40"
                            IsVisible="{Binding Photos}"
                            Text="photo"
                            TextColor="White"
                            WidthRequest="140" />
                        <Line
                            Grid.Row="4"
                            Grid.ColumnSpan="3"
                            BackgroundColor="#5a5a5a"
                            HeightRequest="1" />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

This is ViewModel, I use some simple data to test.

 public partial class Page14 : ContentPage
{
    public ObservableCollection<People> ListPerson { get; set; }
    public ICommand MapCommand { get; set; }
    public ICommand PhotosCommand { get; set; }
    public Page14()
    {
        InitializeComponent();
        ListPerson = new ObservableCollection<People>()
        {
            new People(){Id=1,Name="image 1",Photos=true,Map=false },
            new People(){Id=2,Name="image 2",Photos=false,Map=true },
            new People(){Id=3,Name="image 3",Photos=true,Map=false },
            new People(){Id=4,Name="image 4",Photos=false,Map=true },
            new People(){Id=5,Name="image 5",Photos=true,Map=false },
            new People(){Id=6,Name="image 6",Photos=false,Map=true },
        };

        MapCommand = new Command(p=> {
            People person = (People)p;
            Application.Current.MainPage.DisplayAlert("Alert", person.Name, "OK");

        });
        PhotosCommand = new Command(p=> {
            People person = (People)p;
            Application.Current.MainPage.DisplayAlert("Alert", person.Name, "OK");
        });
        this.BindingContext = this;
    }
}
public class People
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool Photos { get; set; }
    public bool Map { get; set; }
    public string UriImage { get; set; }

}

Button IsVisible not working with BindingContext -XAML

1 Answers1