使用矢量图形XAML文件作为WPF RibbonButton中的ImageSource

Question

我使用Expression Design 4将Adobe Illustrator文件转换为.xaml。现在想要将生成的ControlTemplate作为LargeImageSource或SmallImageSource中的ImageProperty使用MS RibbonControl.RibbonButton。目前已创建的图像资源字典和下面的代码是摆在那里：

<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> 

目前我们使用的位图与PNG文件作为图像源，但现在想用以上xaml文件。 非常感谢您的帮助。 比尔

Answer 1

使用Expression Blend的将其转换为一个DrawingImage：

• 将这个XAML中某些文件，您可以在设计师看到它。
• 选择视图框。
• 单击工具>制作画笔资源>制作画笔。
• 从创建的画笔中，提取根DrawingGroup并给它一些关键字。
• 创建DrawingImage并将Drawing属性分配给上述DrawingGroup。
• 将DrawingImage分配给{Large，Small} ImageSource属性。