2014-11-14 80 views
0

我尝试的方法: 单击/ tapp listitem - >其背景更改颜色(如点击按钮)。默认情况下更改listitem的颜色

当你点击/ tapp listitem时,PointerDownThemeAnimation被播放(我认为是这样)。

我的问题: 是否有可能影响默认的PointerDownThemeAnimation使用的颜色?

感谢 彼得

+1

请问您可以添加一些代码吗? – 2014-11-14 16:05:45

回答

0

如果你只是想更改列表视图项只有当它被窃听的背景色(即一旦你释放你的手指从列表视图项,它会恢复以前的颜色),那么你可以修改默认ListViewItem模板,这种风格(修改后的部分所示):

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem"> 
    <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="False"/> 
    <Setter Property="Margin" Value="{ThemeResource ListViewItemMargin}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Left"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListViewItem"> 
       <Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5"> 
        <Border.RenderTransform> 
         <ScaleTransform x:Name="ContentScaleTransform"/> 
        </Border.RenderTransform> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition From="Pressed" To="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/> 

            <!-- BEGIN MODIFICATION --> 
            <ObjectAnimationUsingKeyFrames 
             Storyboard.TargetName="ContentBorder" 
             Storyboard.TargetProperty="(UIElement.Background).(SolidColorBrush.Color)"> 
             <DiscreteObjectKeyFrame 
              KeyTime="0" 
              Value="Red" /> 
            </ObjectAnimationUsingKeyFrames> 
            <!-- END MODIFICATION --> 

           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="CheckboxPressed"> 
           <Storyboard> 
            <PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="NormalRectangle"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectedBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedGlyph"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Unselected"/> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedUnfocused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
           </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" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="MultiSelectStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/> 
           <VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="NoMultiSelect"/> 
          <VisualState x:Name="ListMultiSelect"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/> 
            <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="GridMultiSelect"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ReorderModeStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition From="ReorderEnabled" GeneratedDuration="00:00:00.2" To="ReorderDisabled"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="ReorderEnabled"> 
           <Storyboard> 
            <DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Reorderable"> 
           <Storyboard> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ContentScaleTransform"> 
             <LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/> 
             <LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/> 
            </DoubleAnimationUsingKeyFrames> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ContentScaleTransform"> 
             <LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/> 
             <LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/> 
            </DoubleAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="ReorderDisabled"/> 
         </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="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="RightReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Right" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="TopReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Top" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="LeftReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Left" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid x:Name="ReorderHintContent" Background="Transparent"> 
         <Border x:Name="CheckboxTiltContainer" HorizontalAlignment="Left" Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}" VerticalAlignment="Top"> 
          <Border x:Name="CheckboxOuterContainer"> 
           <Border.Clip> 
            <RectangleGeometry Rect="0,0,25.5,25.5"/> 
           </Border.Clip> 
           <Grid x:Name="CheckboxContainer"> 
            <Grid.RenderTransform> 
             <TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/> 
            </Grid.RenderTransform> 
            <Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/> 
            <Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/> 
           </Grid> 
          </Border> 
         </Border> 
         <Border x:Name="ContentContainer"> 
          <Border x:Name="TiltContainer"> 
           <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> 
            <Border.RenderTransform> 
             <TranslateTransform x:Name="ContentBorderTranslateTransform"/> 
            </Border.RenderTransform> 
            <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" AutomationProperties.AccessibilityView="Raw" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/> 
             <Rectangle x:Name="PlaceholderRect" Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/> 
            </Grid> 
           </Border> 
          </Border> 
         </Border> 
         <Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0"> 
          <Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34"> 
           <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/> 
           <Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/> 
          </Grid> 
         </Border> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

将这个风格在您的网页或应用程序资源字典,那么你可以将它应用到您的列表视图是这样的:

<ListView ItemContainerStyle="{StaticResource ListViewItemStyle1}" /> 

FYI:为了获得这种风格定义,右键单击XAML设计你的列表视图 - >编辑附加模板 - >编辑生成的项容器 - >编辑复制。

+0

相当有用!非常感谢。特别是获取模板的提示,因为微软网站上的模板不是手机中使用的模板。 – PBum 2014-11-17 12:37:45

相关问题