1

Есть такой код:

<ItemsControl HorizontalContentAlignment="Stretch" x:Name="tracksList" 
            Background="#ffffff" BorderBrush="#ffffff">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Height="40" Margin="1 1 2 3" Background="#f5f5f5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="50"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Button x:Name="PlayButton" Tag="{Binding}" Style="{StaticResource ImageButtonStyle}" 
                        Width="30" Height="30" Cursor="Hand" Click="PlayButton_Click">
                    <Image Source="/Resources/play-button.png" ></Image>
                </Button>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

И мне при нажатии на Button нужно изменить Source у картинки, как получить index нажатой кнопки я разобрался, делаю это таким кодом:

private void PlayButton_Click(object sender, RoutedEventArgs e)
{
    object tag = (sender as FrameworkElement).Tag;
    int index = tracksList.Items.IndexOf(tag);
}

Вопрос в том, как потом добраться до самой картинки и изменить Source именно у картинки нажатой кнопки.

4
  • 2
    ((sender as Button).Content as Image).Source - так не работает? 26 авг 2017 в 10:08
  • Работает. А если у меня будет 2 кнопки с картинками, как тогда?
    – Max
    26 авг 2017 в 10:32
  • Мне кажется вы неверно делаете. Я так понимаю, что вам нужна кнопка, при нажатие у которой меняется изображение с Play на Pause и наоборот. Я раньше делал что то подобное, посмотрите, может поможет. Также почитайте про типы Button'ов (в частности про ToggleButton)
    – EvgeniyZ
    26 авг 2017 в 10:33
  • 1
    @Max, Тогда вам будет пора переходить на MVVM, ну или хотя бы задавать Source через привязку 26 авг 2017 в 10:33

1 ответ 1

3

Давайте я покажу вам как вы должны делать это по канонам WPF, это поможет понять вам в дальнейшем суть MVVM.

Я так понимаю, что ваше приложение - что-то вроде плеера и вы выводите список треков.

Для начала возьмите классы Vm и RelayCommand из этого ответа.

Теперь давайте создадим класс представляющий трек, он прост:

class Track : Vm
{
    // Эти свойства сделаем неизменяемыми
    //  и обязательными для установки из конструктора
    public string Name { get; }
    public string Source { get; }

    public Track(string name, string source)
    {
        Name = name;
        Source = source;
    }

    // Это свойство сделаем изменяемым, поэтому
    //  оно должно вызывать PropertyChanged для оповещения об изменениях
    bool isPlays = false;
    public bool IsPlays
    {
        get => isPlays;
        set => Set(ref isPlays, value);
    }
}

Теперь главная VM, которая будет служить контекстом для окна и содержать в себе "детальные" VM:

class MainVM : Vm
{
    // Если список треков может динамически меняться
    //  то нужно использовать ObservableCollection<Track>,
    //  она оповещает при вставке/удалении элементов.
    // Иначе выставляете List или IReadOnlyList и загружаете
    //  в него данные в конструкторе.
    // Я заполнил тестовыми данными:
    public IReadOnlyList<Track> Tracks { get; } = new List<Track>
    {
        new Track("Unknown track 1", "track1.mp3"),
        new Track("Unknown track 2", "track2.mp3"),
        new Track("Unknown track 3", "track3.mp3"),
        new Track("Unknown track 4", "track4.mp3"),
        new Track("Unknown track 5", "track5.mp3"),
        new Track("Unknown track 6", "track6.mp3"),
        new Track("Unknown track 7", "track7.mp3"),
        new Track("Unknown track 8", "track8.mp3"),
        new Track("Unknown track 9", "track9.mp3"),
        new Track("Unknown track 10", "track10.mp3")
    };

    // Команда для запуска трека
    public ICommand PlayCommand { get; }

    // Мы инициализируем ее в конструкторе
    public MainVM()
    {
        PlayCommand = new RelayCommand(o => Play((Track)o));
    }

    // Метод, который "повешен" на команду
    void Play(Track track)
    {
        if (track.IsPlays)
        {
            // Останавливаем трек если он играет
            track.IsPlays = false;
            // Здесь ваша логика по остановке непосредственно воспроизведения
        }
        else
        {
            // Находим играющий трек (если он есть)
            var current = Tracks.SingleOrDefault(t => t.IsPlays);
            if (current != null)
            {
                // Останавливаем если нашли
                current.IsPlays = false;
                // Здесь ваша логика
            }
            // Запускаем выбранный
            track.IsPlays = true;
            // Здесь ваша логика
        }
    }
}

Теперь займемся представлением, разметка окна:

<Window x:Class="WpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest"
        mc:Ignorable="d" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Width="400" Height="300">

    <Grid>
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding Tracks}"
                          HorizontalContentAlignment="Stretch">

            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Window>

В ItemsSource привязываем нашу коллекцию треков.
Теперь шаблон элемента ItemsControl:

                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="40">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>

                            <Button Width="30" Height="30" Cursor="Hand">
                                <Image Source="{Binding IsPlays}"/>
                            </Button>

                            <TextBlock Grid.Column="1" Text="{Binding Name}"
                                       VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

С названием трека всё просто, обычная привязка, немного не понятно с источником изображения, у нас в VM есть bool-свойство, его нужно сконвертировать, давайте напишем соответствующий конвертер:

class IsPlaysToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var isPlays = (bool)value;
        return !isPlays ? "Play.png" : "Stop.png";
    }

    // У нас привязка односторонняя,
    //  поэтому обратное конвертирование реализовывать не требуется
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Теперь нужно добавить этот конвертер в ресурсы, например в ресурсы окна:

    <Window.Resources>
        <local:IsPlaysToImageSourceConverter x:Key="ImageSourceConv"/>
    </Window.Resources>

И указать этот конвертер в Image.Source:

Source="{Binding IsPlays, Converter={StaticResource ImageSourceConv}}"

Осталась команда, тут небольшой нюанс - сама кнопка имеет в качестве контекста Track, а команда находится в главной VM, т.е. нам нужно как-то сослаться на контекст окна. Это можно сделать либо через RelativeSource, либо указав имя окна, воспользуемся вторым способом, зададим имя окну: Name="mainWindow", в кнопке пропишем привязку к команде:

Command="{Binding DataContext.PlayCommand, ElementName=mainWindow}"

ну и команда должна принимать в параметре сам трек, это просто:

CommandParameter="{Binding}"

С окном вроде все. Полный код разметки окна доступен здесь.

Остается только задать контекст для самого окна, например, в App.xaml.cs, как написано здесь:

protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    new MainWindow { DataContext = new MainVM() }.Show();
}

Можно запускать!

PlayStop

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.