.Net Maui App Bugs, Especially on ios #6236

4 Answer(s)

• 

  0

  enisn created one year ago

  Support Team .NET Developer

  Hello,

  Thanks for the feedback, we had some workarounds, they're probably not necessary anymore, I'll take a look and inform you

  Save Cancel
• 

  0

  enisn created one year ago

  Support Team .NET Developer

  We've found some problems and solved it, they'll be included in the next release but I'll share you workaround that you can apply by your own.

  Firstly Create the following Handlers to remove visual effects of inputs:

  using Microsoft.Maui.Handlers;
  using Microsoft.Maui.Platform;
  
  #if ANDROID
  using Android.Graphics.Drawables;
  using AndroidX.AppCompat.Widget;
  using Microsoft.Maui.Controls.Platform;
  using Microsoft.Maui.Controls.Compatibility.Platform.Android;
  #endif
  
  #if WINDOWS
  using Microsoft.UI.Xaml.Controls;
  using Windows.UI.Notifications;
  #endif
  
  namespace MyCompanyName.MyProjectName.Maui.Handlers;
  
  public partial class EntryVisualEffectsRemoverHandler : EntryHandler
  {
      public EntryVisualEffectsRemoverHandler()
      {
      }
  
      public EntryVisualEffectsRemoverHandler(IPropertyMapper mapper) : base(mapper)
      {
      }
  }
  
  #if ANDROID
  public partial class EntryVisualEffectsRemoverHandler : EntryHandler
  {
      protected override AppCompatEditText CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          using (var gradientDrawable = new GradientDrawable())
          {
              gradientDrawable.SetColor(global::Android.Graphics.Color.Transparent);
              nativeView.SetBackground(gradientDrawable);
              nativeView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
          }
  
          return nativeView;
      }
  }
  #endif
  
  #if IOS || MACCATALYST
  public partial class EntryVisualEffectsRemoverHandler : EntryHandler
  {
      protected override MauiTextField CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.BorderStyle = UIKit.UITextBorderStyle.None;
  
          return nativeView;
      }
  }
  #endif
  
  #if WINDOWS
  public partial class EntryVisualEffectsRemoverHandler : EntryHandler
  {
      protected override TextBox CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
          nativeView.Style = null;
          return nativeView;
      }
  }
  #endif
  

  using Microsoft.Maui.Handlers;
  using Microsoft.Maui.Platform;
  
  #if WINDOWS
  using Microsoft.UI.Xaml.Controls;
  #endif
  
  #if ANDROID
  using Android.Graphics.Drawables;
  using Microsoft.Maui.Controls.Platform;
  using Microsoft.Maui.Controls.Compatibility.Platform.Android;
  #endif
  
  #if IOS || MACCATALYST
  using UIKit;
  #endif
  
  namespace MyCompanyName.MyProjectName.Maui.Handlers;
  public partial class PickerVisualEffectsRemoverHandler : PickerHandler
  {
      public PickerVisualEffectsRemoverHandler()
      {
      }
  
      public PickerVisualEffectsRemoverHandler(IPropertyMapper mapper) : base(mapper)
      {
      }
  }
  
  #if ANDROID
  public partial class PickerVisualEffectsRemoverHandler : PickerHandler
  {
      protected override MauiPicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          using (var gradientDrawable = new GradientDrawable())
          {
              gradientDrawable.SetColor(global::Android.Graphics.Color.Transparent);
              nativeView.SetBackground(gradientDrawable);
              nativeView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
          }
  
          return nativeView;
      }
  }
  #endif
  
  #if IOS || MACCATALYST
  public partial class PickerVisualEffectsRemoverHandler : PickerHandler
  {
      protected override MauiPicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.BorderStyle = UITextBorderStyle.None;
  
          return nativeView;
      }
  }
  #endif
  
  #if WINDOWS
  public partial class PickerVisualEffectsRemoverHandler : PickerHandler
  {
      protected override ComboBox CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
  
          return nativeView;
      }
  }
  #endif
  

  using Microsoft.Maui.Handlers;
  using Microsoft.Maui.Platform;
  
  #if ANDROID
  using Android.App;
  using Android.Graphics.Drawables;
  using Microsoft.Maui.Controls.Platform;
  using Microsoft.Maui.Controls.Compatibility.Platform.Android;
  #endif
  #if IOS || MACCATALYST
  using UIKit;
  #endif
  #if WINDOWS
  using Microsoft.UI.Xaml.Controls;
  #endif
  
  namespace MyCompanyName.MyProjectName.Maui.Handlers;
  public partial class DatePickerVisualEffectsRemoverHandler : DatePickerHandler
  {
      public DatePickerVisualEffectsRemoverHandler()
      {
      }
  
      public DatePickerVisualEffectsRemoverHandler(IPropertyMapper mapper) : base(mapper)
      {
      }
  }
  
  #if ANDROID
  public partial class DatePickerVisualEffectsRemoverHandler : DatePickerHandler
  {
      protected override MauiDatePicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          using (var gradientDrawable = new GradientDrawable())
          {
              gradientDrawable.SetColor(global::Android.Graphics.Color.Transparent);
              nativeView.SetBackground(gradientDrawable);
              nativeView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
          }
  
          return nativeView;
      }
  }
  #endif
  
  #if IOS
  public partial class DatePickerVisualEffectsRemoverHandler : DatePickerHandler
  {
      protected override MauiDatePicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.BorderStyle = UITextBorderStyle.None;
  
          return nativeView;
      }
  
  }
  #endif
  
  #if MACCATALYST
  public partial class DatePickerVisualEffectsRemoverHandler : DatePickerHandler
  {
      protected override UIDatePicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
  
          nativeView.Alpha = 0f;
  
          return nativeView;
      }
  }
  #endif
  
  #if WINDOWS
  public partial class DatePickerVisualEffectsRemoverHandler : DatePickerHandler
  {
      protected override CalendarDatePicker CreatePlatformView()
      {
          var nativeView = base.CreatePlatformView();
          nativeView.BorderThickness = new Microsoft.UI.Xaml.Thickness(0);
          return nativeView;
      }
  }
  #endif
  

  • And Configure them in MauiProgram.cs

  builder.ConfigureMauiHandlers(handlers =>
  {
      handlers.AddHandler(typeof(Entry), typeof(EntryVisualEffectsRemoverHandler));
      handlers.AddHandler(typeof(Picker), typeof(PickerVisualEffectsRemoverHandler));
      handlers.AddHandler(typeof(DatePicker), typeof(DatePickerVisualEffectsRemoverHandler));
  });
  
  

  • It seems SearchBar is shown as Black always by MAUI, so you can you Entry instead Searchbar in your project.

  • Update Radio Button in the Profile Page like the following:

  <RadioButton Value="{x:Static account:ProfilePictureType.None}">
      <RadioButton.Content>
          <Label Text="{ext:Translate UseDefault}" VerticalOptions="Center" />
      </RadioButton.Content>
  </RadioButton>
  
  <RadioButton Value="{x:Static account:ProfilePictureType.Gravatar}">
      <RadioButton.Content>
          <Label Text="{ext:Translate UseGravatar}" VerticalOptions="Center" />
      </RadioButton.Content>
  </RadioButton>
  
  <RadioButton Value="{x:Static account:ProfilePictureType.Image}">
      <RadioButton.Content>
          <Label Text="{ext:Translate SelectNewImage}" VerticalOptions="Center" />
      </RadioButton.Content>
  </RadioButton>
  

  • Fix the EmptyView by updating like following

  <CollectionView.EmptyView>
      <Image Source="empty.png"
          MaximumWidthRequest="120"
          MaximumHeightRequest="120"
          VerticalOptions="Center"
          HorizontalOptions="Center"
          Opacity=".5"/>
  </CollectionView.EmptyView>
  

  Save Cancel
• 

  0

  cangunaydin created one year ago

  Hello thanks for the feedback, I have also started to fix the things one by one.

  • problem with empty image on ios comes from refreshview. there was an open issue for it. https://github.com/dotnet/maui/issues/7315 i think they fix that with .net 8. to overcome the problem you can wrap the collectionview with grid sth like this. then you don't need to change the width request. everything works fine.
  • for the borders on entry i think your code is removing all the borders, however i like the android style with border bottom. IOS doesn't support that though as i understand. Maybe i need to remove the frames i am not so sure about it. I will find sth for it.
  • I couldn't find the radiobutton fix while i was trying different variations, so i was planning to switch to another component so it is nice that you share it with me i can use it.

  I have also upgraded my app to .net 8 yesterday, some things have been fixed however still some problems persist and some new problems arrived.

  • If you use flyoutheader inside shell, first item is no more clickable. here is the open issue in .net maui. https://github.com/dotnet/maui/issues/17432 as a fix you can add this code that is mentioned inside the issue. https://github.com/dotnet/maui/issues/17965#issuecomment-1763354239
  • Another problem i am having is now with .net 8 on dark mode entry texts are black on first load for ex if you edit a user. It doesn't get the styles on the first load.However when you delete the text and write a new one it is white color again. i have found another open issue for this kind of behavior but it is discarded because they couldn't reproduce the problem. I don't know if you have the same problem on .net 8. https://github.com/dotnet/maui/issues/17843

  I will write over here if i can fix those things that i mention

  Also worth to mention, I tried this .net 7, on list pages, maybe it has been fixed on .net 8 i didn't try

  <RefreshView Grid.Row="1" IsRefreshing="{Binding IsBusy}" Command="{Binding RefreshCommand}">

  this code makes the RefreshCommand triggers on the page load. since page appearing is also triggering the same code you call the endpoint twice. There was a discussion about it also in .net maui github issues. To overcome the situation, what i did was to bind RefreshCommand.IsRunning property instead of IsBusy. The reason behind this issue is when you call RefreshCommand it also sets the IsBusy property to true then it triggers the RefreshCommand again. new code is sth similar like this in my case.

  <RefreshView Grid.Row="1" IsRefreshing="{Binding RefreshCommand.IsRunning}" Command="{Binding RefreshCommand}">

  Save Cancel
• 

  0

  cangunaydin created one year ago

  Hello again, new updates from me. Now i fixed everything that i wanted. It was little struggle though. I will write here what I have done.

  • As you mentioned on the previous post. you have added remove borders classes from all platforms for entry,picker and datepicker. On the top of that (cause what i want is to have a bottom border) i have added some styles to Styles.xaml.

  <Style TargetType="BoxView" x:Key="InputSeparator"> <Setter Property="Margin" Value="{OnPlatform Android='0,0,0,0',iOS='0,10,0,0',MacCatalyst='0,10,0,0'}"></Setter> <Setter Property="HeightRequest" Value="1"> </Setter> <Setter Property="HorizontalOptions" Value="Fill"></Setter> </Style>

  <Style TargetType="Label" x:Key="InputLabel">
     <Setter Property="Margin" Value="{OnPlatform iOS='0,0,0,5',MacCatalyst='0,0,0,5'}"></Setter>
  </Style>
  

  Then i have added those styles to label and entries for form elements. As an example:

  as a result i got some border at the end for both android and ios.

  • Second issue was with checkbox on ios. there was no margin, so i added this style on the checkbox.
  • Third issue as i have mentioned before it was getting black textcolor when the edit page is requested on dark theme. This was an issue related with async void. For ex: on TenantEditModal, this was the method that has been called when edit has been clicked.

  async partial void OnIdChanged(string? value)
  

  This was causing threading problems i guess. So probably changing color was not invoked. so what i did instead is use AsyncHelper and leave the method as sync. Here is the code.

  partial void OnIdChanged(string? value)
      {
          IsBusy = true;
          AsyncHelper.RunSync(GetTenant);
          AsyncHelper.RunSync(GetEditions);
          IsBusy = false;
      }
  

  i have seen some people are using async void but according to me it is not the best practice.From my experience, it always bring some problems with it. The same problem exists on WeakReferenceMessenger. I have changed the code over there also. So i have been able to get the user interface that i wanted. here is how it looks at the end. Thanks for the code that has been provided by the way, it helped me a lot. On the other hand what i think is, on the long run adding RemovingHandlers to the project can be problematic in some cases. But for now it is good to go.

  Save Cancel