How can I use vector graphics (defined in XAML) as the image of a Ribbon menu item?

Question

I need to convert my WPF application, which has a Ribbon, to use vector graphics for the images on buttons, etc., instead of bitmaps. I've got this working so far, except for the RibbonApplicationMenu items, which use their RibbonApplicationMenu.ImageSource property, with type ImageSource to set the graphic that shows up at the left side of the ribbon menu item.

My vector graphics are defined like this in XAML:

<ControlTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ViewBox Width="148.854" Height="150.500">
        <Canvas Width="148.854" Height="150.500">
            <Path>
            <!-- . . . yadda yadda yadda . . . -->
            </Path>
        </Canvas>
    <Viewbox>
</ControlTemplate>

These render properly when I set them to be the .Template of a Button, etc.

I can't figure out, however, how to use them for the images that show up in the RibbonApplicationMenu controls. Just setting the .Template property of the RibbonApplicationMenu does not work (it fills the entire control seems to break its functionality).

I attempted to use a VisualBrush and then render it to a RenderTargetBitmap to use as the .ImageSource (I also have to work mostly in code behind for reasons I won't get into):

ContentControl cc = new ContentControl(); // just picked ContentControl as a test
cc.Template = myTemplate; // assume myTemplate has the proper ControlTemplate
VisualBrush visBrush = new VisualBrush();
visBrush.Visual = cc;
// not really sure about the parameters to this next line 
RenderTargetBitmap rend = 
    new RenderTargetBitmap(148.854, 150.5, 120, 96, PixelFormats.Pbgra32);
rend.Render(cc);
RibbonApplicationMenuItem menu = new RibbonApplicationMenuItem();
menu.ImageSource = render;

This compiles, but just shows a blank where the image would go. If I instead use a BitmapImage loaded from an image file as the .ImageSource, it displays correctly.

Any ideas how I can get this to work?

Answer 1

Two things that might need to be done: Firstly there is no explicit size set for the Canvas in the ControlTemplate, you'll need to assign it a width and height (see the upvoted answer here for details). The other thing is that you need to Arrange and Measure the Viewbox so that it assumes the required dimensions.

So altering the xaml for the vector graphics to something like:

<ControlTemplate x:Key="Template">
    <Viewbox>
        <Canvas Height="100" Width="130">
            <Path>
                <!-- data -->
            </Path>
        </Canvas>
    </Viewbox>
</ControlTemplate>

And the code to:

ControlTemplate controlTemplate = 
    FindResource("Template") as ControlTemplate; 

ContentControl content = new ContentControl();
content.Template = controlTemplate;

// ensure control has dimensions
content.Measure(new Size(200, 200));
content.Arrange(new Rect(0, 0, 200, 200));

RenderTargetBitmap render =
    new RenderTargetBitmap((int)content.ActualWidth, (int)content.ActualHeight, 120, 96, PixelFormats.Pbgra32);

render.Render(content);

RibbonApplicationMenuItem menu = new RibbonApplicationMenuItem();
menu.ImageSource = render;

Will hopefully get it working.