MVVM with SfBadge and NavigationDrawer

[PopeGregoryIX]

I have a SfNavigationDrawer set up which is working really nicely for displaying various modules for my desktop application. When a module has "In Progress" items, I'm trying to display a SfBadge on the icon so that whether the SfNavigationDrawer is Expanded or Collapsed, the badge still shows. I have attempted to do this with the following hack:

<syncFusion:SfNavigationDrawer Grid.Row="1"
                   ItemsSource="{Binding NavigationManager}"
                   SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                   DisplayMode="{Binding NavigationDrawerDisplayMode}"
                   DisplayMemberPath="HeaderText"
                   IconMemberPath="SelfBind">
    <syncFusion:SfNavigationDrawer.ItemContainerStyle>
        <Style TargetType="syncFusion:NavigationItem">
            <Setter Property="IconTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Image Source="{Binding Icon}">
                            <syncFusion:SfBadge.Badge>
                                <syncFusion:SfBadge Shape="Ellipse" Content="{Binding AlertCount}"
                                                    />
                            </syncFusion:SfBadge.Badge>
                        </Image>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsSource" Value="{Binding NavigationChildren}" />
            <Setter Property="IconMemberPath" Value="SelfBind" /> 
            <Setter Property="DisplayMemberPath" Value="HeaderText" />
        </Style>
    </syncFusion:SfNavigationDrawer.ItemContainerStyle>
<...>

Originally "IconMemberPath" was set to "Icon" on my ViewModel but I tried the "SelfBind" hack 

(ViewModel SelfBind => this;) so that I could get access to the "AlertCount" property for the badge. I'm aware this is hacky.

The thing is, the AlertCount seems to bind to my MainWindowViewModel and not the ItemViewModel, so every badge shows the same number. How do I bind in a way that is less of a hack, but also so that I can get the badge content from the individual ViewModel of the item displayed in SfNavigationDrawer?

Thanks in advance for any help.

[Ruba Shanmugam]

Hi Adam,

Currently, we are validating the reported query and we will let you know the details on June 14, 2022. We appreciate your patience until then.

Regards,

Ruba Shanmugam

[Vijayakumar Viswanathan]

Hi Adam,

Query: How do I bind in a way that is less of a hack, but also so that I can get the badge content from the individual ViewModel of the item displayed in SfNavigationDrawer?

In SfNavigationDrawer the IconTemplate will refer to the view model binding context directly and it's not dependent on the ItemsSource collections. So we can't use this API in ItemContainerStyle to bind the collection values.

We have used the Items property to add the Header and IconTemplate in the simple sample for your reference. Please get the sample from the attachments.

Please let us know if you need any other details.

Thanks,

Vijayakumar V

Attachment: NavigationDrawerWithBadge_6d1092db.zip