Как создать персонализированный значок с изображением, меткой и событием клика? - PullRequest
0 голосов
/ 28 февраля 2012

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

Я начал с этого кода, из этой статьи: 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>

Все еще не победитель - я не могу связатьсодержимое кнопки и, следовательно, текстовый блок.

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

Я знаю, что мой второй пример довольно уродлив, но я пытался сделать визуальный вид правильным - я изменю егопо мере необходимости для визуальных элементов, но на данный момент мне нужно выяснить, как я могу связать изображение и текст из кода.Событие нажатия кнопки пока работает только с окном сообщений (чтобы показать, что оно зарегистрировало событие нажатия).

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 28 февраля 2012

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

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

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

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

...