如何在 C# WPF 应用程序中切换图像？

Question

我正在尝试制作一个在硬币正面符号图像和硬币反面图像之间切换的应用程序。但是，每次我按下“正面”按钮或“反面”按钮时，都会发生错误。如何修复我的代码以使图像成功切换？

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，您可能想要两个 Images，例如，@ 987654324@ 和coinTailsImage，并在Click 处理程序中翻转它们各自的Visibility 属性。将两个 Images 包裹在它们自己的公共 Grid 中，以便它们在可视化树中重叠。我不是 100% 肯定，但我相信更改 Visibility 的 Images 在速度方面比设置 Source 属性更有效，无论哪种方式，它都会是更好的架构，因为你可以绑定Visibility 属性直接转换为代码隐藏或视图模型中假设的 IsHeads 属性，当然要使用适当的转换器。

此外，任何时候使用as 语法时，通常都应该检查null 的结果。与简单的类型转换不同，如果在使用as 时对象无法转换为所需的类型，则不会出现异常。如果你检查了null，你就会在那里发现你的错误。