Bindable Property is not working in Content View .net Maui

Question

question

tech-0084 asked May 4, '22 AmyPeng1-MSFT edited May 13, '22

Bindable Property is not working in Content View .net Maui

I have created a content view ,added Boolean property and button to it. When I click the button button I change Boolean property, Notifychanged property triggers but UI is not updating accordingly.

String property updates working fine. Bool, Observable collections not working.

Please find sample code below

xaml:

                <Label
                 Margin="0,-5,0,0"
                 Padding="10,0"
                 FontAttributes="Italic"
                 HorizontalOptions="EndAndExpand"
                 Text="{Binding IsBusy, Source={x:Reference CustomView}}" />

                  <Button IsVisible="{Binding IsBusy, Source={x:Reference CustomView}}" Text="New" />

                 <Button
                  
                 Command="{Binding ChangeBoolValue, Source={x:Reference CustomView}}"
                 HorizontalOptions="Center"
                 Text="Change" />

Xaml.cs

 public static readonly BindableProperty IsBusyProperty = BindableProperty.Create(nameof(IsBusy),
         typeof(bool), typeof(CustomViewControl),
         defaultValue: false, defaultBindingMode: BindingMode.TwoWay,
         propertyChanged: IsBusyPropertyChanged);

 private static void IsBusyPropertyChanged(BindableObject bindable, object oldValue, object newValue)
 {
     var control = (CustomViewControl)bindable;
     control.IsBusy = (bool)newValue;
 }

 public bool IsBusy
 {
     get
     {
         return (bool)GetValue(IsBusyProperty);
     }
     private set
     {
         SetValue(IsBusyProperty, value);
     }
 }

 protected async Task ChangeBoolValue()
 {
     IsBusy = true;     
  }

dotnet-maui

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-05-05T09:10:57.87Z

WenyanZhang-MSFT answered May 5, '22 AmyPeng1-MSFT edited May 13, '22

Hello,

Try to check Source={x:Reference CustomView}, please make sure CustomView is the name of your ContentView ( CustomViewControl ), refer to the following code:
CustomControl XAML

 <?xml version="1.0" encoding="utf-8" ?>
 <ContentView  ......
               x:Name="MyCustomView">// key point
    
     <StackLayout>
    
         <Label
                  Margin="0,-5,0,0"
                  Padding="10,0"
                  FontAttributes="Italic"
                  HorizontalOptions="EndAndExpand"
                  Text="{Binding IsBusy, Source={x:Reference MyCustomView}, StringFormat='The value is {0}'}" 
             />
         <Button  IsVisible="{Binding IsBusy, Source={x:Reference MyCustomView}}"  Text="New" />
         <Button
                  HorizontalOptions="Center"
             Clicked="Button_Clicked"
                  Text="Change" />
     </StackLayout>
     
 </ContentView>

Click button to change the Value of IsBusy

  private void Button_Clicked(object sender, EventArgs e)
     {
         this.IsBusy = !this.IsBusy;
     }

MainPage

 <?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"
              x:Class="CustomViewMAUIDemo.MainPage"
              xmlns:local ="clr-namespace:CustomViewMAUIDemo">
    
             <local:CustomView  IsBusy ="True" >
    
             </local:CustomView>
 </ContentPage>

Best Regards,
Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
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.

· 2

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

tech-0084 · May 07 at 07:38 AM

Hi, I have checked, still issue exsits

0 ·

WenyanZhang-MSFT tech-0084 · May 13 at 09:06 AM

I tried to reproduce your issue on my side, but I can not reproduce it after I add the x:Name in CustomViewControl.
May I ask in which platform that you are having this problem on? And you said" UI is not updating accordingly", what is the expected behavior, and how is it different from the actual behavior? You could try to examine the control in Live Visual Tree & Live Property Explorer and check if UI match the properties actually on the control. Besides, as you said it works fine on string property, but not working on Bool and Collections, I will recommend you to check if there are any errors listed in binding diagnostics: https://docs.microsoft.com/en-us/visualstudio/xaml-tools/xaml-data-binding-diagnostics?view=vs-2022. For example you may bind the property to the wrong type.
In addition, the MAUI Community Toolkit has a BoolToObject converter that can help you: https://docs.microsoft.com/en-us/dotnet/communitytoolkit/maui/converters/bool-to-object-converter

0 ·

question