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>

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

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

我知道我的第二个例子非常丑陋，但我试图使视觉效果正确 - 我将根据视觉效果的需要对其进行修改，但目前，我需要弄清楚如何绑定图像和代码中的文本。按钮单击事件现在仅适用于消息框（以显示它已注册click事件）。

感谢您的协助。

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

抱歉，今天疯狂的一天回到你身边需要一段时间，希望这会有所帮助。

如何使用图像，标签和点击事件创建自定义图钉？

1 个答案: