如何在WPF中实现图片间焦点切换及红色边框联动？

1. 统一设置所有Image的边框样式 #

直接通过WPF的Style资源批量控制所有Image的边框属性，无需逐个配置。在Window的Resources中定义针对Image的样式，包含默认边框和焦点状态的样式切换：

<Window.Resources>
    <Style TargetType="Image">
        <!-- 默认边框配置 -->
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <!-- 允许Image接收焦点 -->
        <Setter Property="IsTabStop" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="150"/>
        <Setter Property="Stretch" Value="Uniform"/>
        
        <!-- 焦点状态触发红色边框 -->
        <Style.Triggers>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="BorderBrush" Value="Red"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

2. 左右方向键切换焦点 #

有两种实现方式，按需选择：

方式1：内置键盘导航（简单快捷） #

给包含Image的容器（如StackPanel、WrapPanel）设置KeyboardNavigation.DirectionalNavigation="Cycle"，左右方向键会自动在子元素间循环切换焦点，无需后台代码：

<StackPanel KeyboardNavigation.DirectionalNavigation="Cycle" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Image Source="Images/image1.jpg"/>
    <Image Source="Images/image2.jpg"/>
    <Image Source="Images/image3.jpg"/>
</StackPanel>

方式2：手动处理按键（自定义逻辑更灵活） #

如果需要跳过特定元素或自定义切换规则，在Window的PreviewKeyDown事件中手动控制焦点移动：

先在XAML绑定事件：

<Window x:Class="WpfApp.MainWindow"
        ...
        PreviewKeyDown="Window_PreviewKeyDown">

后台代码实现：

private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
{
    var focusedElement = Keyboard.FocusedElement as UIElement;
    if (focusedElement == null) return;

    switch (e.Key)
    {
        case Key.Left:
            focusedElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Previous));
            e.Handled = true;
            break;
        case Key.Right:
            focusedElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
            e.Handled = true;
            break;
    }
}

3. Enter键触发焦点Image的操作 #

同样在PreviewKeyDown事件中处理Enter键，获取当前焦点的Image并执行业务逻辑：

在上述Window_PreviewKeyDown方法中添加case分支：

case Key.Enter:
    if (focusedElement is Image targetImage)
    {
        // 替换为你的业务操作，比如打开图片详情、执行命令等
        MessageBox.Show($"触发操作：选中图片源为 {targetImage.Source}");
    }
    e.Handled = true;
    break;

如果遵循MVVM模式，也可以给Image绑定Command实现解耦：

1. 定义RelayCommand类：

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Func<object, bool> _canExecute;

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke(parameter) ?? true;

    public void Execute(object parameter) => _execute(parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

2. 在MainWindow中定义命令并绑定DataContext：

public ICommand ImageEnterCommand { get; }

public MainWindow()
{
    InitializeComponent();
    ImageEnterCommand = new RelayCommand(ExecuteImageEnter);
    DataContext = this;
}

private void ExecuteImageEnter(object parameter)
{
    if (parameter is Image targetImage)
    {
        MessageBox.Show($"通过命令触发操作：{targetImage.Source}");
    }
}

3. XAML中给Image绑定Command：

<Image Source="Images/image1.jpg" Command="{Binding ImageEnterCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}"/>

完整代码示例 #

MainWindow.xaml #

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Image Focus Demo" Height="450" Width="800"
        PreviewKeyDown="Window_PreviewKeyDown">
    <Window.Resources>
        <Style TargetType="Image">
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="150"/>
            <Setter Property="Stretch" Value="Uniform"/>
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="BorderBrush" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel KeyboardNavigation.DirectionalNavigation="Cycle" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Image Source="Images/image1.jpg"/>
        <Image Source="Images/image2.jpg"/>
        <Image Source="Images/image3.jpg"/>
    </StackPanel>
</Window>

MainWindow.cs #

using System.Windows;
using System.Windows.Input;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_PreviewKeyDown(object sender, KeyEventArgs e)
        {
            var focusedElement = Keyboard.FocusedElement as UIElement;
            if (focusedElement == null) return;

            switch (e.Key)
            {
                case Key.Left:
                    focusedElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Previous));
                    e.Handled = true;
                    break;
                case Key.Right:
                    focusedElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
                    e.Handled = true;
                    break;
                case Key.Enter:
                    if (focusedElement is Image targetImage)
                    {
                        MessageBox.Show($"当前选中图片：{targetImage.Source}");
                    }
                    e.Handled = true;
                    break;
            }
        }
    }
}

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