如何通过按钮点击修改XAML中Image的Source属性

方案一：纯XAML触发器实现 #

如果想完全通过XAML实现，需要借助行为库（Microsoft.Xaml.Behaviors）来监听按钮点击并修改图片源，步骤如下：

1. 添加行为库引用
   在NuGet包管理器中安装对应平台的行为库：

   • UWP项目：Microsoft.Xaml.Behaviors.Uwp.Managed
   • WinUI3项目：Microsoft.Xaml.Behaviors.WinUI.Managed

2. 修改XAML代码
   先在Page标签中添加行为命名空间，然后给目标Image控件添加x:Name，最后给按钮绑定点击触发的属性修改行为：

   <Page 
       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:Custom="using:Microsoft.UI.Xaml.Controls"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
       xmlns:core="using:Microsoft.Xaml.Interactions.Core"
       NavigationCacheMode="Enabled"
       x:Class="Phasmaphobia_Editor.Views.WebViewPage"
       Style="{StaticResource PageStyle}"
       mc:Ignorable="d">
       <Grid x:Name="ContentArea" Margin="0,0,0,0" Loaded="ContentArea_Loaded">
           <!-- 其他控件省略 -->
           <!-- 给目标Image添加x:Name -->
           <Image x:Name="mainImage" Margin="267,72,36,86" Source="/Assets/default.png"/>
           
           <!-- 示例按钮：点击修改mainImage的Source -->
           <Button Content="6 Tanglewood Dr" Height="42" Width="226" Margin="27,183,0,0" VerticalAlignment="Top" >
               <interactivity:Interaction.Behaviors>
                   <core:EventTriggerBehavior EventName="Click">
                       <core:ChangePropertyAction TargetObject="{Binding ElementName=mainImage}" 
                                                  PropertyName="Source" 
                                                  Value="/Assets/tanglewood.png"/>
                   </core:EventTriggerBehavior>
               </interactivity:Interaction.Behaviors>
           </Button>
       </Grid>
   </Page>
   

   其他按钮重复上述行为配置，替换对应的图片路径即可。

方案二：简化C#代码避免Bitmap转换错误 #

之前的Bitmap转换错误多是因为误用了System.Drawing.Bitmap，UWP/WinUI应直接使用BitmapImage加载资源，无需转换，代码更简洁可靠：

1. 修改XAML给目标Image命名

   <Image x:Name="mainImage" Margin="267,72,36,86" Source="/Assets/default.png"/>
   

2. 编写按钮点击事件
   在代码后台直接用BitmapImage加载项目内的图片资源：

   private void Button_Click(object sender, RoutedEventArgs e)
   {
       // 使用ms-appx:///前缀确保资源路径正确
       mainImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/ridgeview.png"));
   }
   
   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
       mainImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/willow.png"));
   }
   
   // 其他按钮点击事件同理，替换对应图片路径
   

如果需要更灵活的MVVM模式，可以定义一个实现INotifyPropertyChanged的视图模型，通过绑定修改图片源：

public class WebViewPageViewModel : INotifyPropertyChanged
{
    private ImageSource _mainImageSource;
    public ImageSource MainImageSource
    {
        get => _mainImageSource;
        set
        {
            _mainImageSource = value;
            OnPropertyChanged();
        }
    }

    public void UpdateImage(string imageFileName)
    {
        MainImageSource = new BitmapImage(new Uri($"ms-appx:///Assets/{imageFileName}"));
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML中绑定：

<Image Margin="267,72,36,86" Source="{x:Bind ViewModel.MainImageSource, Mode=OneWay}"/>

按钮点击时调用视图模型方法：

private void Button_Click(object sender, RoutedEventArgs e)
{
    ViewModel.UpdateImage("ridgeview.png");
}

内容的提问来源于stack exchange，提问作者Caleb Starks