使用ItemsControl和ListBox的WPF自定義控件

Question

我正在學習如何在WPF中創建自定義控件。 我遇到的問題很少。

基本上，我試圖為具有兩個級別的導航欄創建自定義控件。

• 1級包含帶有標題文本的大圖標； 和
• 級別2包含一個小圖標，用戶可以在其中單擊並生成事件。

這是我要存檔的內容：

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

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

一切正常，但是我有兩個問題：

1. 如何檢測單擊了哪個項目，以便將事件引發給父類？
2. 如果我在TITLE中滾動，滾動效果很好，但是一旦鼠標指針擊中列表框，滾動就會停止工作。

謝謝...

---

這是我要實現的目標：

Answer 1

若要檢測單擊哪個項目，可以在ListBox中綁定SelectedItem 。 例如; SelectedItem = {綁定屬性，模式= TwoWay}因此，一旦單擊項目，在設置器中就可以引發通知屬性已更改。 您還可以從Items集合中獲取Item索引。 為此，您只需要在ListBox中綁定SelectedIndex 。

Answer 2

對於1-

代替邊框，使用帶有控件模板的按鈕定義您的圖像和文本。

在視圖模型中為每個項目創建一個ICommand屬性，然后將其綁定到列表框項目按鈕的命令。

處理視圖模型中的單擊。