rjkiv rjkiv - 2 months ago 8
C# Question

How to switch images in a C# WPF application?

I am trying to make an application that switches between an image of the heads sign of a coin and the tails side of a coin. However, every time I press either the "heads" button or the "tails" button, an error occurs. How can I fix my code so that the image successfully switches?

XAML:

<Window x:Class="HeadsOrTails.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:HeadsOrTails"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Image
x:Name="coinImage"
HorizontalAlignment="Center"
Height="100"
Margin="43,10,374,209"
VerticalAlignment="Center"
Width="100"
Loaded="Image_Loaded"/>
<Button x:Name="tailsButton" Content="Show Tails" HorizontalAlignment="Center" Height="40" Margin="190,214,197,65" VerticalAlignment="Center" Width="130" Click="tailsButton_Click"/>
<Button x:Name="headsButton" Content="Show Heads" HorizontalAlignment="Center" Height="40" Margin="43,214,344,65" VerticalAlignment="Center" Width="130" Click="headsButton_Click"/>
<Button x:Name="exitButton" Content="Exit" HorizontalAlignment="Center" Height="40" Margin="339,214,48,65" VerticalAlignment="Center" Width="130" Click="exitButton_Click"/>

</Grid>
</Window>


C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Media;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace HeadsOrTails
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void Image_Loaded(object sender, RoutedEventArgs e)
{

}

private void tailsButton_Click(object sender, RoutedEventArgs e)
{
//create a second bitmap image (tails)
BitmapImage c = new BitmapImage();
c.BeginInit();
c.UriSource = new Uri(@"C:\Users\Raymond\Documents\Visual Studio 2015\Projects\HeadsOrTails\tails.jpg");
c.EndInit();

var image = sender as Image;
image.Source = c;
}

private void headsButton_Click(object sender, RoutedEventArgs e)
{
//create the new bitmap image (heads)
BitmapImage b = new BitmapImage();
b.BeginInit();
b.UriSource = new Uri(@"C:\Users\Raymond\Documents\Visual Studio 2015\Projects\HeadsOrTails\heads.jpg");
b.EndInit();

var image = sender as Image;
image.Source = b;
}

private void exitButton_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
}
}

Answer

You can't use the sender argument, because that's the Button, not the Image control.

Use the coinImage member instead:

private void headsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = new BitmapImage(new Uri(@"C:\Users\Raymond Karrenbauer\Documents\Visual Studio 2015\Projects\HeadsOrTails\heads.jpg"));
}

private void tailsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = new BitmapImage(new Uri(@"C:\Users\Raymond Karrenbauer\Documents\Visual Studio 2015\Projects\HeadsOrTails\tails.jpg"));
}

Besides that, you should add both image files to your Visual Studio project, set their Build Action to Resource and access them by a Resource File Pack URI. This way you wouldn't have to deal with absolute file paths:

private void headsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = new BitmapImage(new Uri("pack://application:,,,/heads.jpg"));
}

private void tailsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = new BitmapImage(new Uri("pack://application:,,,/tails.jpg"));
}

You may then also add the BitmapImages as XAML Resources:

<Window ...>
    <Window.Resources>
        <BitmapImage x:Key="heads" UriSource="heads.png"/>
        <BitmapImage x:Key="tails" UriSource="tails.png"/>
    </Window.Resources>
    ...
</Window>

And use them like this:

private void headsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = (ImageSource)Resources["heads"];
}

private void tailsButton_Click(object sender, RoutedEventArgs e)
{
    coinImage.Source = (ImageSource)Resources["tails"];
}