WPF C#俄罗斯方块：实现暂存功能后，如何绑定暂存方块图片到UI？

核心思路 #

通过MVVM模式实现数据绑定，利用INotifyPropertyChanged接口通知UI更新，将暂存方块的图片路径绑定到Image控件的Source属性。

步骤1：ViewModel实现属性通知 #

确保你的ViewModel实现INotifyPropertyChanged，并创建可绑定的图片路径属性，同时在暂存操作后更新该属性：

using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class TetrisViewModel : INotifyPropertyChanged
{
    private Stack<Tetromino> _holdStack;
    private string _holdImageUri;

    // 绑定到UI的图片路径属性
    public string HoldImageUri
    {
        get => _holdImageUri;
        set
        {
            if (_holdImageUri != value)
            {
                _holdImageUri = value;
                OnPropertyChanged();
            }
        }
    }

    public TetrisViewModel()
    {
        _holdStack = new Stack<Tetromino>();
        UpdateHoldPreviewImage(); // 初始化时加载空状态图片
    }

    // 更新暂存预览图片的方法
    private void UpdateHoldPreviewImage()
    {
        if (_holdStack.Count > 0)
        {
            var topTetromino = _holdStack.Top(); // 你的栈顶获取方法
            HoldImageUri = holdImgUri(topTetromino.Index); // 你的图片路径生成方法
        }
        else
        {
            // 暂存为空时显示默认图片
            HoldImageUri = "pack://application:,,,/Resources/EmptyHold.png";
        }
    }

    // 暂存方块的业务方法（示例）
    public void PerformHold(Tetromino currentTetromino)
    {
        // 你的暂存逻辑：比如压入栈或交换方块
        _holdStack.Push(currentTetromino);
        UpdateHoldPreviewImage(); // 更新UI绑定
    }

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

步骤2：XAML绑定Image控件 #

将ViewModel设置为UI的DataContext，然后绑定Image的Source属性：

<Window x:Class="TetrisApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TetrisApp"
        Title="Tetris" Height="450" Width="800">
    <Window.DataContext>
        <local:TetrisViewModel />
    </Window.DataContext>

    <Grid>
        <!-- 暂存方块预览区域 -->
        <StackPanel>
            <TextBlock Text="暂存方块" Margin="0 5"/>
            <Image Source="{Binding HoldImageUri, Mode=OneWay}"
                   Width="60" Height="60"
                   Stretch="Uniform"/>
        </StackPanel>
    </Grid>
</Window>

关键注意事项 #

• 图片路径格式：如果图片是项目内嵌资源，需使用pack URI格式，例如pack://application:,,,/TetrisApp;component/Images/I_Block.png（替换为你的程序集名称和图片路径），确保图片的生成操作设置为Resource。
• 路径转换问题：如果直接绑定字符串路径不生效，可添加一个转换器手动转换为ImageSource：

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media.Imaging;

public class UriToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string uriStr && !string.IsNullOrEmpty(uriStr))
        {
            try
            {
                return new BitmapImage(new Uri(uriStr, UriKind.RelativeOrAbsolute));
            }
            catch
            {
                return new BitmapImage(new Uri("pack://application:,,,/Resources/DefaultError.png"));
            }
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在XAML中引用转换器：

<Window.Resources>
    <local:UriToImageSourceConverter x:Key="UriToImgConverter"/>
</Window.Resources>

<Image Source="{Binding HoldImageUri, Converter={StaticResource UriToImgConverter}, Mode=OneWay}"/>

触发UI更新 #

每次执行暂存操作（比如用户点击暂存按钮）时，调用ViewModel的PerformHold方法，该方法会更新HoldImageUri属性并触发PropertyChanged事件，UI会自动刷新预览图片。

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