Выплывающее навигационное меню

@Unsafe · Регистрация: 09.10.2019

Студворк — интернет-сервис помощи студентам

Необходимо реализовать выплывающее меню. Раньше всегда использовал вот такой подход и он работал

Кликните здесь для просмотра всего текста

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<Window.Resources>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="70"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="70"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
    </Window.Triggers>
        <Grid x:Name="GridMenu" Width="70" HorizontalAlignment="Left" Background="#FF31577E">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="2" ShadowDepth="1" Color="#FFAEAEAE"/>
            </Grid.Effect>
            <StackPanel>
                <Grid Height="150" Background="White" RenderTransformOrigin="0.5,0.5">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                    <Button x:Name="ButtonOpenMenu" Height="60" Width="60" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top"  Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF31577E"/>
                    <Button x:Name="ButtonCloseMenu" Visibility="Collapsed" Height="60" Width="60" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top" BorderBrush="{x:Null}" Foreground="#FF31577E"/>
</Grid>

Но сейчас задача немного иначе использую Devexpress компоненты

Кликните здесь для просмотра всего текста

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<UserControl.Resources>
        <DataTemplate x:Key="waitIndicator">
            <dx:WaitIndicator DeferedVisibility="True" />
        </DataTemplate>
        <Storyboard x:Key="OpenMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="CloseMenu">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                <EasingDoubleKeyFrame KeyTime="0" Value="300"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="dxwui:HamburgerMenuBottomBarNavigationButton.Click" SourceName="ButtonOpenMenu" >
            <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
            <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <DockPanel>
        <dxwui:HamburgerMenu Name="Menu" OpenPaneWidth="250" ShowMenuOnEmptySpaceBarClick="True" IsMenuVisible="True" AvailableViewStates="All" ViewState="Opened">
            <dxwui:HamburgerMenuNavigationButton Content="Статистика" Glyph="{dx:DXImage SvgImages/Chart/Chart.svg}"  NavigationTargetType="{x:Type Views:Chart}"/>
            <dxwui:HamburgerMenuNavigationButton Content="Заказы" Glyph="{dx:DXImage SvgImages/Business Objects/BO_Order.svg}" NavigationTargetType="{x:Type Views:Chart}"/>
            <dxwui:HamburgerMenuNavigationButton Content="Клиенты" Glyph="{dx:DXImage SvgImages/Outlook Inspired/Customers.svg}"  NavigationTargetType="{x:Type Views:CustomersCollection}"/>
            <dxwui:HamburgerMenuNavigationButton Content="Товары" Glyph="{dx:DXImage SvgImages/Outlook Inspired/Products.svg}"  NavigationTargetType="{x:Type Views:GoodsCollection}"/>
            <dxwui:HamburgerSubMenu Content="Тема"  Glyph="{dx:DXImage SvgImages/RichEdit/PageColor.svg}" FlyoutPaneWidth="250" GlyphWidth="32" GlyphHeight="32" UseDefaultSubMenuImageColorizer="True">
                <dxmvvm:Interaction.Behaviors>
                    <dxwui:HamburgerSubMenuThemeSelectorBehavior ShowTouchThemes="False"/>
                </dxmvvm:Interaction.Behaviors>
            </dxwui:HamburgerSubMenu>
            <dxwui:HamburgerMenu.BottomBarItems>
                <dxwui:HamburgerMenuBottomBarNavigationButton x:Name="ButtonOpenMenu" Glyph="{dx:DXImage SvgImages/Icon Builder/Actions_Settings.svg}" Placement="Right"/>
            </dxwui:HamburgerMenu.BottomBarItems>
            <dxwui:HamburgerMenu.Content>
                <dxwui:NavigationFrame Source="{x:Type Views:Chart}" AnimationDelay="0:0:0.1" NavigationCacheMaxSize="-7" >
                    <dxmvvm:Interaction.Behaviors>
                        <dxwuin:FrameNavigationService/>
                        <dx:DXSplashScreenService ViewTemplate="{StaticResource waitIndicator}" SplashScreenStartupLocation="CenterOwner" />
                    </dxmvvm:Interaction.Behaviors>
                </dxwui:NavigationFrame>
            </dxwui:HamburgerMenu.Content>
        </dxwui:HamburgerMenu>
        <Grid x:Name="GridMenu" Width="0" HorizontalAlignment="Right" Background="Black">
            <Grid.Effect>
                <DropShadowEffect BlurRadius="2" ShadowDepth="1" Color="#FFAEAEAE"/>
            </Grid.Effect>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="ButtonCloseMenu">
                        <Image Source="{dx:DXImage SvgImages/HybridDemoIcons/BottomPanel/HybridDemo_Close.svg}"/>
                    </Button>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DockPanel>
</UserControl>

При таком подходе возникает ошибка ArgumentException: Не удается найти FrameworkElement с именем Name "ButtonOpenMenu". В целом я понял, что dxwui:HamburgerMenuNavigationButton не унаследован от FrameworkElement из-за этого он его не может найти. Но тогда как мне это обойти или может есть иной подход в решении данной проблемы?

@novikov.ea · 18.02.2020, 14:00

Сообщение от Unsafe

я понял, что dxwui:HamburgerMenuNavigationButton не унаследован от FrameworkElement

А официальная документация говорит об обратном
Я не знаю, почему элемент не находится, но могу предложить прописать триггер в стиле самого элемента.

XML
1
2
3
4
5
6
7
<dxwui:HamburgerMenuBottomBarNavigationButton>
  <dxwui:HamburgerMenuBottomBarNavigationButton.Style>
    <Style TargetType="{x:Type dxwui:HamburgerMenuBottomBarNavigationButton}">
      <Style.Triggers>
        <EventTrigger RoutedEvent="dxwui:HamburgerMenuBottomBarNavigationButton.Click">
          <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    .....

@Unsafe · 18.02.2020, 17:07 **[ТС]**

Интересное поведение теперь иначе ошибка System.InvalidOperationException: "Не удается найти имя "GridMenu" в области имен "DevExpress.Xpf.WindowsUI.HamburgerMenuB ottomBarNavigationButton"."

Кликните здесь для просмотра всего текста

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dxwui:HamburgerMenuBottomBarNavigationButton x:Name="ButtonOpenMenu" Glyph="{dx:DXImage SvgImages/Icon Builder/Actions_Settings.svg}" Placement="Right">
                    <dxwui:HamburgerMenuBottomBarNavigationButton.Triggers>
                        <EventTrigger RoutedEvent="dxwui:HamburgerMenuBottomBarNavigationButton.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="300"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </dxwui:HamburgerMenuBottomBarNavigationButton.Triggers>
                </dxwui:HamburgerMenuBottomBarNavigationButton>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .