使用 UWP MapItemsControl 的多个 DataTemplates

Question

我在 UWP 中有一个MapControl：

<maps:MapControl x:Name="BikeMap" ZoomLevel="17" Center="{Binding CenterPoint, Mode=TwoWay}">
    <maps:MapItemsControl x:Name="MapItems" ItemsSource="{Binding BikePoints}"
                        ItemTemplate="{StaticResource BikePointTemplate}"/>
</maps:MapControl>

我正在使用 XAML 数据模板添加 MapElements，我的 ItemsSource 是一个简单对象的列表。

但是，UWP 似乎没有提供指定DataTemplate 的DataType 的方法，而MapItemsControl 没有用于设置DataTemplateSelector 的属性。

有谁知道我如何在 MapItemsControl 中使用多个数据模板并根据 ItemsSource 中的对象类型选择相关数据模板？

Answer 1

MapItemsControl Class 没有用于设置DataTemplateSelector 的属性。为了实现您想要的，我们可以利用ContentControl，将其设置为DataTemplate 中的模板内容，然后使用ContentControl.ContentTemplateSelector 属性设置DataTemplateSelector。

以下是一个简单的示例：

XAML：

<Page x:Class="UWPApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:UWPApp"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="GreenDataTemplate">
            <StackPanel Background="Green">
                <TextBlock Margin="5"
                           Maps:MapControl.Location="{Binding Location}"
                           Maps:MapControl.NormalizedAnchorPoint="0.5,0.5"
                           FontSize="20"
                           Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="RedDataTemplate">
            <StackPanel Background="Red">
                <TextBlock Margin="5"
                           Maps:MapControl.Location="{Binding Location}"
                           Maps:MapControl.NormalizedAnchorPoint="0.5,0.5"
                           FontSize="20"
                           Text="{Binding Name}" />
            </StackPanel>
        </DataTemplate>

        <local:MyTemplateSelector x:Key="MyTemplateSelector" GreenTemplate="{StaticResource GreenDataTemplate}" RedTemplate="{StaticResource RedDataTemplate}" />
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Maps:MapControl x:Name="MyMap" MapServiceToken="MapServiceToken">
            <Maps:MapItemsControl x:Name="MyMapItemsControl" ItemsSource="{Binding}">
                <Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource MyTemplateSelector}" />
                    </DataTemplate>
                </Maps:MapItemsControl.ItemTemplate>
            </Maps:MapItemsControl>
        </Maps:MapControl>
    </Grid>
</Page>

代码隐藏：

public class MyTemplateSelector : DataTemplateSelector
{
    public DataTemplate GreenTemplate { get; set; }
    public DataTemplate RedTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item != null)
        {
            if (item is GreenPOI)
            {
                return GreenTemplate;
            }

            return RedTemplate;
        }

        return null;
    }
}

public class POI
{
    public string Name { get; set; }

    public Geopoint Location { get; set; }
}

public class GreenPOI : POI { }

public class RedPOI : POI { }

这只是一个例子。在示例中，我使用了两个不同背景的数据模板，并创建了一个自定义DataTemplateSelector，可以根据对象类型选择DataTemplate。而如果你有几种对象类型，也可以参考这个答案：How to associate view with viewmodel or multiple DataTemplates for ViewModel?