鼠标悬停Border元素时调整Grid ColumnDefinition宽度问题求助

你的代码存在几个关键问题导致无法修改ColumnDefinition.Width：

1. 定义的Style未应用到目标ColumnDefinition上，仅放在资源中未生效
2. ColumnDefinition.Width是GridLength类型，不是普通Double值，直接用DoubleAnimation会因类型不匹配失效
3. 动画目标值设置错误（To="1"），无法实现"占据大部分空间"的效果

以下是修正后的完整代码，附带详细优化点：

<Page x:Class="Together_Culture_CRM.LoginRegister"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Together_Culture_CRM"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="LoginRegister">

    <Page.Resources>
        <!-- 通用列悬停扩展样式，复用逻辑 -->
        <Style x:Key="ColumnHoverExpandStyle" TargetType="ColumnDefinition">
            <Setter Property="Width" Value="4*"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=TargetBorder, Path=IsMouseOver}" Value="True">
                    <!-- 鼠标进入时扩展列 -->
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- 使用ObjectAnimation适配GridLength类型，支持Star单位 -->
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Duration="0:0:0.3">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="7*"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <!-- 鼠标离开时恢复原宽度 -->
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Duration="0:0:0.3">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="4*"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Page.Resources>

    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <!-- 左侧列：应用样式并绑定到LeftBorder的悬停状态 -->
            <ColumnDefinition Name="LeftColumn" Style="{StaticResource ColumnHoverExpandStyle}"/>
            <!-- 右侧列：应用样式并绑定到RightBorder的悬停状态 -->
            <ColumnDefinition Name="RightColumn" Style="{StaticResource ColumnHoverExpandStyle}"/>
        </Grid.ColumnDefinitions>

        <!-- 左侧Border，添加背景方便测试悬停效果 -->
        <Border Name="LeftBorder"
                Margin="20,20,10,20"
                Background="#EEE">
        </Border>

        <!-- 右侧Border，添加背景方便测试悬停效果 -->
        <Border Name="RightBorder"
                Margin="10,20,20,20"
                Grid.Column="1"
                Background="#DDD">
        </Border>
    </Grid>
</Page>

关键修改说明 #

• 样式复用：将列动画逻辑提取到Page级资源中，避免重复定义
• 类型适配：使用ObjectAnimationUsingKeyFrames设置GridLength类型的Width，支持Star单位（如7*表示占7份空间，另一列占4份，实现"大部分空间"的效果）
• 交互完整性：增加ExitActions，鼠标离开列时自动恢复原宽度
• 可见性优化：给Border添加背景色，方便直观测试悬停效果

如果需要更细腻的数值过渡，也可以改用DoubleAnimation绑定到GridLength.Value属性（前提是初始Width为Star类型）：

<DoubleAnimation Storyboard.TargetProperty="Width.Value" To="7" Duration="0:0:0.3"/>

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