Creating an interactive table of contents

When looking at a map, 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 Runtime SDK 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 with a CheckBox on the legend can provide that behavior on the map layers included in the legend. See the following code and screen shot:

<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. You can use this property since the template is being applied to an item of type LayerItemViewModel, as discussed in Providing a custom LegendItemTemplate, LayerTemplate, or MapLayerTemplate.

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 customizes the sub-layers in dynamic map services that are in your map, and setting the MapLayerTemplate to null. Since the MapLayerTemplate is optional, the LayerTemplate is applied when there is no MapLayerTemplate. However, to see your LayerTemplate applied to map layers, set the MapLayerTemplate to null to remove the default template from the Legend. If the MapLayerTemplate is not set to null, or if a custom MapLayerTemplate is provided, the LayerTemplate only applies to the sub-layers in the Legend. See the following code and screen shot:

<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 you 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 Providing a custom LegendItemTemplate, LayerTemplate, or MapLayerTemplate for details.

See the following code and screen shot:

<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>