SfNavigationDrawer setting color of icons in the View

[Geoffrey]

Hi, 

I have a navigation drawer with binded data like that :

https://pastebin.com/EbVnzEwK (view)

https://pastebin.com/Gwdgpp0Z (items in the view models)

My Items shows but I'd like to use my resource style, the NavigationItemPathStyle, from the view directly on the NavigationItems especially on the icon.

How do I manage to do that ?

Thank you for your help.

[Suganya Sethuraman]

Hi Geoffrey,

Greetings from Syncfusion.

We have analyzed your requirement. We have achieved your requirement by using the following code snippet,

Code snippet 

Binding pathFillBinding = new Binding(); 

        public ViewModel() 

        { 

            pathFillBinding.Path = new PropertyPath(TextBlock.ForegroundProperty); 

            pathFillBinding.RelativeSource = new RelativeSource { Mode = RelativeSourceMode.Self }; 

            pathFillBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 

 

            Path category1 = new Path(); 

            category1.Data = Geometry.Parse("M6,1.1510006 L6,2.1810011 C3.1380004,2.8610015 0.99999996,5.4320006 1.0000001,8.500001 0.99999996,12.084001 3.9160003,15.000001 7.5,15.000001 11.084,15.000001 14,12.084001 14,8.500001 14,5.4320006 11.861999,2.8610015 9,2.1810011 L9,1.1510006 C12.419006,1.8470016 15,4.8780017 15,8.500001 15,12.634999 11.636002,16.000001 7.5,16.000001 3.3639984,16.000001 -4.4703526E-08,12.634999 0,8.500001 -4.4703526E-08,4.8780017 2.5809936,1.8470016 6,1.1510006 z M7,0 L8,0 8,1.0249994 8,2.0249997 8,5 7,5 7,2.0249997 7,1.0249994 z"); 

            category1.Height = 16; 

            category1.Width = 16; 

            category1.HorizontalAlignment = HorizontalAlignment.Center; 

            category1.VerticalAlignment = VerticalAlignment.Center; 

            category1.Stretch = Stretch.Fill; 

            category1.SetBinding(Path.FillProperty, pathFillBinding); 

 

 

 

            Items = new ObservableCollection<NavigationItem> 

            { 

                new NavigationItem() 

                { 

                    Caption = "Dashboard", 

                    Icon = category1 

                } 

            }; 

 

        } 

Please have the sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Hierarchical_Data_Binding1474075812

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Geoffrey]

Hello,

I wanted to use my resource "NavigationItemPathStyle" inside my view to apply my style. Not applying the style from the ViewModel.

Thank you for your help.

[Jeya Kasipandi]

Hi Geoffrey, 

 

We have checked your query and modified the sample as per your requirement. Please find the sample from below link 

Sample link:https://www.syncfusion.com/downloads/support/directtrac/general/ze/Hierarchical_Data_Binding-1646633819 

In this sample, we have used ItemContainerStyle to achieve your requirement as like below code snippet 

 

 

        <Style x:Key="ItemStyle" TargetType="syncfusion:NavigationItem">             <Setter Property="IconTemplate">                 <Setter.Value>                     <DataTemplate>                         <Path Data="{​​​​​​​Binding}​​​​​​​" Style="{​​​​​​​StaticResource NavigationItemPathStyle}​​​​​​​" />                     </DataTemplate>                 </Setter.Value>             </Setter>         </Style> 

​ 

 <syncfusion:SfNavigationDrawer         x:Name="navigationDrawer"         DisplayMemberPath="Caption"         DisplayMode="Compact"         IconMemberPath="Icon"        ItemContainerStyle="{​​​​​​​StaticResource ItemStyle}​​​​​​​"         ItemsSource="{​​​​​​​Binding Items}​​​​​​​"         SelectedItem="{​​​​​​​Binding SelectedItem}​​​​​​​"> 

 

Please refer the below help documentation link for this 

https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding 

Please check with the above and let us know if you have any concern. 

 

Regards, 

Jeya K

 

[Geoffrey]

Thank you very much for your help! I I was missing something when doing it.

[Suganya Sethuraman]

Hi Geoffrey,

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Regards,
Suganya Sethuraman.