0

Меню развёртывается при наведении на кнопку и сворачивается при событии MouseLeave на гриде. Если меню не развернуть и убрать курсор с грида, меню откроется и будет закрываться. Увидев код я думаю вы поймёте о чём я говорю. Какими ещё способами можно это реализовать, с использование MouseLeave?

Анимация сворачивания/разворота меню.

<Window.Resources>        
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" 
                                       Storyboard.TargetName="GridHeaderMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="30"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="80"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CloseMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" 
                                       Storyboard.TargetName="GridHeaderMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="80"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

Триггеры:

<Window.Triggers>        
    <EventTrigger RoutedEvent="Image.MouseEnter" SourceName="imgOpenMenu">
        <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Grid.MouseLeave" SourceName="GridHeaderMenu">
        <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
    </EventTrigger>        
</Window.Triggers>

Меню:убрал в коде лишнее, для компактности.

            <Grid Name="GridHeaderMenu" Grid.RowSpan="2" Background="#FFEEE9E8" VerticalAlignment="Top"
                  Height="30" Width="150"
                  HorizontalAlignment="Right"
                  Margin=" 0, 50,10,0">
                <StackPanel Orientation="Vertical">

                    <StackPanel Orientation="Horizontal">
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal" Height="30" Margin="0, 10">
                        <Image/>
                        <Image/>
                        <Image/>
                        <Image/> 
                    </StackPanel>

                </StackPanel>
            </Grid>
4
  • А зачем так сложно анимацию делать? Вот допустим анимация закрытия <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="GridHeaderMenu" Duration="0:0:0.3" To="30" />, анимация открытия будет той же, только с To="80". И это уже сделает в разы лучше, ибо анимация будет стартовать с того Height, который сейчас у вашего объекта, а не с нуля. Ну или убрать первый кадр анимации (EasingDoubleKeyFrame KeyTime="0"). Вообще кстати не советую анимировать Height, ибо контенту внутри будет плохо...
    – EvgeniyZ
    28 янв 2019 в 16:41
  • @EvgeniyZ спасибо за коммент. Прям в точку) А почему будет "плохо"? Весь контент на месте, где и должен быть. Какие подводные ожидают?
    – petuch
    28 янв 2019 в 17:07
  • Я очень долго боролся с выезжающим меню сбоку, а именно с этим эффектом. Как видите, весь контент начинает вести себя не очень красиво, приходилось убирать через Margin или что то на подобие. С Изменением высоты объекта, я лично не смог этот эффект воспроизвести, но уверен, что он там есть и с каким нибудь изображением или еще каким либо элементом зависящим от высоты - будет то же самое, что и с изменением ширины.
    – EvgeniyZ
    28 янв 2019 в 17:49
  • @EvgeniyZ Буду иметь ввиду. Спасибо ещё раз.
    – petuch
    28 янв 2019 в 18:45

1 ответ 1

1

Если меню не развернуть и убрать курсор с грида, меню откроется и будет закрываться.

Все это потому, что вы явно пишете высоту стартовой точки, уберите все нулевые кадры (<EasingDoubleKeyFrame KeyTime="0" Value="..."/>), тогда ваша анимация будет стартовать с текущего значения Height.


Вообще вы как то странно написали анимацию, может стоит переписать на что то в этом духе?

<DoubleAnimation Storyboard.TargetProperty="Height"
                 Storyboard.TargetName="GridHeaderMenu" 
                 Duration="0:0:0.3" To="30" />

И тут тоже как видите не стоит From значения, всего лишь To.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.