Hello,
This flickering phenomenon is due to the rendering mechanism of Shell.
Since the SelectedItem needs to be reset after re-adding the Shell, the selection animation will be played.
For problems caused by width, it is recommended that you change the width to reduce more unexpected errors.
In your project, I found that Flyout will appear after navigation. Therefore, you can set the default width of Flyout to a fixed 320 so that the renderer can render all elements correctly and reset the width after navigation. You can refer to the following code snippet.
public partial class AppShellViewModel : ObservableObject {
public const string FLYOUT_KEY = "flyouy_key";
public const string SWITCH_KEY = "switch_key";
private AppShell? _shell;
[ObservableProperty]
bool isCompactMode;
[ObservableProperty]
bool isMenuPopUpOen;
[RelayCommand]
void Appearing(AppShell appShell) {
_shell = appShell;
LoadConfigurations();
}
[RelayCommand]
void OpenMenu() {
IsMenuPopUpOen = true;
}
[RelayCommand]
void ToogleSwitch() {
if (IsCompactMode) {
_shell!.FlyoutWidth = 65;
} else {
_shell!.FlyoutWidth = 320;
}
IsMenuPopUpOen = false;
SaveConfigurations();
}
private void SaveConfigurations() {
Preferences.Set(FLYOUT_KEY, _shell!.FlyoutWidth);
Preferences.Set(SWITCH_KEY, IsCompactMode);
}
private void LoadConfigurations() {
_shell!.FlyoutWidth = 320; // set the default width to 320.
IsCompactMode = Preferences.Get(SWITCH_KEY, false);
}
}
public partial class HomePage : ContentPage {
public const string FLYOUT_KEY = "flyouy_key";
public HomePage(HomePageViewModel homePageViewModel) {
InitializeComponent();
BindingContext = homePageViewModel;
}
protected override void OnHandlerChanged()
{
base.OnHandlerChanged();
// reset the flyout width after navigation before showing it.
AppShell.Current.FlyoutWidth = Preferences.Get(FLYOUT_KEY, 320.0);
}
}
After testing, the Title can be rendered correctly when started from Windows in Compat mode.
Best Regards,
Alec Liu.
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.