Flyout flickering problem

Question

I have been working in a feature, that lets the user enter in compact mode

I had an issue where the title doesn't show, I fix that, with the help of the awesome @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

I am facing some issues, where the shell takes some time, to go the right position, and the previous item still is highlighted

https://reccloud.com/u/5898fpm

Shell vm

        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() {

            Task.Delay(5000);

            if (IsCompactMode) {
                _shell!.FlyoutWidth = 65;
            } else {
                _shell!.FlyoutWidth = 300;
                InitializeFlyout();
            }

            IsMenuPopUpOen = false;

            SaveConfigurations();
        }

        private void SaveConfigurations() {
            Preferences.Set(FLYOUT_KEY, _shell!.FlyoutWidth);
            Preferences.Set(SWITCH_KEY, IsCompactMode);
        }

        private void LoadConfigurations() {
            _shell!.FlyoutWidth = Preferences.Get(FLYOUT_KEY, 320.0);
            IsCompactMode = Preferences.Get(SWITCH_KEY, false);
        }

        public void InitializeFlyout() {

            var currentSelectedItem = _shell!.CurrentItem;

            var currentShellItems = _shell!.Items.ToList();

            _shell!.Items.Clear();

            foreach (var item in currentShellItems) {

                if (item.Title == AppResource.HomePage || item.Title == AppResource.Stations
                    || item.Title == AppResource.TurbinesCollection) {

                    _shell!.Items.Add(item);
                }
            }

            _shell.CurrentItem = currentSelectedItem;
        }

    }
}

Answer 1

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.