如何用圖像，標籤和點擊事件創建自定義圖釘？

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

抱歉過了好一會兒要回你，今天瘋狂的一天，希望這有助於出去。