Command Binding to Navigation Item generated dynamically through MVVM

[Amit Saraf]

Dear Sir,

Here is my code

XAML Code

    <UserControl.DataContext>
        <gAcData:MenuList/>
    </UserControl.DataContext>

    <UserControl.Resources>
        <Style x:Key="ItemStyle" TargetType="sync:NavigationItem">
            <Setter Property="DisplayMemberPath" Value="Title"/>
            <Setter Property="ItemsSource" Value="{Binding SubItems}"/>
        </Style>
    </UserControl.Resources>

    <sync:SfNavigationDrawer x:Name="Drawer" DrawerWidth="250"
                             DisplayMode="Expanded"
                             DisplayMemberPath="Title" ItemContainerStyle="{StaticResource ItemStyle}"
                             ItemsSource="{Binding Items, Mode=TwoWay}"
                             SelectedItem="{Binding SelItem, Mode=TwoWay}">
        <sync:SfNavigationDrawer.ContentView>
            <Grid/>
        </sync:SfNavigationDrawer.ContentView>
    </sync:SfNavigationDrawer>

Model

    public partial class MItem : ObservableObject
    {
        public MItem() { }

        public enum ItemType
        {
            None = 0,
            Entry,
            Report,
            Admin
        };

        [ObservableProperty] string icon;
        [ObservableProperty] string ctlName;
        [ObservableProperty] string title;
        [ObservableProperty] ItemType type = ItemType.None;
        [ObservableProperty] gAcVar.Entry eType;
        [ObservableProperty] gAcVar.RptType rType;
        [ObservableProperty] gAcVar.MOptions mOption;

        [ObservableProperty] List<MItem> subItems;

        public MItem(gAcVar.Entry VType, gAcVar.UserType MinUserLevel = gAcVar.UserType.Supervisor)
        {
            if ((int)gAcBase.UType > (int)MinUserLevel) return;

            EType = VType;
            Type = ItemType.Entry;
            Title = gAcVar.EntryString[(int)VType];
            CtlName = $"EType_{(int)EType}";
        }

        public MItem(gAcVar.RptType RptType, gAcVar.UserType MinUserLevel = gAcVar.UserType.Supervisor)
        {
            if ((int)gAcBase.UType > (int)MinUserLevel) return;

            RType = RptType;
            Type = ItemType.Report;
            Title = gAcVar.RptTypeString[(int)RType];
            CtlName = $"RType_{(int)RType}";
        }

        public MItem(gAcVar.MOptions Option, gAcVar.UserType MinUserLevel = gAcVar.UserType.Supervisor)
        {
            if ((int)gAcBase.UType > (int)MinUserLevel) return;

            MOption = Option;
            Type = ItemType.Admin;
            Title = gAcVar.MOptionsString[(int)Option];
            CtlName = $"MOption_{(int)Option}";
        }

        public MItem(string Name, List<MItem> SubItem)
        {
            Type = ItemType.None;
            Title = Name;
            SubItems = SubItem;
        }
    }

View Model

    public partial class MenuList : ObservableObject
    {
        public delegate void MenuEventHandler(MItem SelectedItem);
        public event MenuEventHandler MenuItemSelected;

        [ObservableProperty] List<MItem> items = [];
        [ObservableProperty] MItem selItem;

        public MenuList()
        {
            InitializeData();
        }

        public void InitializeData()
        {
            List<MItem> TItem = null;
            List<MItem> SubItems = null;

            SubItems = [];

            //General Ledger
            TItem = [
                new MItem(gAcVar.Entry.GL),                     //Title : General Ledger
                new MItem(gAcVar.Entry.Br),                     //Title : Broker
                new MItem(gAcVar.Entry.LG)];                    //Title : Ledger Group
            if (TItem.Count > 0) SubItems.Add(new MItem("General Ledger", TItem));

            //Product Ledger
            TItem = [
                new MItem(gAcVar.Entry.Product),                //Title : Product
                new MItem(gAcVar.Entry.PG),                     //Title : Product Group
                new MItem(gAcVar.Entry.PSG)];                   //Title : Product Sub Group
            if (TItem.Count > 0) SubItems.Add(new MItem("Product Details", TItem));

            //Other Masters
            TItem = [
                new MItem(gAcVar.Entry.BT),                     //Title : Billing Term
                new MItem(gAcVar.Entry.Godown),                 //Title : Godown
                new MItem(gAcVar.Entry.PV_Claim)];              //Title : PV Claim
            if (TItem.Count > 0) SubItems.Add(new MItem("Other Details", TItem));

            if (SubItems.Count > 0) Items.Add(new MItem("Masters", SubItems));
        }

        [RelayCommand]
        public void OpenMaster()
        {
            if(SelItem == null) return;
            if(SelItem.Type == MItem.ItemType.None) return;
            MenuItemSelected?.Invoke(SelItem);
        }

    }

Here I want to execute OpenMaster Command when user selects Navigation Item

Thanks in Advance

Amit Saraf

[Vallarasu Ravichandran]

Hi Amit Saraf,

Thank you for reaching out
As per your requirement, we understand that you want to execute the OpenMaster command when a user selects a navigation item.

 

We have prepared a sample and shared it for your reference. In this sample, the SelectedItem property is bound to the ViewModel, and the OpenMaster command is triggered automatically when the selection changes.

 

If we’ve misunderstood any part of your setup, please feel free to share more details, and we’ll be happy to adjust the solution accordingly.

 

Regards,
Vallarasu R.

Attachment: SfNavigationDrawer_4841eabe.zip

[Amit Saraf]

Thanks for your reply.

Based on your reply I changed my code a little bit and removed Command since command was not doing anything

instead I executed OpenMaster routing on SelItem and got desired result.

        MItem _selItem;
        public MItem SelItem
        {
            get { return _selItem; }
            set
            {
                SetProperty(ref _selItem, value);


                if (_selItem == null) return;
                if (_selItem.Type == MItem.ItemType.None) return;
                MenuItemSelected?.Invoke(_selItem);
            }
        }

Thanks for you help

One more issue if you may help

I want to make NavigationDrawer Compact and it should close only when Item Selected is last Item i.e. It is not having any sub items.

Currently it closes even I click on root item and re sets its view.

Can you help here also

Amit

[Vallarasu Ravichandran]

Hi Amit Saraf,

Thanks for reaching out!

To better assist you with making the NavigationDrawer compact and ensuring it only closes when the selected item is the last item (i.e., without sub-items), we’d like to understand your current implementation in more detail.

Could you please share the complete sample of your current NavigationDrawer setup, including how items and sub-items are structured?

Once we have this information, we’ll be able to provide a more tailored solution or code snippet to meet your requirements.

Looking forward to your response!

Best regards,

Vallarasu R.

[Amit Saraf]

Thanks for your reply.

I'm re-writing my original wpf application with changes so that mobile application can be written in MAUI.

Here I'm trying to implement Menu in Navigation Drawer.

attached screenshot of original wpf application image for you reference.

Hope I made myself clear.

Thanks a lot.

Amit Saraf

[Vallarasu Ravichandran]

Hi Amit Saraf,

 

Thank you for sharing the screenshot. To better understand your requirement and provide an accurate solution, could you please share a sample of your existing WPF implementation?

The image alone does not give us enough details about the structure and logic behind your menu and navigation drawer. Having the sample will help us check all possibilities.

Looking forward to your sample and requirement for further assistance.

 

Regards,
Vallarasu R.

[Amit Saraf]

Thanks for your reply,

Sorry for relying late.

for better understanding of my requirement, I've prepared a small sample.

Thanks a lot

Amit Saraf

Attachment: MenuTrail_31681759.zip

[Vallarasu Ravichandran]

Hi Amit Saraf,

Currently, there is no built-in support in the NavigationDrawer to identify whether the selected item is the last item (without sub-items) and ensure that the drawer closes only in that case. By default, the NavigationDrawer will close when any item is selected.

 

We appreciate your understanding and patience.

Regards,
Vallarasu R.

[Amit Saraf]

Thanks for your reply.

Can you consider this as feature request for future release.

[Vallarasu Ravichandran]

Hi Amit Saraf,

We have created a feature request based on your enquiry and added it to our request list. You can track its status or progress using the following link:

 

Feedback: Provide Support in NavigationDrawer to Conditionally Close the Drawer on Item Selection in WPF | Feedback Portal

 

We plan to implement it in one of our upcoming releases, and we will notify you as soon as this feature is available. We appreciate your patience and understanding.

 

We encourage you to cast your vote for this feature, and if you have any additional suggestions or requirements, feel free to add them as a comment on the feedback portal.

Thank you for your understanding.

 

Regards,
Vallarasu R.

[Amit Saraf]

Thanks a lot for your help

Amit Saraf