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

如何让开放区域也改变选择？

在商品模板中的Background="Transparent"上设置StackPanel。这将使整个小组受到考验。

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>

将上述内容放在Setter Template属性的ListBox属性中。

自定义ListBoxItem：摆脱边框+可点击区域

1 个答案: