How to make custom ListView drop down items clickable?

Question

How can I make the dropdown sub-items clickable? ie if I click on 'Employees' it will open the Employees page. I copied this from a tutorial however they didn't explain how to make click events with this creation.

Subitem Class

  public class SubItem
    {
        public SubItem(string name, UserControl screen = null)
        {
            Name = name;
            Screen = screen;
        }
        public string Name { get; private set; }
        public UserControl Screen { get; private set; }
    }
}

ItemMenu Class public class ItemMenu { public ItemMenu(string header, List subItems, PackIconKind icon) { Header = header; SubItems = subItems; Icon = icon; }

    public ItemMenu(string header, UserControl screen, PackIconKind icon)
    {
        Header = header;
        Screen = screen;
        Icon = icon;
    }

    public string Header { get; private set; }
    public PackIconKind Icon { get; private set; }
    public List<SubItem> SubItems { get; private set; }
    public UserControl Screen { get; private set; }
}

}

**UserControlMenuItem.xaml**

 <Grid>
    <materialDesign:PackIcon Kind="{Binding Path=Icon}" Width="15" Height="15" Margin="10 16" Foreground="White"/>
    <ListBoxItem x:Name="ListViewItemMenu" Content="{Binding Path=Header}" Padding="37 14" FontSize="15" Foreground="White"/>
    <Expander x:Name="ExpanderMenu" Header="{Binding Path=Header}" IsExpanded="False" Width="210" HorizontalAlignment="Right" Background="{x:Null}" Foreground="White">
        <ListView x:Name="ListViewMenu" ItemsSource="{Binding Path=SubItems}" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=Name}" Padding="20 5"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Expander>
</Grid>

**MainWindow.xaml**

<materialDesign:ColorZone Mode="PrimaryMid" Grid.ColumnSpan="2" HorizontalAlignment="Stretch">
            <Grid>
                <materialDesign:PopupBox PlacementMode="BottomAndAlignRightEdges" HorizontalAlignment="Right" Margin="10"/>
            </Grid>
        </materialDesign:ColorZone>
        <Grid HorizontalAlignment="Stretch" Grid.Row="1" Background="{StaticResource PrimaryHueMidBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="70"/>
                <RowDefinition Height="326*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="GhostWhite">
                <Image Source="Images/logo.png"/>
            </Grid>
            <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Grid.Row="1">
                
                <StackPanel x:Name="Menu" Margin="10" />
            </ScrollViewer>
        </Grid>
        <Frame Source="/CSA;component/Pages/Landing.xaml" Grid.Row="1" x:Name="ContentFrame" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Background="#2C2F33" Opacity="0.85" NavigationUIVisibility="Hidden" />
</Grid>

MainWindow.xaml.cs

   

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var menuRegister = new List<SubItem>();
            menuRegister.Add(new SubItem("Customer"));
            menuRegister.Add(new SubItem("Providers"));
            menuRegister.Add(new SubItem("Employees"));
            menuRegister.Add(new SubItem("Products"));
            var item6 = new ItemMenu("Register", menuRegister, PackIconKind.Register);

            var menuSchedule = new List<SubItem>();
            menuSchedule.Add(new SubItem("Services"));
            menuSchedule.Add(new SubItem("Meetings"));
            var item1 = new ItemMenu("Appointments", menuSchedule, PackIconKind.Schedule);

            var menuReports = new List<SubItem>();
            menuReports.Add(new SubItem("Customers"));
            menuReports.Add(new SubItem("Providers"));
            menuReports.Add(new SubItem("Products"));
            menuReports.Add(new SubItem("Stock"));
            menuReports.Add(new SubItem("Sales"));
            var item2 = new ItemMenu("Reports", menuReports, PackIconKind.FileReport);

            var menuExpenses = new List<SubItem>();
            menuExpenses.Add(new SubItem("Fixed"));
            menuExpenses.Add(new SubItem("Variable"));
            var item3 = new ItemMenu("Expenses", menuExpenses, PackIconKind.ShoppingBasket);

            var menuFinancial = new List<SubItem>();
            menuFinancial.Add(new SubItem("Cash flow"));
            var item4 = new ItemMenu("Financial", menuFinancial, PackIconKind.ScaleBalance);

            var item0 = new ItemMenu("Dashboard", new UserControl(), PackIconKind.ViewDashboard);

            Menu.Children.Add(new UserControlMenuItem(item0));
            Menu.Children.Add(new UserControlMenuItem(item6));
            Menu.Children.Add(new UserControlMenuItem(item1));
            Menu.Children.Add(new UserControlMenuItem(item2));
            Menu.Children.Add(new UserControlMenuItem(item3));
            Menu.Children.Add(new UserControlMenuItem(item4));
           }

        

    ```

Answer 1

All you need is to make the thing in ListView 's ItemTemplate clickable. The easiest way to do that is to use a Button instead of a TextBlock . You can disable the Button 's background and border to make it appear like text, but remain clickable.

Also, you don't need to use a ListView within an Expander . ListView offers scrolling capabilities and you don't need that. An ItemsControl will be enough.

Here's an example:

<Expander
    Header="Expand me">
    <ItemsControl ItemsSource="{Binding SubItems}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button
                    Background="Transparent"
                    BorderThickness="0"
                    Command="{Binding DataContext.DoSomethingCommand, ElementName=ThisWindow}"
                    Content="{Binding Name}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Expander>

I'm binding to the same ICommand for all the sub items in this example. Realisticly, you would either pass a CommandParameter as well for the different sub items or bind to a different command per item.

Answer 2

After hours of searching the web I found a solution.

Method

  public static void Navigate(object target)
    {
        ((MainWindow)Application.Current.Windows[0]).ContentFrame.Content = target;
    }

Implementation

switch (Globals.PageName)
        {
            case "Landing":
                Pages.Landing itemZ = new Pages.Landing();
                Navigate(itemZ);
                break;
            case "ClientAcquisition":
                Pages.ClientAcquisition item = new Pages.ClientAcquisition();
                Navigate(item);
                break;