Question

我有一个装满用户控件的包装面板。当我将鼠标悬停在用户控件上时，我希望它展开以显示更多详细信息。

一些精简的示例代码：

<UserControl x:Class="WPFTestBed.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <UserControl.Resources>

    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <EventTrigger.Actions>
                <Setter TargetName="WPFTestBed.UserControl1" Property="Control.Width" Value="200"/>
            </EventTrigger.Actions>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid Height="95" Width="123">
        <Button Height="23" HorizontalAlignment="Left" Margin="17,30,0,0" Name="button1" VerticalAlignment="Top" Width="75">Button</Button>
    </Grid>
</UserControl>

如果有人能够指出我出错的地方，并且让我走上正确的道路，我将不胜感激。

理想情况下，我希望usercontrol在鼠标悬停时延迟x秒，然后展开并显示额外的细节。

Answer 1

这是一个解决方案（已测试）：

请记住，您必须在UserControl上手动设置宽度才能使其正常工作。

然后将其添加到UserControl的正文中：

 <UserControl.Style>
        <Style>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard BeginTime="0:0:4.0" Storyboard.TargetProperty="Width">
                                <DoubleAnimation To="200" Duration="0:0:1.0"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Style>

它将在4秒后开始，然后将宽度从当前值设置为200，超过1秒。

Answer 2

我已经设法进一步了解我想要的东西：

<UserControl x:Class="WPFTestBed.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="200" Width="170">
    <UserControl.Resources>
        <Storyboard x:Key="ExpandDisplay">
            <DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
                                     From="200" To="380" Duration="0:0:0.25" AutoReverse="False"/>

            <DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
                                     Storyboard.TargetName="mainBorder"
                                     From="190" To="370" Duration="0:0:0.25" AutoReverse="False"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2" 
                                                   Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>


        </Storyboard>

        <Storyboard x:Key="CollapseDisplay">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="button2" 
                                                   Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetProperty="(UserControl.Width)"
                                     From="380" To="200" Duration="0:0:0.25" AutoReverse="False"/>

            <DoubleAnimation Storyboard.TargetProperty="(Border.Width)"
                                     Storyboard.TargetName="mainBorder"
                                     From="370" To="190" Duration="0:0:0.25" AutoReverse="False"/>


        </Storyboard>


    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseDown">
                <BeginStoryboard Storyboard="{StaticResource ExpandDisplay}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.Click" SourceName="button2">
            <BeginStoryboard Storyboard="{StaticResource CollapseDisplay}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Border Name="mainBorder" Height="190" Width="160" Background="Black" CornerRadius="20,20,20,20">
        <Border.BitmapEffect>
            <DropShadowBitmapEffect Color="Black" Direction="320" ShadowDepth="10" Opacity=".5"
                            Softness="9"/>
        </Border.BitmapEffect>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Height="23" Width="75" VerticalAlignment="Center" HorizontalAlignment="Center"  Name="button1" >Details</Button>
            <Button Grid.Row="1" Height="23" Width="23" VerticalAlignment="Center" HorizontalAlignment="Center"  Name="button2" Visibility="Collapsed">-</Button>
        </Grid>
    </Border>
</UserControl>

当我点击而不是鼠标悬停时，这扩展了用户控件，因为我找不到令人满意的方式在开始之前等待一秒钟。我可以延迟开始并取消鼠标左移但是每当调用mouseleave时这也取消了扩展。

我有一个折叠用户控件的按钮，但我更愿意切换用户控件onclick事件调用的故事板，可以这样做吗？

WPF - 使用触发器和mouseenter事件设置usercontrol width

2 个答案: