如何使自定義 ListView 下拉項目可點擊？

Question

如何使下拉子項可點擊？ 即，如果我單擊“員工”，它將打開“員工”頁面。 我從教程中復制了這個，但是他們沒有解釋如何通過這個創建來制作點擊事件。

子項類

  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; 子項 = 子項； 圖標 = 圖標； }

    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>

主窗口.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

您需要做的就是使ListView的ItemTemplate中的東西可點擊。 最簡單的方法是使用Button而不是TextBlock 。 您可以禁用Button的背景和邊框，使其看起來像文本，但仍可單擊。

此外，您不需要在Expander中使用ListView 。 ListView提供滾動功能，您不需要它。 一個ItemsControl就足夠了。

這是一個例子：

<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>

對於本例中的所有子項，我都綁定到相同的ICommand 。 實際上，您可以為不同的子項傳遞一個CommandParameter ，或者為每個項綁定一個不同的命令。

Answer 2

經過數小時的網絡搜索，我找到了解決方案。

方法

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

執行

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;