locked
ListViewItemPresenter pointer over foreground

    Question

  • Hi,

    If I change the ListViewItemPresenter SelectedForeground brush, all items (and not only the selected one) have that brush when pointer is over.
    Is it possible to specify a pointer over foreground different from SelectedForeground brush?

    What about adding PointerOverForeground to ListViewItemPresenter?

    I also noticed the if I set Background different from Trasparent, then PointerOverBackground and SelectedBackground don't work anymore.

    Saturday, April 19, 2014 9:56 AM

All replies

  • I just did it and see no issue, are you sure you are doing it in right way? Follow the steps given in image below

    And then change SelectedForeground as given in below XAML

    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style x:Key="CustomListViewItemStyle" 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="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">
                            <ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                                   CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                                   ContentMargin="4" 
                                                   ContentTransitions="{TemplateBinding ContentTransitions}" 
                                                   CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                                   DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                                   DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                                   DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                                   DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                                   FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                   Padding="{TemplateBinding Padding}" 
                                                   PointerOverBackgroundMargin="1" 
                                                   PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                                   PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" 
                                                   ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                                   SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                                                   SelectionCheckMarkVisualEnabled="True" 
                                                   SelectedForeground="Red" 
                                                   SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                                                   SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" 
                                                   SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView ItemContainerStyle="{StaticResource CustomListViewItemStyle}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Height="50" Width="300" Background="Blue">
                            <TextBlock Padding="10" Text="This is a test"/>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Items>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                    <TextBlock/>
                </ListView.Items>
            </ListView>
        </Grid>
    </Page>
    

    This will change foreground brush for selected items to Red. I have used Visual Studio and Blank Windows 8.1 project template. This XAML can be replaced with default MainPage.xaml if you name your App as App1


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Sunday, April 20, 2014 10:04 AM
  • Hi,

    try this instead of your ListView:

    <ListView ItemContainerStyle="{StaticResource CustomListViewItemStyle}" Width="500" VerticalAlignment="Center" HorizontalAlignment="Center">
                <ListView.Items>
                    <ListViewItem Content="Item 1" IsSelected="True" />
                    <ListViewItem Content="Item 2"  />
                    <ListViewItem Content="Item 3"  />
                    <ListViewItem Content="Item 4"  />
                    <ListViewItem Content="Item 5"  />                
                </ListView.Items>
            </ListView>

    You can notice that selected item foreground is red but also you have red text when pointer is over items not selected.

    Sunday, April 20, 2014 10:38 AM