如何在Windows 8商店应用程序中更改wpf listview所选项目样式与所选项目相同?

时间:2014-10-08 17:35:31

标签: wpf xaml windows-store-apps

我想在wpf中更改listview所选项目样式,与我在Windows 8商店应用程序中显示的相同,附加图像可供参考。

Image link

紫色边框和右上角的刻度线。

2 个答案:

答案 0 :(得分:0)

很可能,您需要修改ListView的实际控件模板。

答案 1 :(得分:0)

您可能使用ListBox控件而不是WPF ListView,因为WPF的ListBox更接近WinRT / XAML' s ListView。然后,您希望将ListBox.ItemContainerStyle设置为类似WinRT / XAML ListViewItem样式的内容,您可以在此处看到此版本。

(下面是一个带有修剪格式的副本,使其适合Stack Overflow' 30k字符限制)。

<!-- Style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">
 <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
 <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
 <Setter Property="Background" Value="Transparent"/>
 <Setter Property="TabNavigation" Value="Local"/>
 <Setter Property="IsHoldingEnabled" Value="True"/>
 <Setter Property="Margin" Value="0,0,18,2"/>
 <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"/>
 <VisualState x:Name="PointerOver">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Fill">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Stroke">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
 Storyboard.TargetProperty="Fill">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Pressed">
 <Storyboard>
 <PointerDownThemeAnimation TargetName="ContentContainer" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="PointerOverPressed">
 <Storyboard>
 <PointerDownThemeAnimation TargetName="ContentContainer" />
 <DoubleAnimation Storyboard.TargetName="PointerOverBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Fill">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Stroke">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
 Storyboard.TargetProperty="Fill">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Disabled">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
 </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">
 <VisualState x:Name="VerticalSelectionHint">
 <Storyboard>
 <SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />
 <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
 <SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
 <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />
 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
 Storyboard.TargetProperty="Opacity"
 Duration="0:0:0.500">
 <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
 <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="HorizontalSelectionHint">
 <Storyboard>
 <SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />
 <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
 <SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
 <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />
 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
 Storyboard.TargetProperty="Opacity"
 Duration="0:0:0.500">
 <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
 <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="NoSelectionHint" />
 <VisualStateGroup.Transitions>
 <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
 </VisualStateGroup.Transitions>
 </VisualStateGroup>
 <VisualStateGroup x:Name="SelectionStates">
 <VisualState x:Name="Unselecting">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Unselected">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="UnselectedPointerOver">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Foreground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="UnselectedSwiping">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="0.5" />
 <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Selecting">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Foreground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Selected">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Foreground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="SelectedSwiping">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Foreground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="SelectedUnfocused">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="SelectionBackground"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
 Storyboard.TargetProperty="Foreground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 </VisualStateGroup>
 <VisualStateGroup x:Name="DragStates">
 <VisualState x:Name="NotDragging" />
 <VisualState x:Name="Dragging">
 <Storyboard>
 <DoubleAnimation Storyboard.TargetName="InnerDragContent"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="{ThemeResource ListViewItemDragThemeOpacity}" />
 <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>
 <!-- These two Opacity animations are required - the FadeInThemeAnimations
 on the same elements animate an internal Opacity. -->
 <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />
 <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="1" />

 <DoubleAnimation Storyboard.TargetName="ContentBorder"
 Storyboard.TargetProperty="Opacity"
 Duration="0"
 To="{ThemeResource ListViewItemDragThemeOpacity}" />
 <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.Transitions>
 <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
 </VisualStateGroup.Transitions>
 </VisualStateGroup>
 <VisualStateGroup x:Name="ReorderHintStates">
 <VisualState x:Name="NoReorderHint"/>
 <VisualState x:Name="BottomReorderHint">
 <Storyboard>
 <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="TopReorderHint">
 <Storyboard>
 <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="RightReorderHint">
 <Storyboard>
 <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
 </Storyboard>
 </VisualState>
 <VisualState x:Name="LeftReorderHint">
 <Storyboard>
 <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
 </Storyboard>
 </VisualState>
 <VisualStateGroup.Transitions>
 <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
 </VisualStateGroup.Transitions>
 </VisualStateGroup>
 <VisualStateGroup x:Name="DataVirtualizationStates">
 <VisualState x:Name="DataAvailable"/>
 <VisualState x:Name="DataPlaceholder">
 <Storyboard>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
 Storyboard.TargetProperty="Visibility"
 Duration="0">
 <DiscreteObjectKeyFrame KeyTime="0">
 <DiscreteObjectKeyFrame.Value>
 <Visibility>Visible</Visibility>
 </DiscreteObjectKeyFrame.Value>
 </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
 Storyboard.TargetProperty="Visibility"
 Duration="0">
 <DiscreteObjectKeyFrame KeyTime="0">
 <DiscreteObjectKeyFrame.Value>
 <Visibility>Visible</Visibility>
 </DiscreteObjectKeyFrame.Value>
 </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 </VisualStateGroup>
 </VisualStateManager.VisualStateGroups>
 <Grid x:Name="ReorderHintContent" Background="Transparent">
 <Path x:Name="SelectingGlyph" Opacity="0" 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="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
 <Border x:Name="HintGlyphBorder"
 Height="40"
 Width="40"
 HorizontalAlignment="Right"
 VerticalAlignment="Top"
 Opacity="0"
 Margin="4">
 <Path x:Name="HintGlyph" Opacity="0" 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="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
 </Border>
 <Border x:Name="ContentContainer">
 <Grid x:Name="InnerDragContent">
 <Rectangle x:Name="PointerOverBorder"
 IsHitTestVisible="False"
 Opacity="0"
 Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
 Margin="1" />
 <Rectangle x:Name="FocusVisual"
 IsHitTestVisible="False"
 Opacity="0"
 StrokeThickness="2"
 Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
 <Rectangle x:Name="SelectionBackground"
 Margin="4"
 Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
 Opacity="0" />
 <Border x:Name="ContentBorder"
 Background="{TemplateBinding Background}"
 BorderBrush="{TemplateBinding BorderBrush}"
 BorderThickness="{TemplateBinding BorderThickness}"
 Margin="4"> 
 <Grid>
 <ContentPresenter x:Name="contentPresenter"
 ContentTransitions="{TemplateBinding ContentTransitions}"
 ContentTemplate="{TemplateBinding ContentTemplate}"
 Content="{TemplateBinding Content}"
 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 Margin="{TemplateBinding Padding}" />
 <!-- 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"
 Opacity="0"
 Text="Xg"
 Foreground="{x:Null}"
 Margin="{TemplateBinding Padding}"
 IsHitTestVisible="False"
 AutomationProperties.AccessibilityView="Raw"/>
 <Rectangle x:Name="PlaceholderRect"
 Visibility="Collapsed"
 Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
 <Rectangle x:Name="MultiArrangeOverlayBackground"
 IsHitTestVisible="False"
 Opacity="0"
 Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
 </Grid>
 </Border>
 <Rectangle x:Name="SelectedBorder"
 IsHitTestVisible="False"
 Opacity="0"
 Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
 StrokeThickness="{ThemeResource ListViewItemSelectedBorderThemeThickness}"
 Margin="4" />
 <Border x:Name="SelectedCheckMarkOuter"
 IsHitTestVisible="False"
 HorizontalAlignment="Right"
 VerticalAlignment="Top"
 Margin="4">
 <Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
 <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
 <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="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
 </Grid>
 </Border>
 <TextBlock x:Name="MultiArrangeOverlayText"
 Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
 Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
 FontFamily="{ThemeResource ContentControlThemeFontFamily}"
 FontSize="26.667"
 IsHitTestVisible="False"
 Opacity="0"
 TextWrapping="Wrap"
 TextTrimming="WordEllipsis"
 Margin="18,9,0,0"
 AutomationProperties.AccessibilityView="Raw"/>
 </Grid>
 </Border>
 </Grid>
 </Border>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
</Style>