当鼠标悬停在元素上时调整 ColumnDefinition 的大小

Question

当用户的光标位于

Border

元素上时，我试图使网格列占据大部分窗口。

鼠标位于右侧边框的示例

但是，我无法改变

ColumnDefintion.Width

我已经从 XAML 代码中删除了大部分内容

如果有任何指示/解决方案，我将不胜感激

<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>
        
    </Page.Resources>

    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="LeftCollum" Width="4*">
                <ColumnDefinition.Resources>
                    <Style x:Key="PanelSwipe"
                           TargetType="ColumnDefinition">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=LeftBorder, Path=IsMouseOver}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:00.1">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ColumnDefinition.Resources>
            </ColumnDefinition>


            <ColumnDefinition Name="RightCollum" Width="4*">
                <ColumnDefinition.Resources>
                    <Style x:Key="PanelSwipe"
                           TargetType="ColumnDefinition">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=RightBorder, Path=IsMouseOver}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Width" To="1" Duration="00:00:20">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ColumnDefinition.Resources>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Border Name="LeftBorder"
                Margin="20,20,10,20">
        </Border>

        <Border Name="RightBorder"
                Margin="10,20,20,20"
                Grid.Column="1">
        </Border>
    </Grid>
</Page>

Answer 1

您犯了多个错误：

• 在元素的资源中存储命名样式不会将该样式应用于该元素。

• ColumnDefinition.Width 的类型不是 double 而是 GridLenth，因此需要使用 ObjectAnimationUsingKeyFrames 来更改它。

修改后的ColumnDefinitin（仅左侧）如下：

<ColumnDefinition Name="LeftCollum" Width="4*">
    <ColumnDefinition.Style>
        <Style TargetType="{x:Type ColumnDefinition}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=LeftBorder, Path=IsMouseOver}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width"
                                                               Duration="0:0:0.1"
                                                               FillBehavior="HoldEnd">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                        <DiscreteObjectKeyFrame.Value>
                                            <GridLength>1*</GridLength>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Width">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                        <DiscreteObjectKeyFrame.Value>
                                            <GridLength>4*</GridLength>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ColumnDefinition.Style>
</ColumnDefinition>