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

Question

我使用 Expression Design 4 将 Adob​​e Illustrator 文件转换为 .xaml。现在想要获取生成的 ControlTemplate 并将其用作 MS RibbonControl.RibbonButton 中 LargeImageSource 或 SmallImageSource 中的 ImageProperty。已经创建了一个图像资源字典，并在其中放置了以下代码：

  <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 属性。