ArcGIS Viewer for Silverlight - Creating a custom layout

The ArcGIS Viewer for Silverlight allows you to quickly create and customize rich web mapping applications using a fully interactive configuration experience. A key customization is the ability to change the layout of the Viewer to any of the several provided layouts, or create your own, without writing any code.

Create a custom layout using the Visual Studio template

The following steps show how to use the ArcGIS Viewer for Silverlight Visual Studio template to create a custom layout. First, create a new project with the Viewer template, then customize one of the existing layouts as desired. For more information on the Viewer template, see Visual Studio template.

Create a new project

Start Microsoft Visual Studio 2010, 2012, or 2013.
Click File > New > Project. The New Project dialog box appears.
In the New Project dialog box, expand Visual C#, then expand the Silverlight node.
Click Esri under the Silverlight node and select ArcGIS Viewer for Silverlight Project.
Type a name for the add-in project in the Name text box and click OK.

The Add-in solution loads with three projects: one containing add-in code, one containing layouts, and one containing a Viewer website. Each of these projects contains code and examples to help you get started creating custom tools, behaviors, and layouts.
If there are any warnings, you may need to first compile the solution.
Note:
You may need to install the Microsoft Silverlight Toolkit from CodePlex for additional Toolkit functionality.

Create a custom layout

Once you have created a new Visual Studio project using the ArcGIS Viewer for SilverlightProject as described above, complete the following steps to create a custom layout:

In the <ProjectName>.Layouts project, expand the Config folder, then expand the Layouts folder. A copy of each of the Viewer layouts (Accordion, Basic, Black Box, Black Box - Reverse, Floating Panels, Glass (default), Under Glow, and Wings) is provided.
Create a copy of any of these existing layouts as a starting point for creating your custom layout. Note that each of the existing layouts contains references to shared resource dictionaries in the Layouts folder on disk. These resource dictionaries include Colors.xaml, HorizontalNavigationStyle.xaml, and so forth.
Open the <ProjectName>.Layouts project from the Visual Studio solution in Microsoft Visual Studio, Microsoft Expression Blend, or both to create your custom layout. In Expression Blend, you may need to compile the project before editing.
Once you have created the desired layout, you can also include an image that will be displayed as a preview in the Choose Layout dialog box. Create an image in .png format with a size of 650x400 pixels. Name the .png file the same as your layout .xaml file.
Copy both the custom layout .xaml and .png files to <install directory>\Builder\Templates\Default\Config\Layouts.

Open the Layouts.xml file in the same folder. Edit the file to include a new Layout element to describe your custom layout. Provide a DisplayName and paths to the XAML file and PNG preview image as shown in the following example.

<?xml version="1.0" encoding="utf-8" ?>
<Layouts>
    <Layout DisplayName="Accordion" File="Config/Layouts/Accordion.xaml" PreviewImage="Config/Layouts/Accordion.png" />
    <Layout DisplayName="Basic" File="Config/Layouts/Basic.xaml" PreviewImage="Config/Layouts/Basic.png" />
    <Layout DisplayName="Black Box" File="Config/Layouts/BlackBox.xaml" PreviewImage="Config/Layouts/BlackBox.png" />
    <Layout DisplayName="Black Box - Reverse" File="Config/Layouts/BlackBox_-_Reverse.xaml" PreviewImage="Config/Layouts/BlackBox_-_Reverse.png" />
    <Layout DisplayName="Floating Panels" File="Config/Layouts/FloatingPanels.xaml" PreviewImage="Config/Layouts/FloatingPanels.png" />
    <Layout DisplayName="Glass" File="Config/Layouts/Glass.xaml" PreviewImage="Config/Layouts/Glass.png" />
    <Layout DisplayName="Under Glow" File="Config/Layouts/UnderGlow.xaml" PreviewImage="Config/Layouts/UnderGlow.png" />
    <Layout DisplayName="Wings" File="Config/Layouts/Wings.xaml" PreviewImage="Config/Layouts/Wings.png" />
    <Layout DisplayName="My Cool Layout" File="Config/Layouts/CoolLayout.xaml" PreviewImage="Config/Layouts/CoolLayout.png" />
</Layouts>

The new layout is automatically picked up by the Application Builder and is accessible from the Choose Layout dialog box (click the Change button on the Layout tab).

1/26/2015