<Style x:Key="officeManagerListViewStyles" TargetType="ListViewItem"> <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/> <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/> <Setter Property="Background" Value="#FFFFFF" /> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="IsHoldingEnabled" Value="True"/> <!--修改每个Item间的间距，这边我是将原来默认的0，0，18，2改成了下面的0，0，18，20--> <Setter Property="Margin" Value="0,0,0,10"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <Border x:Name="OuterContainer"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <!--鼠标移到listview的item的效果 --> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground"> <!--<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>--> <!--选中一个item的背景色 #0F7FC2--> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> <!--选中框的颜色效果，这里我将value修改成了#0F7FC2--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> <!--选中框右边三角的颜色，这里我将value修改成了#0F7FC2--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <PointerDownThemeAnimation TargetName="ContentContainer"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <!--选中框的颜色效果，这里我将value修改成了Red--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> <!--选中框右边三角的颜色，这里我将value修改成了0F7FC2--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!--鼠标按下时listview中item的效果--> <VisualState x:Name="PointerOverPressed"> <Storyboard> <PointerDownThemeAnimation TargetName="ContentContainer"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <!--选中框的颜色效果，这里我将value改成了#0F7FC2--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> <!--选中框右边三角的颜色，这里我将value改成了#0F7FC2--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark"> <DiscreteObjectKeyFrame KeyTime="0" Value="#0F7FC2"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectionHintStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.65" To="NoSelectionHint"/> </VisualStateGroup.Transitions> <VisualState x:Name="VerticalSelectionHint"> <Storyboard> <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectionBackground" ToVerticalOffset="15"/> <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="ContentBorder" ToVerticalOffset="15"/> <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedCheckMark" ToVerticalOffset="15"/> <DoubleAnimationUsingKeyFrames Duration="0:0:0.500" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph"> <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/> <DiscreteDoubleKeyFrame KeyTime="0:0:0.500" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="HorizontalSelectionHint"> <Storyboard> <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="SelectionBackground" ToVerticalOffset="0"/> <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="ContentBorder" ToVerticalOffset="0"/> <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="SelectedCheckMark" ToVerticalOffset="0"/> <DoubleAnimationUsingKeyFrames Duration="0:0:0.500" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph"> <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/> <DiscreteDoubleKeyFrame KeyTime="0:0:0.500" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="NoSelectionHint"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="UnselectedSwiping"> <Storyboard> <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/> </Storyboard> </VisualState> <VisualState x:Name="Selecting"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/> </Storyboard> </VisualState> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> </Storyboard> </VisualState> <VisualState x:Name="SelectedSwiping"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> </Storyboard> </VisualState> <VisualState x:Name="Unselecting"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/> </Storyboard> </VisualState> <VisualState x:Name="Unselected"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/> </Storyboard> </VisualState> <VisualState x:Name="SelectedUnfocused"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="DragStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging"/> </VisualStateGroup.Transitions> <VisualState x:Name="NotDragging"/> <VisualState x:Name="Dragging"> <Storyboard> <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent"/> <DragItemThemeAnimation TargetName="InnerDragContent"/> <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter"/> <FadeOutThemeAnimation TargetName="SelectedBorder"/> </Storyboard> </VisualState> <VisualState x:Name="DraggingTarget"> <Storyboard> <DropTargetItemThemeAnimation TargetName="OuterContainer"/> </Storyboard> </VisualState> <VisualState x:Name="MultipleDraggingPrimary"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayBackground"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayText"/> <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentBorder"/> <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground"/> <FadeInThemeAnimation TargetName="MultiArrangeOverlayText"/> <DragItemThemeAnimation TargetName="ContentBorder"/> <FadeOutThemeAnimation TargetName="SelectionBackground"/> <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter"/> <FadeOutThemeAnimation TargetName="SelectedBorder"/> <FadeOutThemeAnimation TargetName="PointerOverBorder"/> </Storyboard> </VisualState> <VisualState x:Name="MultipleDraggingSecondary"> <Storyboard> <FadeOutThemeAnimation TargetName="ContentContainer"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ReorderHintStates"> <VisualStateGroup.Transitions> <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint"/> </VisualStateGroup.Transitions> <VisualState x:Name="NoReorderHint"/> <VisualState x:Name="BottomReorderHint"> <Storyboard> <DragOverThemeAnimation Direction="Bottom" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/> </Storyboard> </VisualState> <VisualState x:Name="TopReorderHint"> <Storyboard> <DragOverThemeAnimation Direction="Top" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/> </Storyboard> </VisualState> <VisualState x:Name="RightReorderHint"> <Storyboard> <DragOverThemeAnimation Direction="Right" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/> </Storyboard> </VisualState> <VisualState x:Name="LeftReorderHint"> <Storyboard> <DragOverThemeAnimation Direction="Left" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="DataVirtualizationStates"> <VisualState x:Name="DataAvailable"/> <VisualState x:Name="DataPlaceholder"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--选中等效果设置，这边是重点，认真看代码，其实你就会发现，下面即是每个Item的组成部分--> <Grid x:Name="ReorderHintContent" Background="Transparent"> <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,0,0,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/> <Border x:Name="ContentContainer"> <Grid x:Name="InnerDragContent"> <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40"> <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,0,0,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/> </Border> <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/> <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/> <!--选中鼠标离开后listview的item蒙板的颜色，这里将Fill修改成了#0F7FC2--> <Rectangle x:Name="SelectionBackground" Fill="#0F7FC2" Margin="4" Opacity="0"/> <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="5"> <Grid> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/> <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/> <!--listview的item选中框颜色，这里将stroke修改成了#0F7FC2--> <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="#0F7FC2" StrokeThickness="{StaticResource ListViewItemSelectedBorderThemeThickness}"/> <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/> </Grid> </Border> <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top"> <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40" > <!--listview的item选中效果中右边三角型颜色，这里将Fill修改成了#0F7FC2--> <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="#0F7FC2" Stretch="Fill"/> <!--listview的item选中效果中勾的颜色--> <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/> </Grid> </Border> <TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/> </Grid> </Border> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>