WPF中WrapPanel内Border单选选中状态的简洁实现方案

你可以通过路由事件+样式触发器的组合来实现，无需遍历子元素或MVVM框架，代码简洁且符合WPF原生机制：

步骤1：修改Border样式，添加选中状态触发器 #

在Window的Resources里更新Style，增加DataTrigger判断当前Border是否为WrapPanel标记的选中元素：

<Window.Resources>
    <Style x:Key="b" TargetType="Border">
        <Style.Setters>
            <Setter Property="Width" Value="200" />
            <Setter Property="Height" Value="200" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Margin" Value="4" />
        </Style.Setters>
        <!-- 选中状态触发器 -->
        <Style.Triggers>
            <DataTrigger 
                Binding="{Binding RelativeSource={RelativeSource AncestorType=WrapPanel}, Path=Tag}" 
                Value="{Binding RelativeSource={RelativeSource Self}}">
                <Setter Property="BorderBrush" Value="Red" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

步骤2：给WrapPanel绑定路由事件 #

利用路由事件的传递特性，只需在WrapPanel上绑定一次事件，即可捕获所有子Border的点击：

<WrapPanel PreviewMouseLeftButtonDown="WrapPanel_PreviewMouseLeftButtonDown">
    <Border Style="{StaticResource b}" />
    <Border Style="{StaticResource b}" />
    <Border Style="{StaticResource b}" />
    <Border Style="{StaticResource b}" />
</WrapPanel>

步骤3：实现事件处理逻辑 #

在Window后台代码中，将WrapPanel的Tag属性设为当前点击的Border，触发器会自动处理样式切换：

private void WrapPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var wrapPanel = sender as WrapPanel;
    var clickedBorder = e.OriginalSource as Border;
    
    if (clickedBorder != null && wrapPanel != null)
    {
        wrapPanel.Tag = clickedBorder;
    }
}

方案说明 #

• 路由事件特性：PreviewMouseLeftButtonDown是隧道事件，会从子元素向上传递到WrapPanel，无需给每个Border单独绑定事件
• 自动样式更新：当WrapPanel的Tag变更时，所有Border的DataTrigger会自动检测自身是否匹配Tag，匹配的变红，不匹配的恢复黑色，无需手动遍历修改元素属性
• 无额外依赖：完全基于WPF原生特性实现，不需要任何框架或MVVM模式

内容的提问来源于stack exchange，提问作者J. hlz