C# 带有ItemsControl和ListBox的WPF自定义控件

我正在学习如何在WPF中创建自定义控件。我几乎没有什么问题需要解决

基本上，我正在尝试为具有两个级别的导航栏创建自定义控件

级别1包含带有标题文本的大图标；和 二级包含 一个小图标，用户可以点击它，事件将被激活 生成。 这就是我想要证明的：

--------------------------------
|                              |
|  ICON     TITLE 1            |
|                              |
|      small icon     option 1 |
|      small icon     option 2 |
|      small icon     option 3 |
|                              |
|                              |
|  ICON     TITLE 2            |
|                              |
|      small icon     option 1 |
|      small icon     option 2 |
|      etc...                  |
|                              |
--------------------------------

这是我的Generic.xaml

一切正常，但我有两个问题：

如何检测单击了哪个项目，以便 是否将事件提升到父类？ 如果我在标题中滚动，滚动效果很好，但一旦鼠标指针击中列表框，滚动就停止工作。 谢谢

这就是我想要实现的目标： 对于1-

使用带有定义图像+文本的控件模板的按钮，而不是边框

在视图模型中为每个项创建ICommand属性，然后将其绑定到listbox项按钮的命令

---

处理视图模型中的单击。

要检测单击的项目，可以在列表框中绑定SelectedItem。 如；SelectedItem={Binding Property，Mode=TwoWay} 因此，一旦单击项，就可以在setter中引发notify属性更改。

---

您还可以从Items集合中获取Item索引。为此，您只需在列表框中绑定SelectedIndex。

ListBox将使用scroll事件，因为它包含一个项目列表，因此您需要处理scroll事件并将e.Handled=false。对于被单击的事件，则需要将事件处理程序附加到Image和TextBlock。这可以通过样式和事件设置器来实现。@XAMlMAX，我知道，我已经用谷歌搜索过了。呵呵,；但是如何在模板中处理事件呢？我明白了。另一个选择是使用TreeView。这将完成您需要实现的所有功能。@XAMlMAX，如何检测树视图中的哪个节点（例如，项目）已被单击，以便我可以使用它向模板内的调用函数引发事件？此外，是否可以使用TreeView显示不同大小的图标，例如标题图标是一个大图标64x64，而小图标是16x16？@XAMlMAX，没有必要道歉。我非常感谢您的帮助：不幸的是，我不能使用TreeView，因为我不知道如何设计TreeView以匹配我试图实现的目标。然而，我刚刚成功地实现了MVVM来处理我所面临的所有问题。我有空的时候会发布解决方案。感谢XAMIMAX的帮助。天哪！那很聪明！我会试试。。。关于滚动的第二个问题如何？我不太清楚为什么会发生，理想情况下不应该发生，但您可以尝试ScrollViewer.CanContentScroll=True以及为什么要保留ScrollViewer.VerticalScrollBarVisibility=Disable，ScrollViewer.VerticalScrollBarVisibility=Disabled，您可以改为设置Auto。对于这种控件，我更喜欢使用DataGrid而不是listbox。我已经尝试了所有设置，例如使其自动等，但是滚动总是在listbox停止。这是因为ListBox将使用滚动。停止它的唯一方法是处理滚动事件，但我不确定如何处理模板内的任何事件：顺便说一句，以下是我需要在模板内以某种方式处理的滚动问题的参考：没有有效的解决方案，很难找到实际问题。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Global.WPFs.GUIs">
    <Style TargetType="{x:Type local:GNavBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GNavBar}">
                    <ScrollViewer x:Name="PART_Scroll"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch"
                                  VerticalScrollBarVisibility="Auto"
                                  Focusable="False">
                        <ItemsControl x:Name="PART_Items">
                            <ItemsControl.ItemContainerStyle>
                                <Style TargetType="ContentPresenter">
                                    <Setter Property="Margin" Value="0"/>
                                    <Setter Property="Control.Padding" Value="0 8 0 2"/>
                                    <Setter Property="Control.HorizontalContentAlignment" Value="Stretch"/>
                                </Style>
                            </ItemsControl.ItemContainerStyle>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Stretch">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="76"></RowDefinition>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="76" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Image Grid.Column="0" Source="{Binding ImgSrc}" Width="72" Height="72" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                                            <TextBlock Grid.Column="1" Text="{Binding Text}" Margin="4 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="20"></TextBlock>
                                        </Grid>
                                        <ListBox ItemsSource="{Binding Items}"
                                                 BorderThickness="0"
                                                 Background="Transparent" 
                                                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                                 ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                            <ListBox.ItemContainerStyle>
                                                <Style TargetType="ListBoxItem">
                                                    <Setter Property="Margin" Value="0"/>
                                                    <Setter Property="Control.Padding" Value="0"/>
                                                </Style>
                                            </ListBox.ItemContainerStyle>
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <Border>
                                                        <Grid>
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="36"></RowDefinition>
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="16" />
                                                                <ColumnDefinition Width="16" />
                                                                <ColumnDefinition Width="*" />
                                                            </Grid.ColumnDefinitions>
                                                            <Image Grid.Column="1" Source="{Binding ImgSrc}" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                                                            <TextBlock Grid.Column="2" Text="{Binding Text}" Margin="4 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="16"></TextBlock>
                                                        </Grid>
                                                    </Border>
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                        </ListBox>
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>