Как создать SubMenu из ListViewItem - PullRequest
0 голосов
/ 24 апреля 2020

Я новичок в WPF и хотел бы знать, как создать SubMenu из ListViewItem в следующем файле XAML (MainWindow.xaml).

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:wpfproject"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    mc:Ignorable="d" Height="600" Width="1080" Foreground="White" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
<Window.Resources>
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="70"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.1" 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.1" Value="70"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonExpandMenu">
        <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCollapseMenu">
        <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
    </EventTrigger>
</Window.Triggers>
<Grid Background="#FFDEDEDE">
    <Grid x:Name="GridMain" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="540" Width="1010"/>
    <Grid Height="60" VerticalAlignment="Top" Background="#FF5C99D6">
        <Grid.Effect>
            <DropShadowEffect BlurRadius="1" ShadowDepth="1" Color="#FFACACAC"/>
        </Grid.Effect>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" StaysOpen="False" Margin="10">
                <StackPanel Width="150">
                    <Button Content="Settings"/>
                    <Button Content="Account"/>
                    <Button Content="Help"/>
                    <Separator/>
                    <Button Content="Logout"/>
                </StackPanel>
            </materialDesign:PopupBox>
        </StackPanel>
    </Grid>
    <Grid x:Name="GridMenu" Width="200" 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="ButtonExpandMenu" Height="60" Width="60" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF31577E" Click="ButtonExpandMenu_Click">
                    <materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
                </Button>
                <Button x:Name="ButtonCollapseMenu" Height="60" Width="60" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF31577E" Click="ButtonCollapseMenu_Click" Visibility="Collapsed">
                    <materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
                </Button>
                <Image Height="80" VerticalAlignment="Bottom"/>
            </Grid>
            <ListView x:Name="ListViewMenu" Foreground="#FF5C99D6" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListViewItem x:Name="ItemHome" Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="ViewDashboard" Height="25" Width="25" Margin="10"/>
                        <TextBlock Text="Home" VerticalAlignment="Center" Margin="20 10"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem x:Name="ItemCreate" Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Pencil" Height="25" Width="25" Margin="10"/>
                        <TextBlock Text="Create" VerticalAlignment="Center" Margin="20 10"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Ticket" Height="25" Width="25" Margin="10"/>
                        <TextBlock Text="Tickets" VerticalAlignment="Center"  Margin="20 10"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Height="60">
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon Kind="Message" Height="25" Width="25" Margin="10"/>
                        <TextBlock Text="Messages" VerticalAlignment="Center"  Margin="20 10"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
            <DockPanel>
                <Menu>
                    <Menu.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </Menu.ItemsPanel>
                </Menu>
            </DockPanel>
        </StackPanel>
    </Grid>
</Grid>

This это MainWindow.xaml.vb:

Class MainWindow
Private Sub ButtonExpandMenu_Click(sender As Object, e As RoutedEventArgs) Handles ButtonExpandMenu.Click
    ButtonExpandMenu.Visibility = Visibility.Collapsed
    ButtonCollapseMenu.Visibility = Visibility.Visible
End Sub

Private Sub ButtonCollapseMenu_Click(sender As Object, e As RoutedEventArgs) Handles ButtonCollapseMenu.Click
    ButtonCollapseMenu.Visibility = Visibility.Collapsed
    ButtonExpandMenu.Visibility = Visibility.Visible
End Sub 
End Class

Вот как это выглядит: MainWindow

Это то, что я хочу, когда нажимается Create ListViewItem: enter image description here

Я видел альтернативы, такие как создание Menu:

<Menu>
    <MenuItem Header="...">
        <MenuItem .../>
        <MenuItem .../>
        <MenuItem .../>
    </MenuItem>
</Menu>

Но я не мог получить стиль ListViewItem.

Как мне это сделать?

...