ArcGIS viewer for Silverlight series: custom Layout of extended Viewer

The previous blog talked about Application Builder's rapid application construction. Some simple applications only require GIS applications with common functions, and the built-in layout and tools of builder can basically meet the requirements. However, in this special place, Party A often does not like the same interface, the same pop-up window, and cannot tolerate systems without user logon. Let's talk about how to customize the layout of the viewer.

ArcGIS viewer for SL series of this blog and later blogs need to install ArcGIS extensibility SDK for Silverlight.: http://www.esri.com/apps/products/download/index.cfm? Fuseaction = download. All # arcgis_for_sharepoint

After the SDK is installed, there will be an ESRI viewer node under Silverlight in the new window of vs. There is a project template of ArcGIS viewer for Silverlight project, and click Create a project named customlayout.

The created project structure is as follows: customlayout is a web project for testing, addins is a custom tool (command, tool, behavior, etc.), and layouts is a custom layout project.

The layouts directory in the config directory of the layouts project contains common layout templates and various pop-up window templates of the viewer. Print contains print templates. Therefore, the work of custom Layout mainly starts from here.

We can create a new XAML file to design the layout of the application, or modify the layout through the XAML file in layouts. If the layout template is completely re-designed, various naming rules in XAML must be consistent with the naming rules of standard templates so that the functions in viewer can run normally.

Open the layout project through blend, which is more intuitive.

Let's create a new layout template for helloworldlayout. XAML,

Here we have created a simple layout template with only the title, toolbar, and map content. The XAML code is as follows:

<UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:esri="http://schemas.esri.com/arcgis/client/2009"            xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns:ctlPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"xmlns:extensibility="http://schemas.esri.com/arcgis/client/extensibility/2010"    xmlns:converters="clr-namespace:ESRI.ArcGIS.Client.Application.Layout.Converters;assembly=ESRI.ArcGIS.Client.Application.Layout"    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"    mc:Ignorable="d"    d:DesignHeight="600" d:DesignWidth="600"><UserControl.Resources>        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="ResourceDictionaries/Common/Shared_Resources.xaml" />                <ResourceDictionary Source="ResourceDictionaries/Common/VerticalNavigationStyle.xaml" />            </ResourceDictionary.MergedDictionaries>            <extensibility:MapApplicationBindingSource x:Key="MapApplication" />        </ResourceDictionary>    </UserControl.Resources><Grid d:DataContext="{Binding Source={StaticResource ViewerDataSource}}"><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="75"/><RowDefinition/></Grid.RowDefinitions><StackPanel><TextBlock x:Name="ViewerTitle"  Text="{Binding TitleText}" Grid.Column="1" FontWeight="ExtraBold" FontSize="18" Foreground="{StaticResource AccentTextColorBrush}" /><TextBlock Text="Hello World Layout" FontWeight="ExtraBold" Foreground="{StaticResource AccentTextColorBrush}"/></StackPanel><ContentControl x:Name="MainToolbarContainer" Grid.Row="1" /> <esri:Map x:Name="Map" HorizontalAlignment="Stretch" IsLogoVisible="False"  VerticalAlignment="Stretch"Grid.Row="2"                       d:DataContext="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource SampleGraphicsLayerConverter}}"                      WrapAround="True"/></Grid></UserControl>

After the template is edited, set helloworldlayout. copy the XAML file to the config/layouts directory of the customlayout project and modify the application. the layoutfilepath attribute of the viewerapplication node in XML is config/layouts/helloworldlayout. XAML can be applied to this project.

If you want to apply the template to builder, you need to prepare an image named helloworldlayout. PNG,

Copy the helloworldlayout. XAML and helloworldlayout. PNG files to the \ builder \ Templates \ Default \ config \ layouts directory under the IIS directory.

We can see the Custom template in builder.

The effect of applying the new template is blurred because the background color of the grid is not set in the XAML code.

The above is just a diagram. Most of the methods in the project are to modify the existing template. Of course, if you have a project dedicated to the uidesign, you can consider making your own layout template. Likewise, it can be proved that the login window, progress bar, and other window styles are the same!