如何创建带有图像、标签和点击事件的自定义图钉？

Question

我正在开发一个位置感知应用程序，我希望在其中拥有具有图像的自定义图钉，并且当您点击图像时，会添加一个标签。我已经尝试了几个解决方案...

我从这段代码开始，来自这篇文章：http://igrali.wordpress.com/2011/12/06/making-a-custom-windows-phone-bing-pushpin-from-an-image/

<ControlTemplate
        x:Key="PushpinMe"
        TargetType="maps:Pushpin">
        <Grid
            Name="PushpinMeGrid"
            Height="50"
            Width="50"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Image
                    x:Name="PushpinMeImage"
                    Height="50"
                    Width="50"
                    Source="Pushpins/pushpinSeaplane.png" />
            <TextBlock Text="{Binding Source=}"
        </Grid>
    </ControlTemplate>

然后我尝试将图像包装在一个按钮中，但这只会使图钉基本上不可见。然后我尝试使用我以前的一个应用程序中的控制模板，并对其进行了修改，并提出了这个：

        <Button
            Name="PushpinButton"
            Click="Button_Click">
            <Button.Style>
                <Style
                    TargetType="Button">
                    <Setter
                        Property="Template">
                        <Setter.Value>
                            <ControlTemplate
                                TargetType="Button">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition
                                            Width="*" />
                                        <ColumnDefinition
                                            Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Image
                                        Grid.Column="0"
                                        Grid.Row="0"
                                        Grid.RowSpan="2"
                                        Height="50"
                                        Width="50"
                                        Source="Pushpins/pushpinSeaplane.png" />

                                    <Grid
                                        Grid.Column="1">

                                        <Grid.RowDefinitions>
                                            <RowDefinition
                                                Height="39" />
                                            <RowDefinition
                                                Height="*" />
                                        </Grid.RowDefinitions>

                                        <Grid
                                            Grid.Row="0"
                                            Background="Black">
                                            <TextBlock
                                                Grid.Row="0"
                                                Foreground="White"
                                                Text="{Binding ElementName=me,
                                                  Path=Content}"
                                                TextWrapping="Wrap"
                                                Margin="5" />
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>

    </ControlTemplate>

仍然不是赢家 - 我无法绑定按钮的内容，因此也无法绑定文本块。

会有一系列图钉，有不同的图像，不同的标签，所以理想情况下，我想拿出一个我可以使用的模板，并从代码中绑定图像和标签。按钮单击事件的代码就像使文本块可见或折叠一样简单。

我知道我的第二个示例非常丑陋，但我试图使视觉效果看起来正确 - 我会根据视觉效果对其进行修改，但目前，我需要弄清楚如何绑定图像和代码中的文本。按钮点击事件现在只与一个消息框一起工作（表明它注册了点击事件）。

感谢您的帮助。

Answer 1

听起来是个有趣的项目！在使用类似于以下的声明之前，我已经在按钮内的嵌套内容控件上实现了数据绑定。因此，在您的情况下，图钉集合将绑定到项目控件，每个图钉对象为其相应的按钮（包括按钮的嵌套图像和文本块）提供数据。

让我们看一个简单的例子，希望能指引你正确的方向。

首先是一个按钮模板示例，您可以在您选择的资源字典中定义它。注意图像上的可见性绑定和文本块上的文本绑定，这些属性将位于我们稍后定义的 Pushpin_ViewModel 上：

    <Style x:Name="PushpinButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Height="50" Width="50" Source="Pushpins/pushpinSeaplane.png" Visibility="{Binding PushpinImageVisibility}" />
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="39" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" Background="Black">
                                <TextBlock Grid.Row="0" Foreground="White"  Text="{Binding PushpinLabelText}" TextWrapping="Wrap" Margin="5" />
                            </Grid>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在显示图钉的主视图中，您可能有某种项目控件负责显示图钉。下面是这样一个项目控件的示例，其中数据模板是一个具有两个重要特性的按钮：1）我们在上面定义的按钮样式和 2）将调用相应图钉视图模型上的切换方法的单击事件：

<ItemsControl ItemsSource="{Binding Pushpins}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Name="PushpinButton" Click="pushpinButton_Click" DataContext="{Binding}" Style="{StaticResource PushpinButtonStyle}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

private void pushpinButton_Click(object sender, RoutedEventArgs e)
{
    Pushpin_ViewModel pushpin_ViewModel = ((Button)sender).DataContext as Pushpin_ViewModel;
    pushpin_ViewModel.TogglePushpinVisibility();
}

以下视图模型类将表示您的主视图（包含我们上面定义的项目控件的视图）的数据上下文。这里我们有填充项目控件的图钉集合：

public class PrimaryPushpinView_ViewModel : INotifyPropertyChanged
{
    public PushpinView_ViewModel()
    {
        this.Pushpins.Add(new Pushpin_ViewModel() { PushpinLabelText="First Pushpin" });
    }

    public List<Pushpin_ViewModel> Pushpins
    {
        get { return pushpins; }
        set
        {
            if (value != pushpins)
            {
                pushpins = value;
                OnPropertyChanged("Pushpins");
            }
        }
    }
    private List<Pushpin_ViewModel> pushpins = new List<Pushpin_ViewModel>();
}

最后是图钉视图模型的表示。在您的图钉集合中，每个图钉都会有一个此类的实例：

public class Pushpin_ViewModel : INotifyPropertyChanged
{
    public Visibility PushpinVisibility
    {
        get { return pushpinVisibility; }
        set
        {
            if (value != pushpinVisibility)
            {
                pushpinVisibility= value;
                OnPropertyChanged("PushpinVisibility");
            }
        }
    }
    private Visibility pushpinVisibility;

    public String PushpinLabelText
    {
        get { return pushpinLabelText; }
        set
        {
            if (value != pushpinLabelText)
            {
                pushpinLabelText= value;
                OnPropertyChanged("PushpinLabelText");
            }
        }
    }
    private String pushpinLabelText;

    public void TogglePushpinVisibility()
    {
        this.PushpinVisibility = this.PushpinVisibility.Equals(Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
    }
}

很抱歉，今天很疯狂，很抱歉，您过了一段时间才回复您，希望对您有所帮助。