如何在 C# WPF 應用程序中切換圖像？

Question

我正在嘗試制作一個在硬幣正面標志圖像和硬幣背面之間切換的應用程序。 但是，每次我按下“heads”按鈕或“tails”按鈕時，都會發生錯誤。 如何修復我的代碼以便圖像成功切換？

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 1

您不能使用sender參數，因為那是 Button，而不是 Image 控件。

改用coinImage成員：

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"));
}

---

除此之外，您應該將兩個圖像文件添加到您的 Visual Studio 項目中，將它們的Build Action設置為Resource並通過Resource File Pack URI訪問它們。 這樣您就不必處理絕對文件路徑：

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"));
}

---

然后，您還可以將 BitmapImages 添加為 XAML 資源：

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

並像這樣使用它們：

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"];
}

Answer 2

Clemens 是絕對正確的，他的第二個選擇要好得多，因為它不會在您每次翻轉位圖時重新加載它們。 但是，如果我可以為您正在做的事情提出更好的替代方案（恕我直言），而不是每次更改coinImage的Source ，您可能想要擁有兩個Image ，例如， coinHeadsImage和coinTailsImage ，並翻轉它們這些Click處理程序中的相應Visibility屬性。 將兩個Image包裹在它們自己的公共Grid以便它們在可視化樹中重疊。 我不是 100% 確定，但我相信更改Images的Visibility比設置Source屬性在速度上更有效，無論哪種方式，它都會是更好的架構，因為您可以將Visibility屬性直接綁定到假設代碼隱藏或視圖模型中的IsHeads屬性，當然使用適當的轉換器。

此外，任何時候使用as語法時，通常都應該檢查結果是否為null 。 與簡單類型轉換不同，如果在使用as時對象無法轉換為所需類型，則不會出現異常。 如果你檢查了null你就會在那里發現你的錯誤。