Давайте я покажу вам как вы должны делать это по канонам 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();
}
Можно запускать!

((sender as Button).Content as Image).Source
- так не работает?Button'ов
(в частности проToggleButton
)