How to use font icons in SfNavigationDrawer

[kevin]

Hello： 

<sync:ChromelessWindow.Resources>

     <ResourceDictionary>

         <listCollection:ArrayList x:Key="HeaderItems">

             <Label x:Name="Settings" Content="{x:Static lang:Resources.Settings}" />

             <Label x:Name="About" Content="{x:Static lang:Resources.About}">

                 <Label.InputBindings>

                     <MouseBinding

                         Command="{Binding DialogClickCommand}"

                         CommandParameter="AboutView"

                         MouseAction="LeftClick" />

                 </Label.InputBindings>

             </Label>

         </listCollection:ArrayList>

         <Style x:Key="ItemStyle" TargetType="sync:NavigationItem">

             <Setter Property="Icon" Value="{Binding Icon}" />

             <Setter Property="DisplayMemberPath" Value="Title" />

             <Setter Property="ItemsSource" Value="{Binding SubItems}" />

             <Setter Property="CommandParameter" Value="{Binding Url}" />

             <Setter Property="FontFamily" Value="{StaticResource IconFont}" />

         </Style>

         <Converter:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />

     </ResourceDictionary>

 </sync:ChromelessWindow.Resources>

 <i:Interaction.Triggers>

     <i:EventTrigger EventName="Loaded">

         <i:InvokeCommandAction Command="{Binding LoadedWindowCommand}" />

     </i:EventTrigger>

 </i:Interaction.Triggers>

 <Grid>

     <Grid.RowDefinitions>

         <RowDefinition Height="*" />

         <RowDefinition Height="auto" />

     </Grid.RowDefinitions>

     <sync:SfNavigationDrawer

         x:Name="NavigationDrawer"

         Grid.Row="0"

         AutoChangeDisplayMode="True"

         BorderBrush="#F3F6FC"

         DisplayMemberPath="Title"

         DisplayMode="Expanded"

         DrawerBackground="#F3F6FC"

         ExpandedModeThresholdWidth="700"

         ExpandedModeWidth="210"

         ItemClicked="ItemClickedCommand"

         ItemContainerStyle="{StaticResource ItemStyle}"

         ItemsSource="{Binding Items}"

         SelectedItem="{Binding MenuSelectedItem, Mode=OneWay}">

         <sync:SfNavigationDrawer.ContentView>

             <Border Background="White" CornerRadius="20,0,0,0">

                 <StackPanel>

                     <ContentControl

                         x:Name="MainContentRegion"

                         Margin="10"

                         HorizontalAlignment="Left"

                         VerticalAlignment="Top"

                         prism:RegionManager.RegionManager="{Binding DefaultView}"

                         prism:RegionManager.RegionName="{x:Static Core:SytemConst.ContentRegion}" />

                 </StackPanel>

             </Border>

         </sync:SfNavigationDrawer.ContentView>

     </sync:SfNavigationDrawer>

Regards, 

Kevin

[Aarthi Arjunan]

Hi Kevin,

Thank you for reaching out to us. We have investigated your query.

In the SfNavigationDrawer control, you can set a FontIcon using the IconMemberPath property. In your sample you have missed to add IconMemberPath property and also directly binded the value to Icon property with the data template. So, We have modified the sample to demonstrate how to use the IconMemberPath property. Please refer to the attached sample and the code snippets below for more details.

<Style x:Key="ItemStyle" TargetType="sync:NavigationItem">

    <Setter Property="IconTemplate">

        <Setter.Value>

            <DataTemplate>

                <TextBlock Text="{Binding}" FontFamily="{StaticResource MaterialIcons}" Padding="10"  VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="15"/>

            </DataTemplate>

        </Setter.Value>

    </Setter>

    <Setter Property="Header" Value="{Binding Title}"/>

    <Setter Property="ItemsSource" Value="{Binding SubItems}" />

</Style>

<Grid>

    <sync:SfNavigationDrawer

x:Name="NavigationDrawer"

AutoChangeDisplayMode="True"

BorderBrush="#F3F6FC"

DisplayMemberPath="Title"

DisplayMode="Expanded"

DrawerBackground="#F3F6FC"

ExpandedModeThresholdWidth="700"

ExpandedModeWidth="210"

ItemContainerStyle="{StaticResource ItemStyle}"

IconMemberPath="Icon"

ItemsSource="{Binding Items}"

SelectedItem="{Binding MenuSelectedItem, Mode=OneWay}">

    </sync:SfNavigationDrawer>

</Grid>

Please let us know whether the provided suggestion helps to resolve your query. Please don’t hesitate to contact us if you have any concerns or queries.

Regards,

Aarthi A.

Attachment: WPFNavigationDrawer_effaa5f4.zip