Start-Up. XAML-Import into ix Developer 2.10 KI Function and area of use. 2 About the Start-up document

Size: px

Start display at page:

Download "Start-Up. XAML-Import into ix Developer 2.10 KI Function and area of use. 2 About the Start-up document"

Joella Hodge
5 years ago
Views:

Start-Up XAML-Import into ix Developer 2.10 KI00365 2014-09 1 Function and area of use This document explains how to import vector graphics, XAML-components, into ix Developer 2.10. WPF uses vector graphics and the appearance of the graphic is described in XAML-code.

1 Start-Up XAML-Import into ix Developer 2.10 KI Function and area of use This document explains how to import vector graphics, XAML-components, into ix Developer WPF uses vector graphics and the appearance of the graphic is described in XAML-code. When using a XAML-component in a PC/TxC-application it s possible to dynamically change the Fill color, Stroke color and the Stroke thickness in Runtime. For Panel-targets it s only possible to change these properties in Designtime. Software requirements: - ix Developer Microsoft Expression Design 4 (Freeware) - Kaxaml (Freeware) Hardware requirements: - ix Panel (TxA, TxB, TxC) 2 About the Start-up document This Start-Up document should not be considered as a complete manual. It is an aid to be able to start up a normal application quickly and easily. For further information we refer to the ix Developer reference manual and User guide. MAxx831x (Reference manual) MAxx832x (User Guide) This document and other Start-Up documents can be downloaded from Please use the address manuals@beijerelectronics.com for feedback on our Start-Up documents. Parent company: Sweden Beijer Electronics AB (publ) Beijer Electronics Inc. Beijer Electronics GmbH Registered office: Malmoe Box North Plum Grove Road, Suite F Zettachring 2A Internet: SE MALMOE US-Schaumburg, IL DE Stuttgart info@beijerelectronics.com SWEDEN USA GERMANY VAT reg no SE Telephone Telephone Telephone Telefax Telefax Telefax

3 Basic Import XAML into ix Install and open Expression Design 4. The software is free and can be downloaded at http://www.microsoft.

2 3 Basic Import XAML into ix Install and open Expression Design 4. The software is free and can be downloaded at Open Microsoft Expression Design and draw your image Select all your components and choose File -> Export Use the same settings as shown in the picture below: 2 (7)

3 Click Export All and save the file. Open ix Developer. Right mouse click on a node in the Component Library and choose Add Component. Select the XAML file that you exported from Expression Design. 3 (7)

4 4 (7)

5 4 Advanced XAML bindings in ix It s possible to bind some of the component s properties to tags directly in ix Developer s property grid. The following properties are supported: Fill, outline and outline thickness 4.1 Kaxaml Download Kaxaml from Open your exported xaml file in Kaxaml. Localize which part of the graphic that you want to control with fill, outline and outline thickness. Changing the fill color for each section makes it easier to find which parts of the XAML-code that needs to be modified. 4.2 Dynamic properties The following dynamic properties are supported by ix Developer: //Namepace xmlns:signatures=" //Fill Fill="{Binding Fill, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}" //Stroke Stroke="{Binding Stroke, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}" //Stroke Thickness StrokeThickness="{Binding StrokeThickness, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}" 5 (7)

6 XAML code before modification <?xml version="1.0" encoding="utf-8"?> <Canvas xmlns=" xmlns:x=" Width="293.5" Height="284.5" Clip="F1 M 0,0L 293.5,0L 293.5,284.5L 0,284.5L 0,0"> <Ellipse Width="293.5" Height="284.5" Canvas.Left="0" Canvas.Top=" e-006" Stretch="Fill" StrokeThickness="20" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFF0000" Fill="#FFFFFF00"/> <Path Width="56.32" Height="90.88" Canvas.Left="49.24" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,182.5L 49.24,182.5L 49.24,167.14L 68.44,167.14L 68.44,110.82L 49.24,114.66L 49.24,99.3L 87.64,91.62L 87.64,167.14L ,167.14L ,182.5 Z "/> <Path Width="61.44" Height="90.88" Canvas.Left="119.64" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,165.48L ,165.86L 179.8,165.86L 179.8,182.5L ,182.5L ,166.86L 146.1,142.24C , , ,129.83C , , ,119.3C 160.6, , ,106.98C , , ,115.94L ,98.56C , , ,91.62C , , ,98.46C , , ,116.94C , , ,149.06L , Z "/> <Path Width="66.56" Height="92.16" Canvas.Left="191.32" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,183.78C , , ,139.1C , , ,103.77C , , ,91.62C , , ,137.04C , , ,171.72C , , , Z M ,106.98C , , ,138.62C 211.8, , ,168.42C , , ,137.7C 237.4, , , Z "/> </Canvas> Modify the xaml code Replace Fill, Stroke and StrokeThickness with dynamics properties. Don t forget to add the namespace. <?xml version="1.0" encoding="utf-8"?> <Canvas xmlns:signatures=" xmlns=" xmlns:x=" Width="293.5" Height="284.5" Clip="F1 M 0,0L 293.5,0L 293.5,284.5L 0,284.5L 0,0"> <Ellipse Width="293.5" Height="284.5" Canvas.Left="0" Canvas.Top=" e-006" Stretch="Fill" StrokeThickness="{Binding StrokeThickness, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="{Binding Stroke, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}" Fill="{Binding Fill, RelativeSource={RelativeSource AncestorType={x:Type signatures:isymbolviewboxsignature}}}"/> <Path Width="56.32" Height="90.88" Canvas.Left="49.24" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,182.5L 49.24,182.5L 49.24,167.14L 68.44,167.14L 68.44,110.82L 49.24,114.66L 49.24,99.3L 87.64,91.62L 87.64,167.14L ,167.14L ,182.5 Z "/> <Path Width="61.44" Height="90.88" Canvas.Left="119.64" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,165.48L ,165.86L 179.8,165.86L 179.8,182.5L ,182.5L ,166.86L 146.1,142.24C , , ,129.83C , , ,119.3C 160.6, , ,106.98C , , ,115.94L ,98.56C , , ,91.62C , , ,98.46C , , ,116.94C , , ,149.06L , Z "/> <Path Width="66.56" Height="92.16" Canvas.Left="191.32" Canvas.Top="91.62" Stretch="Fill" Fill="#FF000000" Data="F1 M ,183.78C , , ,139.1C , , ,103.77C , , ,91.62C , , ,137.04C , , ,171.72C , , , Z M ,106.98C , , ,138.62C 211.8, , ,168.42C , , ,137.7C 237.4, , , Z "/> </Canvas> 6 (7)

7 4.3 Import to ix Developer Open ix Developer. Right mouse click on a node in Component Library and choose Add Component. Select the XAML file that you modified in Kaxaml Observe how your component s appearance is changed when changing change fill/outline color or when changing the outline thickness. When you have modified the component you can easily copy it to the Component Library. This will allow you to reuse the graphic/component later on. 7 (7)

Name List in Information Designer

Name List in Information Designer Page 1 (9) PREN1111 2009-01 WHAT IS THE NAME LIST? 2 HOW TO USE THE NAME LIST 2 MAKING A NEW NAME LIST 2 MAKING A NAME LIST IN AN EXISTING PROJECT 3 IMPORT FROM CSV 4 IMPORT MODULES 5 SIEMENS STEP7 5 BECKHOFF