WPF中矢量圖制作和引用

      WPF程序有時需要適配不同大小的屏幕，圖片是像素圖的話，拉伸之后會變模糊，影響美觀度，因此可以考慮使用矢量圖。網上找到了相應的介紹：http://learnwpf.com/post/2006/06/04/How-do-I-Include-Vector-Based-Image-Resources-in-my-WPF-Application.aspx。但是里面提到的AI插件不是很好用，相比之下，微軟提供的Expression Design 4還是方便些，現在該軟件已經免費，可以直接去官網下載。

     1.在Expression Design 4中加載已有的*.ai矢量文件，選中需要轉換的圖形元素，然后點擊File|Export，選擇導出xaml文件即可。

   需要注意的地方，如果*.ai文件圖層中存在，里面的圖形元素是無法正確導出的。需要將其移出到該組外面，再選中導出即可。

 2.按照上面參考鏈接中的例子，將導出的xaml文件中cavas部分代碼復制到ControlTemplate中，如下：

    <ControlTemplate x:Key="CellPhone">
        <Viewbox Stretch="Uniform">
            <Canvas Width="20.008" Height="21.3254" Clip="F1 M 0,0L 20.008,0L 20.008,21.3254L 0,21.3254L 0,0">
                <Canvas  Width="800.32" Height="599.776" Canvas.Left="0" Canvas.Top="0">
                    <Path Width="20.008" Height="21.3253" Canvas.Left="0" Canvas.Top="-3.05176e-005" Stretch="Fill" Fill="#FF2179BF" Data="..."/>
                </Canvas>
            </Canvas>
        </Viewbox>
    </ControlTemplate>

　3.在原來需要引用圖片的地方，引用上述替換xaml即可，如：

<Button Name="btnCellPhone"  ToolTip="手機">
                <ContentControl Template="{StaticResource CellPhone}" />
 </Button>