1. Home
  2. Forum
  3. .NET MAUI
  4. SFButton IsVisible Property Not Updating via MVVM - Bug Report

SFButton IsVisible Property Not Updating via MVVM - Bug Report

I have encountered a bug in the SFButton control that prevents the IsVisible property from updating when using the MVVM pattern. When attempting to change the IsVisible property through data binding and MVVM, the button's visibility remains unchanged.


To reproduce this issue, I have provided a simplified code example below:

Xaml:


                              HeightRequest="40"
                              Margin="10"
                              CornerRadius="25"
                              IsVisible = "{Binding ShowStartButton}"
                              Command="{Binding StartWorkoutCommand}">


                              VerticalOptions="Center">





ViewModel:


[ObservableProperty]    
​private bool showStartButton;


[RelayCommand(AllowConcurrentExecutions = true)]
    private async Task StartWorkout()
    {
        ShowStartButton = false;
        await Task.CompletedTask;
    }


The expected behavior is that when changing the `ShowStartButton` property in the ViewModel, the button's visibility should update accordingly. However, the bug prevents this from happening.


This bug is critical as it affects the fundamental functionality of data binding in MVVM and user interface updates. It would be greatly appreciated if this issue could be investigated and resolved promptly.


11 Replies
AJ AhamedAliNishad JahirHussain Syncfusion Team October 31, 2023 01:05 PM UTC

Hi Siyavash,


We have reviewed your query and, based on the provided information, we have created a sample. However, we were unable to reproduce the reported issue. The SfButton's IsVisible property appears to work as expected when changing the 'ShowStartButton' property in the ViewModel and the button's visibility updates accordingly.


We have attached a tested sample and video for your reference. Kindly review the attached example and make any necessary modifications to reproduce the problem. Afterward, please forward the sample to us. This will enable us to conduct a more thorough investigation of the issue.


Additionally, could you please confirm on which platforms you are encountering this issue?


Code Snippet :


Mainpage.xaml.cs

 

<StackLayout VerticalOptions="Center" HorizontalOptions="Center">

        <buttons:SfButton   HeightRequest="40"

                              Margin="10"

                              Text="SfButton"

                              CornerRadius="25"

                              IsVisible ="{Binding ShowStartButton}"

                              Command="{Binding StartWorkoutCommand}"/>

 

 

    </StackLayout>

 

ViewModel

 

public partial class ViewModel : ObservableObject

{

[ObservableProperty]

private bool showStartButton;

 

    public ViewModel()

    {

        this.ShowStartButton = true;

    }

 

    [RelayCommand(AllowConcurrentExecutions = true)]

 

private async Task StartWorkout()

{

ShowStartButton = false;

await Task.CompletedTask;

}

}

 

Regards,

Ahamed Ali Nishad.



Attachment: ButtonMaui_56c7bb8c.zip

SI Siyavash October 31, 2023 04:08 PM UTC

Hi Ahamed,


Thank you for your prompt response. After further investigation, I have realized that the issue is not with the SfButton control itself( for some reason, my xaml in the first message was cut off). To provide you with the complete XAML code, you can find it below:


```xml
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonMaui"
             xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
             x:Class="ButtonMaui.MainPage">
    <ContentPage.BindingContext>
        <local:ViewModel x:Name="VM" />
    </ContentPage.BindingContext>
    <StackLayout VerticalOptions="Center"
                 HorizontalOptions="Center">
        <buttons:SfButton HeightRequest="40"
                          Margin="10"
                          Text="SfButton"
                          CornerRadius="25"
                          IsVisible="{Binding ShowStartButton}"
                          Command="{Binding StartWorkoutCommand}">
            <buttons:SfButton.Content>
                <DataTemplate>
                    <Grid HorizontalOptions="Center"
                          VerticalOptions="Center">
                        <Image Source="play.png" />
                    </Grid>
                </DataTemplate>
            </buttons:SfButton.Content>
        </buttons:SfButton>
    </StackLayout>
</ContentPage>
```


In this complete XAML, I have included the `` element. Unfortunately, with this addition, the IsVisible binding no longer functions as expected.


Your assistance in resolving this issue would be greatly appreciated.


Best regards,

Siyavash


AJ AhamedAliNishad JahirHussain Syncfusion Team November 1, 2023 01:05 PM UTC

Hi Siyavash,


We have reviewed your query. Could you please explain why you included the ``xml and ```
elements at the beginning and end of the code snippet? Is there any specific reason for this?. Please let us know the details.


Regards,

Ahamed Ali Nishad.


SI Siyavash November 1, 2023 10:14 PM UTC

Hi Ahamed

Plz ignore those. I used to md format and thats why they are there. Please ignore them 


AJ AhamedAliNishad JahirHussain Syncfusion Team November 2, 2023 02:13 PM UTC

Hi Siyavash,

 

Thanks for your update

 

Based on your update, it seems that the issue has been resolved. If you have any further questions or inquiries, please feel free to reach out to us.

 

Regards,

Ahamed Ali Nishad


SI Siyavash November 2, 2023 05:39 PM UTC

Hi Ahamed,

No the issue hasn't been resolved.

You asked me why I added ```xml in the code snipped and I explained that part.

If you use that code without ```xml, you should be able to see that the IsVisible doesn't work.

Also if you use the same sample code you sent it to me and use  SfButton.Content You can see the issue 


AJ AhamedAliNishad JahirHussain Syncfusion Team November 3, 2023 02:19 PM UTC

Hi Siyavash,

 

Currently, we are validating the reported query and we will let you know the details on or before November 07,2023 . We appreciate your patience until then.

 

Regards,

Ahamed Ali Nishad.


AJ AhamedAliNishad JahirHussain Syncfusion Team November 7, 2023 02:26 PM UTC

Hi Siyavash,


We have reviewed your query, and we would like to inform you that if you want to change the visibility of the content within the SfButton, you need to bind the IsVisible property within the content itself. We have bound the IsVisible property to the Grid inside the content of the SfButton, as demonstrated in the code snippet below, and now the IsVisible property works as intended. Please review the attached sample and let us know the details.


Code Snippet:

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

        <buttons:SfButton x:Name="button"  HeightRequest="40"

                              Margin="10"

                              Text="SfButton"

                              CornerRadius="25"

                              IsVisible ="{Binding ShowStartButton}"

                              Command="{Binding StartWorkoutCommand}">

            <buttons:SfButton.Content>

                <DataTemplate>

                    <Grid IsVisible="{Binding ShowStartButton}" HorizontalOptions="Center"

                          VerticalOptions="Center">

                        <Image Source="alexander.png" />

                    </Grid>

                </DataTemplate>

            </buttons:SfButton.Content>

        </buttons:SfButton>

 

 

    </StackLayout>

Regards,

Ahamed Ali Nishad.


Attachment: ButtonMaui_(2)_98a627df.zip

NI Niall November 13, 2023 03:15 AM UTC

Hi -

We have experienced exactly the same bug with MVMM Databinding on IsVisible property (I have a feeling it wasn't limited to ones using custom content but it's possible).

My workaround has been to either wrap the SFButton in a Grid control /or/ I also have a custom XAML/c# User Control which wraps an instance of SFButton - and then set visibility on either of those parent elements. 

This isn't ideal however for performance and layout, and the workaround above seems very odd too - every view in MAUI platform (both platform ones and 3rd party ones) should 100% be observing the IsVisible property without special hacks.  Is there a plan to fix this one properly?

thanks
Niall





AJ AhamedAliNishad JahirHussain Syncfusion Team November 13, 2023 02:05 PM UTC

Hi Niall,

 

We have reviewed your query based on the provided information and have been able to reproduce the reported issue. We have fixed the reported issue "The property IsVisible doesn't work when setting custom content inside the SfButton in .NET MAUI.", Kindly get the fixed nuget from the attachment. If you require any further information, please do not hesitate to let us know. This fix will be included in our upcoming weekly release on November 21, 2023. We appreciate your patience until then.

 

Custom Nuget Version: 23.1.44

 

Disclaimer:

 

Please note that we have created this patch for version 23.1.44 specifically, to resolve the issue reported in this incident. If you have received other patches for the same version for other products, please apply all patches in the order received.

 

Note: Please clear the NuGet cache, before using the latest one.

 

https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache

 

Regards,

Ahamed Ali Nishad.


Attachment: Syncfusion.Maui.Buttons.23.1.44_b6148650.zip

AJ AhamedAliNishad JahirHussain Syncfusion Team November 28, 2023 02:14 PM UTC

Hi Niall,

 

Thanks for your patience.

 

We have already included the fix for the reported issue "The property IsVisible doesn't work when setting custom content inside the SfButton in .NET MAUI" in our weekly NuGet release v23.2.5 which is available for download (  https://www.nuget.org/ ). We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.

 

Regards,

Ahamed Ali Nishad.


Loader.
Up arrow icon