Переключатель ячейки списка списка UWP

Question

Как указано в заголовке, я пытаюсь получить разделитель ячейки для ListView. и я нашел способ нарисовать разделитель, но, к сожалению, он не приводит к тому, что элементы списка элементов не имеют цвета наведения и цвета ячейки.

<Style x:Key="BorderedItem" TargetType="ListViewItem"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListViewItem"> 
       <Border Name="Border" BorderBrush="LightGray" BorderThickness="0,0,0,1" Margin="4,0,4,0"> 
        <ContentPresenter/> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
</Style> 

Я также пробовал this style solution, чтобы добавить цвет подсветки/выбора цвета назад. но вопрос ListViewItemPresenter не может быть внутри Border. помещение Border внутри ListViewItemPresenter скрывает всю ячейку. так что в любом случае есть разделитель ячеек без потери цвета выделения/наведения/выбора?

Answer 1

Когда вы устанавливаете стиль для ListViewItem, не забудьте установить VisualStateGroups, который предназначен для управления подсветкой, зависанием, выбором и другими эффектами. Также вам не нужно добавлять пограничный элемент для разделителя ячеек. Просто установите BorderBrush для ContentPresenterGrid, он будет работать хорошо. Обновленный стиль следующим образом:

<Style x:Key="BorderedItem" TargetType="ListViewItem"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListViewItem"> 
       <Grid 
        x:Name="ContentBorder" 
        Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}"> 
        <Rectangle 
         x:Name="BorderBackground" 
         Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" 
         Opacity="0" 
         Control.IsTemplateFocusTarget="True" 
         IsHitTestVisible="False" /> 
        <Grid 
         x:Name="ContentPresenterGrid" 
         Margin="0,0,0,0" 
         Background="Transparent" 
         BorderBrush="LightGray" 
         BorderThickness="0,0,0,1"> 
         <Grid.RenderTransform> 
          <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> 
         </Grid.RenderTransform> 
         <ContentPresenter 
          x:Name="ContentPresenter" 
          Margin="{TemplateBinding Padding}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          Content="{TemplateBinding Content}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" /> 
        </Grid> 
        <!-- 
         The 'Xg' text simulates the amount of space one line of text will occupy. 
         In the DataPlaceholder state, the Content is not loaded yet so we 
         approximate the size of the item using placeholder text. 
        --> 
        <TextBlock 
         x:Name="PlaceholderTextBlock" 
         Margin="{TemplateBinding Padding}" 
         Foreground="{x:Null}" 
         Opacity="0" 
         AutomationProperties.AccessibilityView="Raw" 
         IsHitTestVisible="False" 
         Text="Xg" /> 
        <Rectangle 
         x:Name="PlaceholderRect" 
         Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
         Visibility="Collapsed" /> 
        <Rectangle 
         x:Name="MultiArrangeOverlayBackground" 
         Grid.ColumnSpan="2" 
         Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
         Opacity="0" 
         IsHitTestVisible="False" /> 
        <Border 
         x:Name="MultiSelectSquare" 
         Width="20" 
         Height="20" 
         Margin="12,0,0,0" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
         BorderThickness="2" 
         Visibility="Collapsed"> 
         <Border.Clip> 
          <RectangleGeometry Rect="0,0,20,20"> 
           <RectangleGeometry.Transform> 
            <TranslateTransform x:Name="MultiSelectClipTransform" /> 
           </RectangleGeometry.Transform> 
          </RectangleGeometry> 
         </Border.Clip> 
         <Border.RenderTransform> 
          <TranslateTransform x:Name="MultiSelectCheckBoxTransform" /> 
         </Border.RenderTransform> 
         <FontIcon 
          x:Name="MultiSelectCheck" 
          Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
          Opacity="0" 
          FontFamily="{ThemeResource SymbolThemeFontFamily}" 
          FontSize="16" 
          Glyph="&#xE73E;" 
          Visibility="Collapsed" /> 
        </Border> 
        <TextBlock 
         x:Name="MultiArrangeOverlayText" 
         Grid.ColumnSpan="2" 
         Margin="18,9,0,0" 
         Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
         Opacity="0" 
         FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
         FontSize="26.667" 
         AutomationProperties.AccessibilityView="Raw" 
         IsHitTestVisible="False" 
         Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}" 
         TextTrimming="WordEllipsis" 
         TextWrapping="Wrap" /> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"> 
           <Storyboard> 
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="BorderBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="BorderBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0:0:0" 
             Storyboard.TargetName="MultiSelectCheck" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="BorderBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerOverSelected"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0:0:0" 
             Storyboard.TargetName="MultiSelectCheck" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="BorderBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PressedSelected"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0:0:0" 
             Storyboard.TargetName="MultiSelectCheck" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="BorderBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <PointerDownThemeAnimation TargetName="ContentPresenter" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="DisabledStates"> 
          <VisualState x:Name="Enabled" /> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="ContentBorder" 
             Storyboard.TargetProperty="Opacity" 
             To="{ThemeResource ListViewItemDisabledThemeOpacity}" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="MultiSelectStates"> 
          <VisualState x:Name="MultiSelectDisabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="-32" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="32" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MultiSelectEnabled"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X"> 
             <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32" /> 
             <SplineDoubleKeyFrame 
              KeySpline="0.1,0.9,0.2,1" 
              KeyTime="0:0:0.333" 
              Value="0" /> 
            </DoubleAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterGrid" Storyboard.TargetProperty="Margin"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="32,0,0,0" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="DataVirtualizationStates"> 
          <VisualState x:Name="DataAvailable" /> 
          <VisualState x:Name="DataPlaceholder"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ReorderHintStates"> 
          <VisualState x:Name="NoReorderHint" /> 
          <VisualState x:Name="BottomReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation 
             Direction="Bottom" 
             ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
             TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="TopReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation 
             Direction="Top" 
             ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
             TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="RightReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation 
             Direction="Right" 
             ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
             TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="LeftReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation 
             Direction="Left" 
             ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
             TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint" /> 
          </VisualStateGroup.Transitions> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="DragStates"> 
          <VisualState x:Name="NotDragging" /> 
          <VisualState x:Name="Dragging"> 
           <Storyboard> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="ContentBorder" 
             Storyboard.TargetProperty="Opacity" 
             To="{ThemeResource ListViewItemDragThemeOpacity}" /> 
            <DragItemThemeAnimation TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="DraggingTarget"> 
           <Storyboard> 
            <DropTargetItemThemeAnimation TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MultipleDraggingPrimary"> 
           <Storyboard> 
            <!-- 
             These two Opacity animations are required - the FadeInThemeAnimations 
             on the same elements animate an internal Opacity. 
            --> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="MultiArrangeOverlayBackground" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="MultiArrangeOverlayText" 
             Storyboard.TargetProperty="Opacity" 
             To="1" /> 
            <DoubleAnimation 
             Duration="0" 
             Storyboard.TargetName="ContentBorder" 
             Storyboard.TargetProperty="Opacity" 
             To="{ThemeResource ListViewItemDragThemeOpacity}" /> 
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" /> 
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" /> 
            <DragItemThemeAnimation TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MultipleDraggingSecondary"> 
           <Storyboard> 
            <FadeOutThemeAnimation TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="DraggedPlaceholder"> 
           <Storyboard> 
            <FadeOutThemeAnimation TargetName="ContentBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" /> 
          </VisualStateGroup.Transitions> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

И результат:

Подробнее пожалуйста, ссылку ListViewItem styles and templates. И у меня есть демонстрация о разделителе ячеек ListView, которую вы можете указать: https://github.com/sunteenwu/CDesign