Есть несколько подходов к решению вашей проблемы.
Рассмотрим один из них:
1.
Добавляете изображения в ресурсы (Удобно создать папку Images
).
2.
В вашей VM
создаете свойство IsFirstImage
, которое будет отвечать за то, какая картинка будет отображена в вашем Image
private bool isFirstImage;
public bool IsFirstImage
{
get { return isFirstImage; }
set { isFirstImage = value; OnPropertyChanged("IsFirstImage"); }
}
3.
Создаете команду, которая отвечает за обработку нажатия кнопки:
private ICommand clickCommand;
public ICommand ClickCommand
{
get { return clickCommand; }
set { clickCommand = value; }
}
4.
Остается написать функцию, которая будет изменять значение на противоположное:
private void changeImage()
{
IsFirstImage = !IsFirstImage;
}
5.
Конструктор VM:
public MainViewModel()
{
clickCommand = new RelayCommand(_ => changeImage());
}
6.
Дальше описываете разметку:
<Window.DataContext>
<local:MainViewModel />
</Window.DataContext>
<Window.Resources>
<Style x:Key="image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsFirstImage}" Value="True">
<Setter Property="Image.Source" Value="Images/Koala.jpg" />
</DataTrigger>
<DataTrigger Binding="{Binding IsFirstImage}" Value="False">
<Setter Property="Image.Source" Value="Images/Penguins.jpg" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0"
HorizontalAlignment="Right"
Command="{Binding ClickCommand}"
Content="Click" />
<Image Grid.Row="1"
Style="{StaticResource ResourceKey=image}" />
</Grid>
Триггер данных позволяет установить отображаемую картинку в зависимости от значения вашего свойства.
Код для RelayCommand
и реализацию интерфейса INotifyPropertyChanged
не привожу, чтобы не загромождать ответ.
Результат получается следующим:
