CollapseAll image

Using custom XAML icons

Standard_Checked.gifEnterprise_Checked.gifSaaS_Checked.gif

Visual Fusion allows you to us custom icons created with XAML (Extensible Application Markup Language) in your applications. XAML is a markup language used to create user interface elements for .NET Framework applications, including applications built on Silverlight, like VFX. Among the advantages of XAML icons:

(For other uses of XAML in your applications, see XAML in Visual Fusion applications.")

Creating XAML icons

Many tools are available for creating XAML icons. Some let designers work "draw" icons, and then export the corresponding XAML code; others let programmers preview the result of XAML code as they write it. You can use any tool that produces valid XAML to make icons for your Visual Fusion applications.

Size and Position

Be sure to specify a height and width for your XAML icons. (Not all XAML exported from drawing tools will include these.) 

When a XAML icon is positioned in an application, by default the upper left corner of the icon is "pinned" to the icon location (the latitude and longitude in a Visual Fusion application). To center the icon over its location instead, or to position a specific part of the icon over the location point, you can specify icon margins. These margins will offset the icon relative to its default position.

  • Margins in XAML are specified in this order: left, top, right, bottom. Example: Margin="-4,-2,0,0"
  • Specify a negative left margin to offset the icon to the left and a positive margin to offset it to the right.
  • Specify a negative top margin to move the icon up and a positive margin to move it down.
  • As an alternative to the "Margin=" syntax, you can set the icon's distance from the canvas edge using the properties Canvas.Left, Canvas.Top, etc.

Color

You can specify a static HTML color for your icon, or create an icon whose color can be set dynamically in  code or in response to values in the data. (For example, the Visual Fusion standard icon set has been implemented in this way; these icons have a default color, which you can override in the Composer.) To implement an icon with changeable color, include the "ThemeBrush" resource, as shown in the sample XAML below. The Color attribute for this resource specifies a default color.

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
     Margin="-5,-5,0,0"
     Height="10"
     Width="10"
     RenderTransformOrigin="0.5,0.5">
 
      <Canvas.Resources>
          <SolidColorBrushx:Key="ThemeBrush" Color="#FF0079FF"/>
      </Canvas.Resources>
 
      <EllipseWidth="10" Height="10">
          <Ellipse.Fill>
               <RadialGradientBrush>
                      <GradientStopColor="#66000000" Offset="0.72"/>
                      <GradientStopOffset="1"/>
               </RadialGradientBrush>
          </Ellipse.Fill>
      </Ellipse

      <EllipseFill="{StaticResourceThemeBrush}" Width="4" Height="4" Canvas.Left="3" Canvas.Top="3"/>
</Canvas>

   

Implementing custom XAML icons

To use custom XAML icons, you must develop your application with the Visual Fusion SDK. Projects created with the SDK will include an icons folder containing a sample XAML icon file. The path to this file is:

Source Control Directory\ProjectName\Main\ProjectName.Solution\ProjectName.Icons\POI\ExamplePOI.xaml

Also in this directory is the icons manifest file, Icons.xml.

To add a XAML icon to your application:

  1. To start, be sure the following are installed on your development machine:
    • the Visual fusion SDK
    • Visual Studio 2010
    • Silverlight toolkit
  2. Open Visual Studio 2010 and create a new project using the Visual Fusion 5.0 template project.
  3. Enter the appropriate project name, location and solution name, as shown below. Click OK.

  4. Enter the company name and project name. Fields for the Bing Map user name and password or application ID (whichever was used while installing the VF5.0 SDK) will be populated. Click OK to create the project.
  5. In the Icon project, select POI>Add>New item to add a new Silverlight User Control. (In this example, the control is named named CustomIcon.xaml. )

  6. Make sure that the new control (CustomIcon.xaml) is an Embedded Resource.

    Make sure the new control is an embedded resource.
  7. Add the XAML for your icon to the CustomIcon.xaml control.

  8. Open the file Icons.xml in the Icons project and add CustomIcon to the manifest as shown below:

    <IconManifest>
            <IconName="CustomIcon"
             Src="IDV.CustomIcon.Icons;component/POI/CustomIcon.xaml"
             IsGeographic="False"/>
             <!--<Icon Name="ExamplePOI" Src="IDV.CustomIcon.Icons;component/POI/ExamplePOI.xaml"
              IsGeographic="False" Color="#ffff6600"/>
             <Icon Name="ExampleTool" Src="IDV.CustomIcon.Icons;component/Menu/ExampleTool.xaml" />
             <Icon Name="ExampleFlyTo" Src="IDV.CustomIcon.Icons;component/Menu/ExampleFlyTo.xaml" />
             <Icon Name="ExampleAdhoc" Src="IDV.CustomIcon.Icons;component/Menu/ExampleAdhoc.xaml" />
    -->
    </IconManifest>

  9. Build the project.
  10. Navigate to the ClientBin folder of the Web project, or Bin folder of the Icons project and copy the XAP file for your icons to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\template\LAYOUTS\VFX5.0
  11. Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\template\LAYOUTS\VFS\config. Open the file Providers.config for editing.
  12. In Providers.config, locate the XMLIconProvider element for the standard icon XAP file; using this as a model, create a similar XamlIconProvider element for your custom icon file. Each icon provider must have a unique ID; in the example below we created a provider with the ID XamlIcons1. Save and close the file. 

  13. Open the command prompt in Administrative mode and perform an IISRESET.
  14. To confirm that your custom icon has been added to the icons list in Composer and that the configuration is correct, enter the following request URLs in your browser:

    a. http://Your_server_name/Checkconfig.vfs: Under “Successfully configured Icon Providers” you should see the ID that you gave the custom icon in the Providers.config file. (In our example below, the ID is XamlIcons1.) If your icon ID does not appear, or this Checkconfig.vfs request returns errors, check the changes you made to Providers.config.

    Use the CheckConfig.vfs action to determine whether the configuration contains errors.

    b. http://Your_server_name/GetIconList.vfs: This displays a list of icons, which should now include the name of your custom icon.

    Use the GetIconList.vfs action to list the icons available to your application.
  15. Go to the App Hub and launch your application site, or create a test site using App Hub and launch the site.
  16. Edit the Visual Fusion Map Viewer Web Part.
  17. Expand the Web Part's Viewer Configuration settings; in the field Icon Library URLs, add the relative path to the Custom Icon, for example: {webapp}/layouts/vfx5.0/IDV.CustomIcon.Iocns.xap. Use a semicolon to separate it from the paths for the standard and legacy icons. Click Ok and exit Edit mode.

    Edit the Web Part to add the path to the new XAML icons.
  18. Click on Browse, then select the Composer tab. Drag a list from the All Visual Fusion Feeds column on the left side of the Composer to the Selected Feeds column on the right.  (If you created a test site, use the test list named VF List.)
  19. Mouse over the feed name and select the Edit icon to open the Basic Styling window. Open the Point Icon drop-down menu; your new icon should appear in the list of Icons.
  20. Select an appropriate color, and click Save, then Save Selected Feeds.
  21. Navigate back to the site page and turn on the list feed to see your custom icon on the map.


 

Custom JPG and PNG icons

Icons, custom

Copyright 2010, IDV Solutions, LLC