自定義ListBoxItem：擺脫邊界+可點擊區域

Question

我正在自定義ListBoxItem ，並且遇到了一些問題。

• ItemTemplate是垂直方向的StackPanel ，其高度設置為120px。 但是，僅單擊標簽或圖像會導致ListBox選擇項目，而不是標簽下方的空白區域。 如何獲得開放區域也導致選擇更改？ 我正在考慮將樣式化的Button添加為ListBoxItem ，但是我想知道是否可以更輕松地完成它。
• 在ListBox容器和ListBoxItem之間有1px的線，我無法擺脫。 我如何擺脫它？ 這是屏幕截圖：

XAML：

<ListBox Grid.Row="1" ItemsSource="{Binding MenuButtonInfoList}"
        SelectedIndex="{Binding SelectedMainMenuIndex, Mode=TwoWay}">
    <ListBox.Resources>
        <Style TargetType="{x:Type ListBox}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Width" Value="160px" />
            <Setter Property="BorderBrush" Value="{StaticResource PrimaryColor}" />
            <Setter Property="BorderThickness" Value="0, 1, 0, 0" />
        </Style>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="MenuButtonBorder" SnapsToDevicePixels="True"
                                BorderBrush="{StaticResource PrimaryColor}" BorderThickness="0, 0, 0, 1">
                            <StackPanel Orientation="Vertical" Height="120px">
                                <Image Source="{Binding ImageFilePath}" Height="30" Width="30" />
                                <Label x:Name="MenuButtonLabel" Content="{Binding Label}" 
                                        FontSize="{StaticResource Title1FontSize}"
                                        Foreground="{StaticResource PrimaryColor}" />
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="MenuButtonBorder" Property="Background" Value="{StaticResource PrimaryColor}" />
                                <Setter TargetName="MenuButtonLabel" Property="Foreground" Value="{StaticResource HighlightColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
</ListBox>

Answer 1

如何獲得開放區域也導致選擇更改？

在項目模板的StackPanel上設置Background="Transparent" 。 這將使整個面板的可測試性得到檢驗。

ListBox容器和ListBoxItem之間有1px的線，我無法擺脫。 我如何擺脫它？

覆蓋ListBox模板以刪除1px填充：

<ControlTemplate TargetType="{x:Type ListBox}">
  <Border Name="Bd"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          SnapsToDevicePixels="true">
     <!-- Padding="1" (removed) -->
    <ScrollViewer Padding="{TemplateBinding Padding}"
                  Focusable="false">
      <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    </ScrollViewer>
  </Border>
  <ControlTemplate.Triggers>
    <Trigger Property="IsEnabled"
              Value="false">
      <Setter TargetName="Bd"
              Property="Background"
              Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
    </Trigger>
    <MultiTrigger>
      <MultiTrigger.Conditions>
        <Condition Property="IsGrouping" Value="true" />
        <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
      </MultiTrigger.Conditions>
      <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
    </MultiTrigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

將以上內容放置在ListBox樣式的Template屬性的Setter中。