Reusable DataTemplate. How to specify? Need syntax assistance

Question

This is my control with my custom DataTemplateSelector:

<m:Map x:Name="MainMap">
            <m:MapItemsControl 
                ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
                <m:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Mobile:DevicePushpinTemplateSelector 
                            m:MapLayer.Position="{Binding Location}" 
                            ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}" 
                            Content="{Binding}">
                            <Mobile:DevicePushpinTemplateSelector.DotTemplate>
                                <DataTemplate>
                                    <Ellipse Width="8" Height="8" Stroke="Black" Fill="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" StrokeThickness="1" /> 
                                </DataTemplate>
                            </Mobile:DevicePushpinTemplateSelector.DotTemplate>
                            <Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
                                <DataTemplate>
                                    <Border x:Name="border" Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="2" Padding="2" Height="20" CornerRadius="8">
                                        <TextBlock  VerticalAlignment="Center" Text="{Binding DisplayId}" />
                                    </Border>                                  
                                </DataTemplate>
                            </Mobile:DevicePushpinTemplateSelector.NumberedTemplate>
                            <Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
                                <DataTemplate>  

                                    <Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <TextBlock  Text="Id:" FontWeight="Bold" />
                                            <TextBlock  Text="{Binding DisplayId}" Grid.Column="1" />
                                            <TextBlock  Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
                                            <TextBlock  Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
                                            <TextBlock  Text="Speed:" FontWeight="Bold" Grid.Row="2" />
                                            <TextBlock  Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
                                            <TextBlock  Text="Location:" FontWeight="Bold" Grid.Row="3" />
                                            <TextBlock  Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
                                            <Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
                                        </Grid>                                        
                                    </Border>
                                </DataTemplate>
                            </Mobile:DevicePushpinTemplateSelector.DetailedTemplate>
                        </Mobile:DevicePushpinTemplateSelector>
                    </DataTemplate>
                </m:MapItemsControl.ItemTemplate>
            </m:MapItemsControl>
        </m:Map>

I want to move my Mobile:DevicePushpinTemplateSelector.DetailedTemplate into resources so I can reuse it somewhere else.

I declared resource:

<UserControl.Resources>
        <DataTemplate x:Key="DetailedMapItemTemplate">
            <Border Background="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" BorderBrush="Black" BorderThickness="1" Padding="2" CornerRadius="2">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock  Text="Id:" FontWeight="Bold" />
                    <TextBlock  Text="{Binding DisplayId}" Grid.Column="1" />
                    <TextBlock  Text="Device Id:" FontWeight="Bold" Grid.Row="1" />
                    <TextBlock  Text="{Binding DeviceId}" Grid.Row="1" Grid.Column="1" />
                    <TextBlock  Text="Speed:" FontWeight="Bold" Grid.Row="2" />
                    <TextBlock  Text="{Binding Speed}" Grid.Row="2" Grid.Column="1" />
                    <TextBlock  Text="Location:" FontWeight="Bold" Grid.Row="3" />
                    <TextBlock  Text="{Binding Location}" Grid.Row="3" Grid.Column="1" />
                    <Button Content="View Details" Grid.Row="4" Grid.ColumnSpan="2" />
                </Grid>
            </Border>
        </DataTemplate>
    </UserControl.Resources>

My problem is that I don't know HOW to use this DataTemplate inside my selector. What is the XAML I need to use? With controls like ListBox it is easy, just set ItemTemplate="{StaticResource thisTemplate}" but how do I do this in my case? Still learning XAML

Answer 1

Just set the DetailedTemplate property in the tag itself:

<Mobile:DevicePushpinTemplateSelector
          m:MapLayer.Position="{Binding Location}" 
          ZoomLevel="{Binding ZoomLevel, ElementName=MainMap}" 
          Content="{Binding}"
          DetailedTemplate="{StaticResource DetailedMapItemTemplate}">
          ...