Creating an interactive table of contents

When looking at a map in a GIS, it is often helpful to have an interactive table of contents (TOC) that enables the viewer to toggle layer visibilities. By combining the Legend control that is included in the ESRI.ArcGIS.Client.Toolkit assembly and custom templates, you can provide a TOC experience in your ArcGIS API for Windows Phone applications.

This topic assumes that you are already familiar with the Legend control, including the templates available for customization.

Enabling and disabling layer visibility

One of the most commonly desired TOC interactions is the ability to turn layers on and off. Providing a MapLayerTemplate on the legend, which includes a CheckBox, can provide that behavior on the map layers included in the Legend.

<esri:Legend Map="{Binding ElementName=MyMap}" LayerItemsMode="Flat"
             ShowOnlyVisibleLayers="False">
    <esri:Legend.MapLayerTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox Content="{Binding Label}"
                    IsChecked="{Binding IsEnabled, Mode=TwoWay}"
                    IsEnabled="{Binding IsInScaleRange}" >
                </CheckBox>
            </StackPanel>
        </DataTemplate>
    </esri:Legend.MapLayerTemplate>
</esri:Legend>

The CheckBox's IsChecked property is bound to the IsEnabled property of the LayerItemViewModel. We can use this property since the template is being applied to an item of type LayerItemViewModel, as discussed in Templating the Legend.

If you are working with Flat as the LayerItemsMode, this will not apply to all of the root items in the TOC since some of the root items are instead sub-layers of map layers. See Understanding the Legend control's components for details.

The ability to control the visibility can be applied to the sub-layers as well as the map layers by providing a LayerTemplate which will customize the sub-layers in dynamic map services that are in your map, and then by setting the MapLayerTemplate to null. Since the MapLayerTemplate is optional, the LayerTemplate is applied when there is not a MapLayerTemplate. However, to see your LayerTemplate apply to map layers, you need to set the MapLayerTemplate to null to get rid of the default template. If the MapLayerTemplate is not set to null, or if a custom MapLayerTemplate is provided, the LayerTemplate will only apply to the sub-layers in the Legend.

<esri:Legend Map="{Binding ElementName=MyMap}" LayerItemsMode="Flat" 
             ShowOnlyVisibleLayers="False" MapLayerTemplate="{x:Null}" >
    <esri:Legend.LayerTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding Label}"
                      IsChecked="{Binding IsEnabled, Mode=TwoWay}"
                      IsEnabled="{Binding IsInScaleRange}" >
            </CheckBox>
        </DataTemplate>
    </esri:Legend.LayerTemplate>
</esri:Legend>

Controlling layer opacity

Another commonly desired TOC interaction is the ability to control the opacity of layers. By adding a Slider to the MapLayerTemplate we created in the previous section, the layer opacity can be adjusted through the TOC. Since the maximum value supported for Opacity is 1, that is the Maximum assigned to the Slider. The Layer, and through it the layer's opacity, is available through the LayerItemViewModel to which the template is applied. See Templating the Legend for details.

<esri:Legend Map="{Binding ElementName=MyMap}" LayerItemsMode="Flat"
             ShowOnlyVisibleLayers="False">
    <esri:Legend.MapLayerTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox Content="{Binding Label}"
                    IsChecked="{Binding IsEnabled, Mode=TwoWay}"
                    IsEnabled="{Binding IsInScaleRange}" >
                </CheckBox>
                <Slider Maximum="1" Value="{Binding Layer.Opacity, Mode=TwoWay}" Width="75" />
            </StackPanel>
        </DataTemplate>
    </esri:Legend.MapLayerTemplate>
</esri:Legend>