определить собственный стиль для ListViewItem в универсальном приложении

Я пытаюсь установить этот стиль в свои ListViewItems, когда на них наводится мышь:

Пример ListViewItems со стрелкой, указывающей на выделенную строку

Я изменил стиль из файла App.xaml, но это не решает мою проблему.

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

Затем я сделал стиль при наведении на него мыши, но это либо не работает

  <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>

win-universal-app windows-10-universal
person hanali    schedule 12.01.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Не устанавливайте цвет Foreground таким же, как цвет PointerOverForeground, вы не сможете различить цвет при наведении курсора на элемент. Я думаю, вы должны установить разные цвета для Foreground и PointerOverForeground. Согласно вашему изображению, возможно, 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>
person Scavenger    schedule 14.01.2016
comment
спасибо сэру Джону Чжану за ваш ответ, мне нужно изменить цвет переднего плана на черный, например, я все еще не могу получить это с помощью вашего кода - person hanali; 14.01.2016
comment
Я обновил свой код DataTemplate, если это поможет, сэр. - person hanali; 14.01.2016
comment
Я обновил свой код DataTemplate в своем посте, если это поможет, сэр. - person hanali; 14.01.2016
comment
Вы определили стиль ListItem в ItemContainerStyle, поэтому вам не нужно устанавливать стиль ListView. Удалите Style="{Binding Color, Source={StaticResource listItemmenuStyle}}" и измените Gray на "#797978" в ItemContainerStyle , вам не нужно устанавливать Foreground в TextBlock - person Scavenger; 15.01.2016