Question

我需要的是一个2行的网格 - 第一行将填充组合框作为数据库查询的搜索条件。第二行将是带有结果的DataGrid。

当我将鼠标悬停在上面时，我希望上部网格从顶部向下滑动，并在鼠标离开时向上滑动。我想我可以在顶部的“过滤器”上放一个简单的文本块，将鼠标悬停在它上面会降低组合框的效果吗？

我有类似的东西，但是当鼠标悬停时，动画会一直向上/向下停止。

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                    Storyboard.TargetName="ControlsGrid" 
                    Storyboard.TargetProperty="(Grid.Height)"
                    From="0" 
                    To="66" 
                    Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                    Storyboard.TargetName="ControlsGrid"
                    Storyboard.TargetProperty="(Grid.Height)"
                    From="66" 
                    To="0" 
                    Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>

        <TextBlock HorizontalAlignment="Center" FontSize="20" Text="Filters..."/>
    </Grid>

    <Grid Margin="0" Name="ControlsGrid" VerticalAlignment="top" Background="Yellow"/>
    <DataGrid Grid.Row="1" ColumnHeaderStyle="{DynamicResource GridViewColumnHeaderStyle}" Background="LightGray" RowBackground="LightYellow" AlternatingRowBackground="LightBlue" 
              x:Name="dataGridViewRoomQuery"  BorderBrush="Gray" BorderThickness="5"/>

</Grid>

Answer 1

您的方法存在的问题是，只要MouseLeave置于其上方，“悬停”网格（带有事件触发器的网格）就会收到ControlsGrid事件。

您必须将ControlsGrid放入悬停网格：

<Grid Grid.Row="0" Background="Transparent">
    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
                                        Storyboard.TargetProperty="Height"
                                        To="66" Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="ControlsGrid" 
                                        Storyboard.TargetProperty="Height"
                                        To="0" Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <TextBlock HorizontalAlignment="Center" FontSize="20" Text="Filters..."/>

    <Grid Name="ControlsGrid" Height="0" VerticalAlignment="Top" Background="Yellow">
    </Grid>
</Grid>
<DataGrid .../>

如何在鼠标悬停在wpf中的情况下滑动带有动画的网格？

1 个答案: