Dictionary problems

Question

I have a resoucerce dictionary, where I declare my Icon

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
                    xmlns:font="clr-namespace:Fonts">  
      
    <Label x:Key="AudioText"   
           Content="{x:Static font:IconFont.VolumeHigh}"  
           FontFamily="{StaticResource Material}"  
           FontSize="120"  
           HorizontalAlignment="Center"  
           VerticalAlignment="Center"  
           Foreground="Black" />  
  
</ResourceDictionary>  

I also have another resource, where I declare my FontFamily

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
  
    <FontFamily x:Key="Material">/Fonts/Material.ttf#Material Design Icons</FontFamily>  

And finally I have a class, that declare all my Icons

https://github.com/eduardoagr/TranscribeMe/blob/NewUI/Fonts/IconFont.cs

Then I declare my ViewModel for the SideMenu

ResourceDictionary dict =  
            Application.LoadComponent(  
            resourceLocator: new Uri(  
            "/TranscribeMe;component/IconsDictionary.xaml",  
            UriKind.RelativeOrAbsolute)) as ResourceDictionary;  
  
        public List<MenuItemData> ItemsData { get; set; } = new List<MenuItemData>();  
  
        public SideMenuControlViewModel() {  
            ItemsData.Add(new MenuItemData { Icon = (System.Windows.Controls.Label)dict["AudioText"], MenuText = Lang.AudioToText });  

MainWindow

<Border Background="#4D3A75" CornerRadius="20">  
  
        <Grid>  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition Width="150"/>  
                <ColumnDefinition Width="*"/>  
            </Grid.ColumnDefinitions>  
            <local:SideMenuControl x:Name="MenuList" FontSize="20" SelectedIndex="0" SelectionChanged="MenuList_SelectionChanged"/>  
            <Frame x:Name="frame" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" NavigationUIVisibility="Hidden"/>  
        </Grid>  
  
    </Border>  
  
and code behind  
  
public partial class MainWindow : Window {  
    public MainWindow() {  
        InitializeComponent();  
  
        DataContext = new MainWindowViewModel();  
    }  
  
    private void Window_Loaded(object sender, RoutedEventArgs e) {  
        MouseDown += delegate {  
            DragMove();  
        };  
    }  
  
    private void MenuList_SelectionChanged(object sender, EventArgs e) {  
  
    }  
  
MainWindowViewModel  
  
https://github.com/eduardoagr/TranscribeMe/blob/NewUI/ViewModel/MainWindowViewModel.cs  

code https://github.com/eduardoagr/TranscribeMe/tree/NewUI

This is my custom control

 <UserControl.Resources>  
  
        <!--#region Customizing Listbox-->  
        <Style TargetType="{x:Type ListBox}">  
            <Setter Property="BorderThickness" Value="0"/>  
            <Setter Property="Background" Value="#3C2275"/>  
            <Setter Property="HorizontalAlignment" Value="Stretch"/>  
            <Setter Property="VerticalAlignment" Value="Stretch"/>  
            <Setter Property="SelectionMode" Value="Single"/>  
            <Setter Property="Focusable" Value="False"/>  
  
        </Style>  
          
        <Style TargetType="{x:Type ListBoxItem}">  
            <Setter Property="Background" Value="Transparent"/>  
            <Setter Property="BorderThickness" Value="0"/>  
            <Setter Property="IsSelected" Value="{Binding IsItemSelected}"/>  
            <Setter Property="Height" Value="74"/>  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">  
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">  
                            <!--we will add or ui elements in this grid-->  
                              
                            <!--Now, since we want 3 things in our item to be shown..  
                            1) An indicator  
                            2) An icon (With changeable hover color)  
                            3) Text to represent our menu item-->  
                            <Grid Margin="-4,0,0,0">  
                                <Grid.ColumnDefinitions>  
                                    <ColumnDefinition Width="4"/>  
                                    <ColumnDefinition Width="50"/>  
                                    <ColumnDefinition Width="Auto"/>  
                                </Grid.ColumnDefinitions>  
  
                                <!--#region Left Indicator-->  
                                <Border>  
                                    <Border.Style>  
                                        <Style TargetType="{x:Type Border}">  
                                            <Setter Property="Background" Value="#406CB7"/>  
  
                                            <!--Keeping our indicator hidden since we want it to show only on "IsSelected" event-->  
                                            <Setter Property="Visibility" Value="Hidden"/>  
  
                                            <!--What we did here is we binded the Height for our previous border which is name "Bd" here, so when the height of our previous border changes so does this one-->  
                                            <Setter Property="Height" Value="{Binding Height, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Border}}"/>  
  
                                            <Setter Property="Width" Value="4"/>  
                                            <Setter Property="Focusable" Value="False"/>  
                                            <Setter Property="HorizontalAlignment" Value="Left"/>  
  
                                            <!--Lets add triggers to our indicator-->  
                                            <Style.Triggers>  
  
                                                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">  
                                                    <Setter Property="Visibility" Value="Visible"/>  
                                                </DataTrigger>  
                                                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">  
                                                    <Setter Property="Visibility" Value="Visible"/>  
                                                </DataTrigger>  
  
                                            </Style.Triggers>  
                                        </Style>  
                                    </Border.Style>  
                                </Border>  
                                <!--#endregion-->  
  
                                <!--#region Path Icon-->  
                                <Path Grid.Column="1">  
                                    <Path.Style>  
                                        <Style TargetType="{x:Type Path}">  
                                            <Setter Property="Fill" Value="#406CB7"/>  
                                            <Setter Property="Stretch" Value="Uniform"/>  
                                            <Setter Property="HorizontalAlignment" Value="Stretch"/>  
                                            <Setter Property="Width" Value="26"/>  
  
                                            <!--For data icon we will use Pichon App as it has lot of icons-->  
                                            <Setter Property="Data" Value="{Binding PathData}"/>  
  
                                            <!--Lets add triggers to our Icon-->  
                                            <Style.Triggers>  
                                                <!--Since we have multiple conditions to show indicator on (IsMouseOver & IsSelected) we will use MultiDataTrigger-->  
                                                <MultiDataTrigger>  
                                                    <MultiDataTrigger.Conditions>  
                                                        <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True"/>  
                                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True"/>  
                                                    </MultiDataTrigger.Conditions>  
                                                    <Setter Property="Fill" Value="#406CB7"/>  
                                                </MultiDataTrigger>  
                                            </Style.Triggers>  
                                        </Style>  
                                    </Path.Style>  
                                </Path>  
                                <!--#endregion-->  
  
                                <!--#region Text-->  
                                <TextBlock Grid.Column="2">  
                                    <TextBlock.Style>  
                                        <Style TargetType="{x:Type TextBlock}">  
                                            <Setter Property="HorizontalAlignment" Value="Stretch"/>  
                                            <Setter Property="VerticalAlignment" Value="Center"/>  
                                            <Setter Property="Foreground" Value="Black"/>  
                                            <Setter Property="Text" Value="{Binding MenuText}"/>  
                                        </Style>  
                                    </TextBlock.Style>  
                                </TextBlock>  
                                <!--#endregion-->  
                            </Grid>  
                        </Border>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
        <!--#endregion-->  
    </UserControl.Resources>  
  
    <ListBox x:Name="MyListBox" ItemsSource="{Binding ItemsList}" SelectedIndex="{Binding SelectedIndex, ElementName=this}" SelectionChanged="MyListBox_SelectionChanged">  
        <!--Since we want to add different icons and texts we will need to use binding and itemsource which we   
        will do using ViewModel to set the data for each element. It's easy follow my steps....-->  
    </ListBox>