uwp - UWP：如何设置我的 ListBoxItem 的样式并添加一些触发器

Question

我有这个Style：

<Style TargetType="ListBoxItem">
        <Setter Property="Padding" Value="8"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
                                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                                    <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我想为Mouse Overand添加一些颜色改变，与触发器Selected相比我很困惑。WPF

标签： uwplistboxstyles

Answer 1

ListBox 已过时，而是使用具有垂直或水平布局方向的 ListView。

要更改基本面板，您必须像这样在列表视图中添加一个节点

<ListView>
<ListView.ItemsPanel>
  <ItemsPanelTemplate>
     <StackPanel Orientation="Horizontal" /><!-- Or vertical-->
   </ItemsPanelTemplate>
</ListView.ItemsPanel>
</Listview

这是编辑环绕 ListView 中每个项目的实际容器样式的最快方法（称为 ListViewItem）：

<ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="MinWidth" Value="0"/>
                            <Setter Property="MinHeight" Value="0"/>
                            <Setter Property="Margin" Value="0,0,0,0"/>
                        </Style>
</ListView.ItemContainerStyle>

至于您问题的另一部分，以及关于触发器、触发器，尤其是自定义触发器及其在 uwp 中的使用，为了实现基于指针状态的颜色更改等功能，您可以做到非常简单，通过编辑默认样式表，listview在样式方面有点复杂，但是你只需要编辑默认的ListViewItem样式，和我上面说的一样，这次将完全深入到它的造型师。

ListViewItem 样式可在此处方便地找到

https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx

看起来像这样

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <ListViewItemPresenter
          ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

在您的情况下，您所要做的就是更改 PointerOver 和 PointerOverSelected 背景值，然后为您的工作表提供 ax:Key 值并像这样引用它：

<ListView ItemContainerStyle={StaticResource YourKey}