WPF - Настройка ширины пользовательского контроля с помощью триггеров и события mouseenter

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>

Буду признателен, если кто-то укажет, где я ошибаюсь, и укажет правильный путь.

В идеале, я хочу, чтобы пользовательский контроль задерживался на 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>

Это расширяет пользовательский контроль при нажатии, а не при наведении курсора, так как я не мог найти удовлетворительный способ подождать секунду, прежде чем начать. Я мог отложить запуск и отмену при отпускании мыши, но это также отменяло развертывание при каждом вызове отпускания мыши.

У меня есть кнопка, чтобы свернуть пользовательский контроль, но я бы предпочел переключить, на какую раскадровку вызываются события onclick usercontrol, это можно сделать?