CrispImage draws empty area when using VS image service and catalog

Question

I wanted to use the MS Visual Studio Image library for my project and do it in the recommended way using the image service. Therefore I followed the cook book on https://learn.microsoft.com/en-us/visualstudio/extensibility/image-service-and-catalog?view=vs-2022

The code compiles without errors, but the buttons don't show any icons. Only an empty area.

I have installed the Visual Studio SDK (not sure if needed) and added the dependencies via Nuget to my project:

<PackageReference Include="Microsoft.VisualStudio.ImageCatalog" Version="17.4.33103.184" />  
<PackageReference Include="Microsoft.VisualStudio.Imaging" Version="17.4.33103.184" />  
<PackageReference Include="Microsoft.VisualStudio.Utilities.Internal" Version="16.3.38" />  

My XAML code is here:

<Window x:Name="MainWindow1" x:Class="Script_Builder.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"  
        xmlns:theming="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"  
        xmlns:utilities="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Utilities"  
        xmlns:catalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"  
        mc:Ignorable="d"  
        Title="Script Builder" Height="600" Width="800" WindowStartupLocation="CenterScreen">  
    <Window.Resources>  
        <utilities:BrushToColorConverter x:Key="BrushToColorConverter"/>  
    </Window.Resources>  
    <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto"/>  
            <RowDefinition Height="Auto"/>  
            <RowDefinition Height="200"/>  
            <RowDefinition Height="3"/>  
            <RowDefinition Height="*"/>  
            <RowDefinition Height="Auto"/>  
        </Grid.RowDefinitions>  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="150"></ColumnDefinition>  
            <ColumnDefinition Width="*"></ColumnDefinition>  
        </Grid.ColumnDefinitions>  
        <Menu Grid.Row="0" Grid.ColumnSpan="2" Background="{x:Null}">  
            <MenuItem  Name="menuFile" Header="File">  
                <MenuItem Header="Exit"/>  
            </MenuItem>  
            <MenuItem Name="menuHelp" Header="Help">  
                <MenuItem Header="About"/>  
            </MenuItem>  
        </Menu>  
        <ToolBarTray Grid.Row="1" Grid.ColumnSpan="2">  
            <ToolBar>  
                <Button>  
                    <imaging:CrispImage Width="24" Height="24" Moniker="{x:Static catalog:KnownMonikers.NewScript}"/>  
                </Button>                   
                <Button>  
                    <imaging:CrispImage Width="24" Height="24" Moniker="{x:Static catalog:KnownMonikers.Open}"/>  
                </Button>                   
                <Button>  
                    <imaging:CrispImage Width="24" Height="24" Moniker="{x:Static catalog:KnownMonikers.Save}"/>  
                </Button>                   
                <Button>  
                    <imaging:CrispImage Width="24" Height="24" Moniker="{x:Static catalog:KnownMonikers.Run}"/>  
                </Button>  
                <Button>  
                    <imaging:CrispImage Width="24" Height="24" Moniker="{x:Static catalog:KnownMonikers.Save}"/>  
                </Button>  
            </ToolBar>  
        </ToolBarTray>  
        <DataGrid Grid.Row="2" d:ItemsSource="{d:SampleData ItemCount=10}" Grid.ColumnSpan="2" Background="Gray" BorderThickness="0"/>  
        <GridSplitter Grid.Row="3" ResizeBehavior="BasedOnAlignment" ResizeDirection="Auto" Background="DarkGray" Height="11" HorizontalAlignment="Stretch" Grid.ColumnSpan="2" BorderThickness="0"/>  
        <TreeView Grid.Row="4"/>  
        <RichTextBox Grid.Row="4" Grid.Column="1">  
            <FlowDocument>  
                <Paragraph>  
                    <Run Text="RichTextBox"/>  
                </Paragraph>  
            </FlowDocument>  
        </RichTextBox>  
        <StatusBar Grid.Row="5" Grid.ColumnSpan="2" Height="20"></StatusBar>  
    </Grid>      
</Window>  

I have found other posts with a similar problem but without solution:
https://stackoverflow.com/questions/40677826/why-does-this-microsoft-visualstudio-imaging-crispimage-does-not-show-anything?noredirect=1&lq=1

https://stackoverflow.com/questions/73232867/how-to-insert-knownmoniker-icons-in-winui-3-app?noredirect=1&lq=1

I'm not sure if I need to generate my own .imagemanifest file out of the zip package Microsoft offers to download (https://www.microsoft.com/en-us/download/details.aspx?id=35825) or if I have to extract the images somewhere in my project folder or the VS installation directory of if they are already installed via the VS SDK. The extension "KnownMonikers Explorer" shows me all the icons inside VS.

I'm using Visual Studio 2022 Community Edition. Target framework: net6.0-windows10.0.18362.0

Answer 1

In fact, this functionality has been broken by a Visual Studio change.

Please see and upvote here: https://developercommunity.visualstudio.com/t/VSSDKCPSExtensibility:-Image-Loading-i/10525678