Как создать пользовательскую кнопку с изображением, меткой и событием click?

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

Звучит как забавный проект! Я применил привязку данных к вложенным элементам управления содержимым внутри кнопки, прежде чем использовать объявления, подобные приведенным ниже. Таким образом, в вашем случае коллекция push pin будет привязана к элементам управления с каждым объектом push-pin, предоставляющим данные для соответствующей кнопки (включая вложенное изображение кнопки и текстовый блок).

Давайте рассмотрим простой пример, который, я надеюсь, поможет вам в правильном направлении.

Чтобы начать, вот пример шаблона кнопки, который вы можете определить в словаре ресурсов по вашему выбору. Обратите внимание, что видимость связывания на изображение и текст связывания на TextBlock, эти свойства будут расположены на 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> 

В вашей основной точки зрения, где отображаются ваши PushPins вы можете иметь какой-то контроля элементов, ответственных за отображение ваших кнопок. Вот пример такого элемента управления, в котором шаблон данных представляет собой кнопку с двумя важными функциями: 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; 
    } 
} 

К сожалению потребовалось некоторое время, чтобы вернуться к вам, сумасшедший день сегодня, надеюсь, что это выручает.