1. ホーム
  2. 質問と答え
  3. UWPリストビューセルセパレータ

UWPリストビューセルセパレータ

2016-09-01 6 views
1

タイトルに記載されているように、私はListViewのセルセパレータを取得しようとしています。私はセパレータを描画する方法を見つけましたが、残念ながらリストビューアイテムにはセルのホバーカラーとセル選択カラーがありません。UWPリストビューセルセパレータ

<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の内側に置くと、セル全体が非表示になります。ハイライト/ホバー/選択色を失うことなくセルセパレータを持つことができますか？

出典

2016-09-01 Hashmat Khalil

答えて

2

ListViewItemのスタイルを設定するときは、ハイライト、ホバー、選択、およびその他の効果を制御するための設定であるVisualStateGroupsの設定を忘れないでください。また、セル区切りの境界線コントロールを追加する必要もありません。 ContentPresenterGridの場合はBorderBrushと設定するとうまくいきます。

<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を参照してください

enter image description here

詳細を次のようにスタイルを更新しました。そして、参照できるリストビューのセル区切りについてのデモがあります：https://github.com/sunteenwu/CDesign

出典

2016-09-02 02:26:31

+0

最初にお手伝いをしていただきありがとうございます。それは私の問題を解決しました。私はアイテムコンテナスタイルのデフォルトのコピーを編集するためにブレンドを試みましたが、それらのビジュアルスタイルは含まれていませんでした。セルの一番下の行に392行（xaml）のコードが必要だと考えたことは一度もないと思ったので、これはうれしいことでした。とにかく、私はそれを勉強しようとしているリンクされたデモのおかげで。 –

+0

私のために完璧に働いた！ありがとう！ –

関連する問題

 関連する問題