在通用应用

时间:2016-01-12 14:29:37

标签: win-universal-app windows-10-universal

当鼠标悬停在我们的ListViewItems上时,我正试图将此样式设置为:

Example ListViewItems with arrow pointing to emphasized line

我已经从App.xaml文件修改了Style,但这并没有解决我的问题

<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#d9d7ec" />

然后,当鼠标悬停在它上面时,我做了一个Style,但这不起作用

  <Style  x:Key="listItemmenuStyle"
    TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#d9d7ec" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="listItem1" />
                                        <ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(ListViewItem.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#d9d7ec" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="listItem1" />
                                        <ColorAnimation Duration="0" To="#393185" Storyboard.TargetProperty="(ListViewItem.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Rectangle x:Name="listItem1" Stroke="Transparent" Fill="Transparent" Margin="0"/>
                            <ContentPresenter x:Name="Content1"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是我如何将此样式应用于ListView:

<ListView Style="{Binding Color, Source={StaticResource listItemmenuStyle}}">
   <ListView.ItemTemplate >
     <DataTemplate>
     <StackPanel  HorizontalAlignment="Left"  Orientation="Horizontal">
        <TextBlock x:Name="day" Text="{Binding Path=day}" Foreground="#797978"></TextBlock>
     </StackPanel>
    </DataTemplate>
 </ListView.ItemTemplate >
</ListView

请问我如何修改样式以获得如上图所示的ListviewItem 谢谢你的帮助

更新: 我尝试了这个解决方案,当我悬停时它改变了ListViewItem的背景颜色,但是当我将鼠标悬停在每个ListViewItem上时,我总是遇到一个问题,即使更改了PointerOverForeground颜色的原因:

 <ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
   FocusSecondaryBorderBrush="#d9d7ec"
   PlaceholderBackground="#d9d7ec"
   PointerOverBackground="#d9d7ec"
   PointerOverForeground="#342d65"
   SelectedBackground="#d9d7ec"
   SelectedForeground="#d9d7ec"
   SelectedPointerOverBackground="#342d65"
   HorizontalContentAlignment="Stretch"
   VerticalContentAlignment="Center"
   Foreground="#342d65"
     />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>                                                   
</ListView.ItemContainerStyle>

1 个答案:

答案 0 :(得分:3)

不要将Foreground颜色设置为与PointerOverForeground颜色相同,当您将鼠标悬停在某个项目上时,无法区分颜色。我认为你应该为ForegroundPointerOverForeground设置不同的颜色。根据您的图片,可能Foreground应设置为Gray

 <ListView Name="myList">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter
                                FocusSecondaryBorderBrush="#d9d7ec"
                                PlaceholderBackground="#d9d7ec"
                                PointerOverBackground="#d9d7ec"
                                PointerOverForeground="#342d65"
                                SelectedBackground="#d9d7ec"
                                SelectedForeground="#342d65"
                                SelectedPointerOverBackground="#d9d7ec"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Center"
                                Foreground="Gray" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>