Use Vector Graphics XAML file as an ImageSource in WPF RibbonButton

Question

I converted an Adobe Illustrator file to .xaml using Expression Design 4. Now want to take the ControlTemplate that was generated and use this as as an ImageProperty in the LargeImageSource or SmallImageSource in the MS RibbonControl.RibbonButton. There is an images resource dictionary that has been created and the following code is placed there:

  <Viewbox x:Uid="Viewbox_1" Stretch="Uniform">

     <Canvas x:Uid="Canvas_1" Width="224" Height="224" Clip="F1 M 0,0L 224,0L 224,224L 0,224L 0,0">
        <Canvas x:Uid="Layer_1" x:Name="Layer_1" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0"/>
        <Canvas x:Uid="Layer_1_0" x:Name="Layer_1_0" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0">
           <Path x:Uid="Path" x:Name="Path" Width="224" Height="224" Canvas.Left="0" Canvas.Top="0.00012207" Stretch="Fill" Data="F1 M 4.8,0.00012207C 2.16,0.00012207 0,2.1468 0,4.77348L 0,219.228C 0,221.853 2.16,224 4.8,224L 219.201,224C 221.84,224 224,221.853 224,219.229L 224,4.77348C 224,2.1468 221.84,0.00012207 219.201,0.00012207L 4.8,0.00012207 Z ">
              <Path.Fill>
                 <LinearGradientBrush x:Uid="LinearGradientBrush_1" StartPoint="0.500003,1" EndPoint="0.500003,3.06538e-006">
                    <LinearGradientBrush.GradientStops>
                       <GradientStop x:Uid="GradientStop_1" Color="#FFFDEFB3" Offset="0"/>
                       <GradientStop x:Uid="GradientStop_2" Color="#FFF8E291" Offset="0.134848"/>
                       <GradientStop x:Uid="GradientStop_3" Color="#FFF4D570" Offset="0.5"/>
                       <GradientStop x:Uid="GradientStop_4" Color="#FFF8E291" Offset="0.865152"/>
                       <GradientStop x:Uid="GradientStop_5" Color="#FFFDEFB3" Offset="1"/>
                    </LinearGradientBrush.GradientStops>
                 </LinearGradientBrush>
              </Path.Fill>
           </Path>
           <Path x:Uid="Path_1" x:Name="Path_1" Width="226.667" Height="226.667" Canvas.Left="-1.33333" Canvas.Top="-1.33333" Stretch="Fill" StrokeThickness="2.66667" StrokeMiterLimit="2.75" Stroke="#FF666666" Data="F1 M 224,219.229C 224,221.853 221.84,224 219.2,224L 4.80134,224C 2.16,224 0,221.853 0,219.228L 0,4.77332C 0,2.14799 2.16,0 4.80134,0L 219.2,0C 221.84,0 224,2.14799 224,4.77332L 224,219.229 Z "/>
           <Path x:Uid="Line" x:Name="Line" Width="206.112" Height="8" Canvas.Left="10.2715" Canvas.Top="164.591" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF2A3B8E" Data="F1 M 14.2715,168.591L 212.383,168.591"/>
           <Path x:Uid="Path_2" x:Name="Path_2" Width="42.3867" Height="42.3853" Canvas.Left="48.3855" Canvas.Top="147.399" Stretch="Fill" Fill="#FFCF1F3C" Data="F1 M 90.7721,168.594C 90.7721,180.295 81.2868,189.785 69.5775,189.785C 57.8735,189.785 48.3855,180.295 48.3855,168.594C 48.3855,156.887 57.8735,147.399 69.5775,147.399C 81.2868,147.399 90.7721,156.887 90.7721,168.594 Z "/>
           <Path x:Uid="Path_3" x:Name="Path_3" Width="42.3867" Height="42.384" Canvas.Left="133.555" Canvas.Top="147.399" Stretch="Fill" Fill="#FF1B75BB" Data="F1 M 175.941,168.594C 175.941,180.295 166.456,189.783 154.747,189.783C 143.043,189.783 133.555,180.295 133.555,168.594C 133.555,156.887 143.043,147.399 154.747,147.399C 166.456,147.399 175.941,156.887 175.941,168.594 Z "/>
           <Path x:Uid="Line_4" x:Name="Line_4" Width="68.1093" Height="10.6667" Canvas.Left="119.548" Canvas.Top="64.672" Stretch="Fill" StrokeThickness="10.6667" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Data="F1 M 124.881,70.0053L 182.324,70.0053"/>
           <Path x:Uid="Line_5" x:Name="Line_5" Width="10.6667" Height="76.748" Canvas.Left="148.51" Canvas.Top="32.187" Stretch="Fill" StrokeThickness="10.6667" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Data="F1 M 153.844,103.602L 153.844,37.5204"/>
           <Path x:Uid="Path_6" x:Name="Path_6" Width="35.5831" Height="28.2761" Canvas.Left="136.055" Canvas.Top="13.6534" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 167.578,37.6095L 153.61,17.7814C 153.485,17.6081 153.286,17.6108 153.167,17.7895L 140.109,37.6041C 139.993,37.7828 140.07,37.9295 140.285,37.9295L 167.413,37.9295C 167.627,37.9295 167.702,37.7868 167.578,37.6095 Z "/>
           <Path x:Uid="Path_7" x:Name="Path_7" Width="35.5846" Height="28.2777" Canvas.Left="135.783" Canvas.Top="98.1695" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 167.137,102.169L 140.01,102.169C 139.794,102.169 139.718,102.315 139.843,102.489L 153.813,122.315C 153.935,122.493 154.134,122.491 154.253,122.309L 167.313,102.497C 167.431,102.317 167.35,102.169 167.137,102.169 Z "/>
           <Path x:Uid="Path_8" x:Name="Path_8" Width="28.2794" Height="35.5851" Canvas.Left="180.031" Canvas.Top="52.7121" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 184.359,56.7671C 184.182,56.6484 184.031,56.7284 184.031,56.9431L 184.031,84.0724C 184.031,84.2844 184.174,84.3617 184.351,84.2377L 204.179,70.2684C 204.357,70.1431 204.354,69.9444 204.174,69.8284L 184.359,56.7671 Z "/>
           <Path x:Uid="Path_9" x:Name="Path_9" Width="28.2777" Height="35.5834" Canvas.Left="100.22" Canvas.Top="51.6494" Stretch="Fill" StrokeThickness="8" StrokeMiterLimit="2.75" Stroke="#FF00B6DD" Fill="#FF00B6DD" Data="F1 M 124.169,83.1772C 124.349,83.2972 124.497,83.2159 124.497,83.0025L 124.497,55.8745C 124.497,55.6599 124.355,55.5865 124.176,55.7079L 104.348,69.6759C 104.175,69.8025 104.176,69.9999 104.357,70.1172L 124.169,83.1772 Z "/>
        </Canvas>
     </Canvas>
  </Viewbox>

Currently we are using bitmaps with png files as the image source, but now want to use the above xaml files. Thank you in advance for any help. Bill

score 9 · Answer 1 · answered Oct 23 '11 at 10:49

9

Use Expression Blend to convert this to a DrawingImage:

Place this XAML in some file where you can see it in the designer.
Select the Viewbox.
Click Tools > Make Brush Resource > Make Drawing Brush.
From the created brush, extract the root DrawingGroup and give it some key.
Create a DrawingImage and assign the Drawing property to the above DrawingGroup.
Assign the DrawingImage to the {Large, Small}ImageSource property.

answered Oct 23 '11 at 10:49

Eli Arbel

22,391
3
45
71

2

Tools > Make Brush Resource > Make Drawing Brush. Can't find this in Blend 2015 – LuckyLikey Apr 28 '17 at 08:51
1

For the newer Blend versions: Place XAML in a file and open the "Design" view -> select image in the designer -> Tools -> Make Brush Resource -> Make Drawing Brush Resource. – Danila Kireev Jun 18 '20 at 09:28

Use Vector Graphics XAML file as an ImageSource in WPF RibbonButton

1 Answers1