如何在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的說法，因爲這是按鈕，而不是圖像控制。

使用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

克萊門斯是絕對正確的，他的第二個選擇是遠遠優越的，因爲它不會重新加載位圖每次你fli他們。但是，如果我可能會建議一個更好的替代方案（恕我直言），而不是每次更改的coinImage，而不是每次更改Image s，例如coinHeadsImage和coinTailsImage，並將其翻轉在那些Click處理程序中各自的Visibility屬性。將兩個Image包裝在它們自己的共同Grid中，以便它們在視覺樹中重疊。我不是100％確定的，但我認爲改變Images的Visibility會比設置Source屬性更有效，不管怎樣，它會是更好的體系結構，因爲您可以將Visibility屬性直接綁定到假設IsHeads屬性在您的代碼隱藏或視圖模型中，當然使用適當的轉換器。

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