Vector diagram authoring and referencing in WPF

WPF programs sometimes need to adapt to a different size of the screen, the picture is like Sotu, the image will be blurred after stretching, affecting aesthetics, so you can consider the use of vector graphics. Online to find the corresponding introduction: Http://learnwpf.com/post/2006/06/04/How-do-I-Include-Vector-Based-Image-Resources-in-my-WPF-Application.aspx. But the AI plug-in mentioned in it is not very useful, in contrast, Microsoft provides expression Design 4 is convenient, now the software is free, you can directly to the official website to download.

1. Load the existing *.ai vector file in Expression Design 4, select the graphic element you want to convert, and then click file| Export, you can select the exported XAML file.

Note that if the *.ai file layer exists, the graphical elements inside cannot be exported correctly. You need to move it out of the group, and then select Export.

2. Follow the example in the above reference link to copy the Cavas part of the code from the exported XAML file into the ControlTemplate, as follows:

    <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. In the place where you originally need to refer to the picture, you can refer to the above substitution XAML, such as:

<button name= "Btncellphone"  tooltip= "Phone" >                <contentcontrol template= "{StaticResource CellPhone} "/> </Button>

　　

Vector diagram authoring and referencing in WPF