Template Picker Styles Online

This sample demonstrates using a ControlTemplate to define three different System.Windows.FrameworkElement Styles for the ESRI.ArcGIS.Client.Toolkit TemplatePicker. The Styles used by the TemplatePickers are defined as StaticResources. The samples show being able to add features and their associated attributes in two FeatureLayers using the ESRI.ArcGIS.Client.Toolkit TemplatePicker.

To use the sample, select a template from one of the custom styled pickers, and draw a feature on the map.

XAML

<UserControl x:Class="ArcGISWPFSDK.ToolkitTemplatePickerStyles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
    xmlns:esriPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit"
    xmlns:toolkitControls="http://schemas.microsoft.com/wpf/2008/toolkit">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.184"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>

            <Style x:Key="TemplatePickerGroupedByLayer" TargetType="{x:Type esri:TemplatePicker}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type esri:TemplatePicker}">
                            <ItemsControl ItemsSource="{TemplateBinding TemplateGroups}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock Text="{Binding Name}" Foreground="white" />
                                            <ItemsControl ItemsSource="{Binding Templates}">
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <StackPanel Orientation="Horizontal" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Grid>
                                                            <Button HorizontalContentAlignment="Center" Margin="2" Command="{Binding Editor.Add}" CommandParameter="{Binding TypeID}" ToolTipService.ToolTip="{Binding Name}">
                                                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
                                                                    <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{Binding Symbol}" />
                                                                </StackPanel>
                                                            </Button>
                                                        </Grid>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="TemplatePicker2Columns" TargetType="{x:Type esri:TemplatePicker}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type esri:TemplatePicker}">
                            <esriPrimitives:TemplatePanel Templates="{TemplateBinding Templates}" StackCount="2" StackDirection="Vertical">
                                <esriPrimitives:TemplatePanel.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Button HorizontalContentAlignment="Center" Margin="2" Command="{Binding Editor.Add}" CommandParameter="{Binding TypeID}" ToolTipService.ToolTip="{Binding Name}">
                                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
                                                    <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{Binding Symbol}" />
                                                </StackPanel>
                                            </Button>
                                        </Grid>
                                    </DataTemplate>
                                </esriPrimitives:TemplatePanel.ItemTemplate>
                            </esriPrimitives:TemplatePanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="TemplatePickerGrouped2Columns" TargetType="{x:Type esri:TemplatePicker}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type esri:TemplatePicker}">
                            <ItemsControl ItemsSource="{TemplateBinding TemplateGroups}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel>
                                            <TextBlock Text="{Binding Name}" Foreground="white" />
                                            <esriPrimitives:TemplatePanel Templates="{Binding Templates}" StackCount="2" StackDirection="Vertical">
                                                <esriPrimitives:TemplatePanel.ItemTemplate>
                                                    <DataTemplate>
                                                        <Grid>
                                                            <Button HorizontalContentAlignment="Center" Margin="2" Command="{Binding Editor.Add}" CommandParameter="{Binding TypeID}" ToolTipService.ToolTip="{Binding Name}">
                                                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical">
                                                                    <esriPrimitives:SymbolDisplay Height="25" Width="30" Symbol="{Binding Symbol}" />
                                                                </StackPanel>
                                                            </Button>
                                                        </Grid>
                                                    </DataTemplate>
                                                </esriPrimitives:TemplatePanel.ItemTemplate>
                                            </esriPrimitives:TemplatePanel>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <esri:Map x:Name="MyMap" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" 
                                Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            <esri:FeatureLayer ID="Evacuation Perimeter" DisableClientCaching="True" 
                               AutoSave="True"
                               Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1"/>
            <esri:FeatureLayer ID="Points of Interest" DisableClientCaching="True" 
                               AutoSave="True"
                               Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0"/>
        </esri:Map>



        <StackPanel HorizontalAlignment="Right" Orientation="Vertical">
            <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                        HorizontalAlignment="Right"  VerticalAlignment="Top"
                        Padding="5" BorderBrush="Black" Margin="5">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="Grouped by Layer" FontWeight="Bold" Foreground="White"/>
                    <esri:TemplatePicker Map="{Binding ElementName=MyMap, Mode=OneWay}"
                              LayerIDs="Points of Interest,Evacuation Perimeter" 
                              Style="{StaticResource TemplatePickerGroupedByLayer}"/>
                </StackPanel>
            </Border>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                        HorizontalAlignment="Right"  VerticalAlignment="Top"
                        Padding="5" BorderBrush="Black" Margin="5">
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Two Columns" FontWeight="Bold" Foreground="White"/>
                        <esri:TemplatePicker Map="{Binding ElementName=MyMap, Mode=OneWay}"
                                 LayerIDs="Points of Interest,Evacuation Perimeter" 
                                 Style="{StaticResource TemplatePicker2Columns}"/>
                    </StackPanel>
                </Border>
                <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                        HorizontalAlignment="Right"  VerticalAlignment="Top"
                        Padding="5" BorderBrush="Black" Margin="5">
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontWeight="Bold" Foreground="White">
                            Grouped by Layer<LineBreak></LineBreak>Two Columns
                        </TextBlock>

                        <esri:TemplatePicker Map="{Binding ElementName=MyMap, Mode=OneWay}"
                                 LayerIDs="Points of Interest,Evacuation Perimeter" 
                                 Style="{StaticResource TemplatePickerGrouped2Columns}"/>
                    </StackPanel>
                </Border>
            </StackPanel>
        </StackPanel>

        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,10,0"  >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5">
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15" />
            <TextBlock x:Name="ResponseTextBlock" Text="Select a template from one of the custom styled pickers, and draw a feature on the map." 
                       Width="200" TextAlignment="Left" Margin="30,20,30,30" TextWrapping="Wrap" Foreground="Black"/>
        </Grid>
    </Grid>
</UserControl>

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ArcGISWPFSDK
{
    public partial class ToolkitTemplatePickerStyles : UserControl
    {
        public ToolkitTemplatePickerStyles()
        {
            InitializeComponent();
        }


    }
}

VB.NET

Imports System.Collections.Generic
Imports System.Linq
Imports System.Net
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes

Namespace ArcGISWPFSDK
    Partial Public Class ToolkitTemplatePickerStyles
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace