How to use resource dictionary in WPF

Question

I'm new to WPF and I don't understand well how resource dictionary works. I have Icons.xaml that looks like:

<ResourceDictionary xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Canvas x:Key="appbar_3d_3ds" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="32" Height="40" Canvas.Left="23" Canvas.Top="18" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 27,18L 23,26L 33,30L 24,38L 33,46L 23,50L 27,58L 45,58L 55,38L 45,18L 27,18 Z "/>
</Canvas>

<Canvas x:Key="appbar_3d_collada" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="44" Height="30.3735" Canvas.Left="15" Canvas.Top="21.6194" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 39.2598,21.6194C 47.9001,21.6194 55.3802,24.406 59,28.4646L 59,33.4834C 56.3537,29.575 49.2267,26.7756 40.85,26.7756C 30.2185,26.7756 21.6,31.285 21.6,36.8475C 21.6,40.4514 25.2176,43.6131 30.6564,45.3929C 22.7477,43.5121 17.2,39.1167 17.2,33.9944C 17.2,27.1599 27.0765,21.6194 39.2598,21.6194 Z M 35.8402,51.9929C 27.1999,51.9929 19.7198,49.2063 16.1,45.1478L 15,40.129C 17.6463,44.0373 25.8733,46.8367 34.25,46.8367C 44.8815,46.8367 53.5,42.3274 53.5,36.7648C 53.5,33.161 49.8824,29.9992 44.4436,28.2194C 52.3523,30.1002 57.9,34.4956 57.9,39.6179C 57.9,46.4525 48.0235,51.9929 35.8402,51.9929 Z "/>
</Canvas>
</ResourceDictionary>

How can I use for example "app_3d_collada" in my xaml ? I have for example MenuItem and I would like to use this icon as my MenuItem icon.

Answer 1

First you have to specify the resource dictionary reference in App.xaml file.

In App.xaml file, under Application.Resources tag

<ResourceDictionary Source="Icons.xaml" />

The source of the resource dictionary can vary according the path where your resource dictionary is placed.

Now in any of your Window or Page xaml file you can reference these styles/icons like the following

<MenuItem Header="Reports" Icon="{StaticResource app_3d_collada}">
</MenuItem>

Same is the case for style. Hope that solves the problem.